PDA

View Full Version : CMotion and FiF issue



Armafair
06-25-2005, 06:59 PM
CMotion Image Gallery
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm

I have put the script into my page to display ten images. When viewed through IE, the script works fine, but FireFox only wants to show seven and a bit of the images before declaring End Of Gallery.

I have looked through the code but can't find any limiter of the 'length' of the slideshow (presumably IF there were one it would be in pixels, as the 'last' image diplayed in FF is only partly visible).

Any idea what the issue might be in FireFox? I haven't checked the page on other browsers yet...

Many Thanks.

A.

jscheuer1
06-25-2005, 10:08 PM
I've run across this a few times before and was searching the archives to see if I could find the solution. I only found one relevant thread but, there, no solution was found. I distinctly remember finding one though, for another fellow. It was a tough case, one where we found a few partial solutions that had drawbacks and I needed to go over the source numerous times. Finally we came up with a workable solution. If you could supply a link to the page in question, I'll give it a crack.

jscheuer1
06-25-2005, 11:11 PM
Turn's out the old adage - you learn more from your failures than you do from your successes - is true in this case. I decided to go after this problem using the case I found in the archives that I hadn't been able to solve, as it turns out, a much simpler example. By simply removing the doctype declaration, I was able to fix it. The trouble is that with a doctype of:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">and I am sure, many others, the width calculated by the script for Mozilla based browsers is wrong. So, you can either remove your doctype from the page or, find this line in the script:
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidthand change it to:
actualwidth=document.all? cross_scroll.offsetWidth : numbersubstitute for number the actual width of the gallery's train of images, use the number only - no px after it, no quotes around it. Ex:
actualwidth=document.all? cross_scroll.offsetWidth : 1850You can find this number by adding together the display width of all the images plus the width of any padding and/or spacing. OR, just temporarily, insert this line just below that line in the unaltered script:
alert(actualwidth)view the page in IE and use the value shown in the alert box.

jscheuer1
06-26-2005, 07:51 AM
I looked into this further and the real fix is to give the <nobr> tag on the display page an id like so:
<div id="motioncontainer" style="position:relative;width:400px;height:150px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href . . . snip!Then in the original motiongallery.js script, change this line:
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidthto this:
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidthThere now, that's alot easier, huh?

Armafair
06-27-2005, 02:06 PM
A simple and elegant solution.

Many thanks for the time you invested in the problem, John. It's much appreciated.

*runs off to download some more browsers ;)

A.

Soldierflup
09-01-2005, 12:06 PM
I downloaded this fantastic script and implemented it on a testpage (http://www.senichouses.com/testpropdisplay.php).
In IE there are no problems, in Firefox (1.0.5) and Netscape (7.2) i'm receiving the following error :


on line 112 : b has no properties.

The used code has been checked with the solutions given on this forumtopic.
Allthough most of the users are using IE, I would like it to work in all browsers.

I must admit i'm not an expert in javascript, so if anyone can help ???

jscheuer1
09-01-2005, 04:02 PM
Two things at work here and I have some suggestions for refinement. First of all, you broke the 'fix' for this script when you introduced another 'containing element', a table, into the html markup. If you remove id="trueContainer" from the <nobr> tag and apply it to the <table> tag, this will correct that:

<nobr>

<table id="trueContainer"> Second, the error you got is just an artifact caused by having another window (perhaps the javascript console itself) over the page. This is not a script breaking error and resolves itself once focus is fully returned to the window this script is in. As for suggestions, in Mozilla and with such a long image train, 7 is too low for maxspeed, so I would suggest using a test at the assignment of that variable like, where it says:

var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.Change it to:

var maxspeed=(document.all&&!window.opera)? 7 : 27 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.NOTE: This is only needed for a gallery containing so many images and the exact values (7 and 27) can be adjusted as you see fit. The 7 in this case is for IE and the 27 is for Mozilla and Opera (opera untested, may need to be removed from the conditional, take out '&&!window.opera' or change to '||window.opera' if it causes problems in opera.)

The other suggestion that I have is that if you want the galley centered, enclose the entire html part in a centered element.

Soldierflup
09-02-2005, 09:58 AM
Thank you very much. It's working now in the other browsers too. :) :) :)

TheRec
09-11-2005, 11:10 AM
Hello,

I use the CMotion Gallery and I also came accross the "b has no properties" Javascript error, but I don't get this error in the same situation than "Soldierflup". It happens on FireFox (1.0.6), Netscape (7.2 & 8.0), when I use the mouse scroll button (to scroll up or down the page), while being over the gallery with the mouse cursor.

That a really particular case I admit, but maybe someone will be more successful to debug this, I tired but I couldn't find any solution to this :S My guess is that Firefox/Netscape (well Gecko) considers that the mouse moves out of the gallery (although it doesn't in my case, the scrollbar is very small) ... which call the "stopmotion" function. This error doesn't happen in Opera...

Thanks a lot for your script, and thanks in advance for your answers.

TheRec
09-11-2005, 11:34 AM
I guess I'll answer my stupid question myself... mabye I'll help other people like me ;)

Replace :

function contains_ns6(a, b) {
if(b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
}
return false;
}
by :

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

It solves the problem and the script still works in MSIE5.5/MSIE6, FireFox 1.0.6, Netscape 7.2/Netscape 8.0, Opera 7.5 / Opera 8.0 , Safari 1.2.2 and MSIE 5.2 Mac.

Hope it will help, sorry again :)

samarita
10-27-2005, 03:25 PM
I looked into this further and the real fix is to give the <nobr> tag on the display page an id like so:
<div id="motioncontainer" style="position:relative;width:400px;height:150px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href . . . snip!Then in the original motiongallery.js script, change this line:
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidthto this:
actualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("trueContainer").offsetWidthThere now, that's alot easier, huh?

=================================The Cmotion Gallery script is not working in Netscape and Firefox (Mozilla)

Can someone advise me on this?

Thanks,

samarita
10-27-2005, 03:26 PM
The Cmotion gallery script is not working in Netscape and Firefox (Mozilla).

Can someone advise me on this?

Thanks

jscheuer1
10-27-2005, 03:38 PM
samarita,

The current Cmotion script on DD here has already been updated to reflect the changes I laid out in this thread. So, to begin with, make sure you are using the most recent version. As far as any problem you may be having beyond that (not covered by TheRec's tweak outlined in this thread), I would need to see your implementation:

.

morris_the_cat
11-28-2005, 10:32 PM
Hi!

I'm using this really cool script and it works great in IE but I can't get it to work in Firefox and Netscape. I've tried with the newer version but then it doesn't work at all. Can somebody help me please.

Here's the URL Link (http://www.maxmoden.com/test/visa2.asp?ItemID=photos/Väg01.jpg&kategori=others&sub_kat=1&rubrik=Centro)

Martin

jscheuer1
11-29-2005, 05:43 AM
Your HTML markup doesn't follow the intended design. You have for some reason used:


<nobr id="trueContainer">

as a preface for each individual image in the gallery and neglected to close any of those tags with an </nobr> tag. The intended design is for only one:


<nobr id="trueContainer">

at the beginning of the entire content and then a single </nobr> at the end of it, like so:


<nobr id="trueContainer"><a href="visa2.asp?ItemID=photos/Separe01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Separe01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Separe02.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Separe02.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Separe03.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Separe03.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/bord01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_bord01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Restu01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Restu01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Bordnära01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Bordnära01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Lampa1.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Lampa1.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/fönstbord01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_fönstbord01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Rundabord01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Rundabord01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Rundabord02.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Rundabord02.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Fåtölj01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Fåtölj01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Lounge01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Lounge01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Rundfönst01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Rundfönst01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Rundsofa01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Rundsofa01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Väg01.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Väg01.jpg" alt="" border="0"></a>
<a href="visa2.asp?ItemID=photos/Väg02.jpg&kategori=others&sub_kat=1&rubrik=Centro"><img src="photos/thumbs/small_Väg02.jpg" alt="" border="0"></a></nobr>

Taking care of that will go a long way toward fixing things in those two browsers you mentioned, it may even be the only problem.

morris_the_cat
11-29-2005, 11:18 AM
Thank you so much for the fast reply! I'll try it right away!

Martin

mahk
12-08-2005, 09:50 PM
Is there any way to add labels to the pictures in the gallery. For instance, it would be great if you could put the name of each image below or above the picture, and it scrolls along the picture. Unfortunately, tables does not seem to work in the script.

Thanks in Advance.
Mahk

jscheuer1
12-08-2005, 11:20 PM
This type of syntax worked here:


<table id="trueContainer"><tr><td><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td><td><a href="#"><img src="dynamicbook1.gif" border=1></a><br>caption</td></tr></table>

Substitute it for:


<nobr id="trueContainer"> . . . </nobr>

Notes: to center the captions under the images, put this in the head of the page:


<style type="text/css">
#trueContainer td {
text-align:center;
}
</style>

mahk
12-09-2005, 04:41 PM
Great! I was close, I was just putting the table in the nobr... Thank a ton! It looks great. www.thepostshow.com (http://www.thepostshow.com)

All the best,
Mahk

Raymond_b
12-17-2005, 02:15 AM
Hi, guys,
I have a little problem with this script, I tested it and all gone well but when I added to my real web page it wasn't working (thumbnail pictures weren't moving), so I carefully searched the problem and come to conclusion that the thing why this script doesn't want to work is my onload images in body tag... when I remove them, all works fine, when I add them back the gallery just isn't moving anymore.
Does anyone have a good idea how to solve this thing?

jscheuer1
12-17-2005, 05:32 AM
What images are onload in the body tag? If they are the images from the gallery, just get rid of the onload event. By the time onload fires, the images for the gallery are already loaded or are being loaded. If they are other images - say for a menu or other rollover effects on the page, it still doesn't make much sense to load them onload:

Gets on his soapbox:

Preloading images is best done on a page prior to the one they will be used on. Failing that, the code to preload them should be one of the first things the browser encounters on the page. If you wait until the page is loaded to preload your images, they aren't really being preloaded, are they?

Gets off his soapbox.

If these are other images and need to be preloaded to make other effects on your page work, I could help you to devise a more efficient way to make that happen without an onload event. Finally, if you won't have it any other way or if you have other legitimate onload events that need to be combined with this script, remove this line from motiongallery.js:


window.onload=fillup

Then in your body tag with the other onload event, let's say it looks something like this:


<body onload="someFunc('param_1', 'param_2');">

Make it look like this:


<body onload="fillup();someFunc('param_1', 'param_2');">

Raymond_b
12-17-2005, 01:28 PM
Wow, that was pretty simple! Thank you very, very much! I highly appreciate that!

KittyR
12-27-2005, 04:46 AM
Ok, I give up. How do you make two or more motion galleries run on the same page? I'm sooooooo close, but no cigar.

I went to the "function fillup" section and copied everything in the "if (iedom)" section, pasted it at the end and changed everything to "motiongallery2" etc. Then named the second gallery in my html page "motiongallery2" etc.

Hey, it was a good try for someone who knows nothing about javascript, but of course whichever one is last in the script is the only one that works.

I would be plum tickled if you had a way for this to work. :o

thanks,
Kitty

jscheuer1
12-27-2005, 05:38 AM
The easiest way to have two of the same scripts of this type on one page would be to actually have them be on two pages. One on the page itself, the other showing through onto that page via an iframe.

The method that it appears you are attempting can work but, one needs to be very thorough in creating two separate scripts, each with its own unique variable, function and id names.

I will have a look at the possibility of modifying the script (as has recently been done with the Fade-In Slideshow) to allow for multiple instances but, cannot promise anything on that front, due to the level of difficulty (for me) and the time involved (for anyone) that this entails.

KittyR
12-29-2005, 12:48 AM
The iFrame works fine.

thanks!
Kitty

FoC
03-21-2006, 04:21 PM
Is it possible to customize the gallery so that it runs vertically ?

nouvelle-cible
03-22-2006, 03:57 PM
Yeah, I search a same version in vertically :) It be nice :)

jscheuer1
03-22-2006, 05:02 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Vertical CMotion Image Gallery - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#motioncontainer a img{ /*image border color*/
border: 1px solid #ccc;
}

#motioncontainer a:hover img{ /*image border hover color*/
border: 1px solid navy;
}

#motioncontainer a:hover{
color: red; /* Dummy definition to overcome IE bug */
}

#statusdiv{
position: absolute;
padding: 2px;
left: -300px;
background-color: lightyellow;
border: 1px solid gray;
visibility: hidden;
}
</style>

<script type="text/javascript">
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Last updated Mar 15th, 04'. Added "End of Gallery" message.
* This copyright notice must stay intact for legal use
* modified in http://www.dynamicDrive.com/forums
* for vertical orientation by jscheuer1
***********************************************/

var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var endofgallerymsg="<span style='font-size: 11px'>End of Gallery</span>" //3) message to show at end of gallery. Enter "" to disable message.

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=""

var actualheight=''
var cross_scroll, ns_scroll
var loadedyes=0

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function creatediv(){
statusdiv=document.createElement("div")
statusdiv.setAttribute("id","statusdiv")
document.body.appendChild(statusdiv)
statusdiv=document.getElementById("statusdiv")
statusdiv.innerHTML=endofgallerymsg
}

function positiondiv(){
menuwidth=parseInt(crossmain.offsetWidth)
mainobjoffsetW=getposOffset(crossmain, "left")
statusdiv.style.left=mainobjoffsetW+(menuwidth/2)-(statusdiv.offsetWidth/2)+"px"
statusdiv.style.top=menu_height+mainobjoffset+10+"px"
}

function showhidediv(what){
if (endofgallerymsg!="")
statusdiv.style.visibility=what
}

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function moveup(){
if (loadedyes){
movestate="up"
if (iedom&&parseInt(cross_scroll.style.top)>(menu_height-actualheight)){
cross_scroll.style.top=parseInt(cross_scroll.style.top)-scrollspeed+"px"
showhidediv("hidden")
}
else
showhidediv("visible")
}
uptime=setTimeout("moveup()",10)
}

function movedown(){
if (loadedyes){
movestate="down"
if (iedom&&parseInt(cross_scroll.style.top)<0){
cross_scroll.style.top=parseInt(cross_scroll.style.top)+scrollspeed+"px"
showhidediv("hidden")
}
else
showhidediv("visible")
}
downtime=setTimeout("movedown()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientY : e.clientY? e.clientY: ""
curposy-=mainobjoffset-dsocy
var leftbound=(menu_height-restarea)/2
var rightbound=(menu_height+restarea)/2
if (curposy>rightbound){
scrollspeed=(curposy-rightbound)/((menu_height-restarea)/2) * maxspeed
if (window.downtime) clearTimeout(downtime)
if (movestate!="up") moveup()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menu_height-restarea)/2) * maxspeed
if (window.uptime) clearTimeout(uptime)
if (movestate!="down") movedown()
}
else
scrollspeed=0
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
if (window.downtime) clearTimeout(downtime)
if (window.uptime) clearTimeout(uptime)
movestate=""
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, "top")
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
actualheight=cross_scroll.offsetHeight

crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
showhidediv("hidden")
}
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv()
positiondiv()
}
}
window.onload=fillup
</script>
</head>
<body>
<div style="overflow:hidden;">
<div id="motioncontainer" style="position:relative;width:110px;height:400px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;">

<a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a>
</div>
</div>
</div>
</body>
</html>

nouvelle-cible
03-22-2006, 11:27 PM
Great !!! Good job John !!!

Thank you :D

jscheuer1
03-23-2006, 01:15 AM
Great !!! Good job John !!!

Thank you :D

Thanks, I played around with it a little more and discovered a minor Opera bug that can become major under certain circumstances. To avoid it, use this updated fillup() function (additions red):


function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, "top")
cross_scroll=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
actualheight=cross_scroll.offsetHeight

crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
showhidediv("hidden")
}
}
if (window.opera){
cross_scroll.style.top=menu_height-actualheight+'px'
setTimeout('cross_scroll.style.top=0', 10)
}
loadedyes=1
if (endofgallerymsg!=""){
creatediv()
positiondiv()
}
}

nouvelle-cible
03-24-2006, 12:45 PM
Would it be possible to add a function making it possible to make scroll the images automatically in set speed ?

P.S.: Add this script on your site :)

jscheuer1
03-24-2006, 03:30 PM
By 'my site' I hope you don't mean Dynamic Drive. See signature below. Anyways, I already made a continuous scrolling vertical gallery (http://home.comcast.net/~jscheuer1/side/marquee_v_slide.htm). To see it mimic the cmotion in size, paste this into the address bar while viewing it and hit enter:


javascript:alert(document.getElementById('iemarquee').parentNode.style.height='450px')

Or make your own by copying the code using your browser's 'view source' and modify the:


//Specify the marquee's height
var marqueeheight="225px"

setting.

nouvelle-cible
03-24-2006, 03:37 PM
It would be necessary to adapt the "Marquee" on the previous code (Vertical Motion) because your example is great, but one cannot go up any more :(

jscheuer1
03-24-2006, 04:02 PM
I was afraid you might want that. I made a version from the horizontal (original) cmotion that was continuous in motion at a set speed while the mouse was out. When I get a chance, I'll see about adapting the new vertical one to it or visa-versa.

nouvelle-cible
03-24-2006, 04:07 PM
Ok, thank you, I'll wait :):):)

jscheuer1
03-25-2006, 07:07 AM
Patience is a virtue:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Vertical Continuous CMotion Image Gallery - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#motioncontainer img {
border: 1px solid #ccc; /*image border color*/
margin-top:4px!important; /*added image spacing most browsers - can be negative*/
margin-top:0px; /*added image spacing IE - can be negative*/
}

#motioncontainer a:hover img { /*image border hover color*/
border: 1px solid navy;
}

#motioncontainer a:hover {
color: red; /* Dummy definition to overcome IE bug */
}

</style>

<script type="text/javascript">
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Last updated Mar 25th, 06'. Vertical - Continuous (jscheuer1)
* This copyright notice must stay intact for legal use
* modified in http://www.dynamicDrive.com/forums
* for vertical orientation & continuous motion by jscheuer1
***********************************************/

var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var defaultspeed=1 //3) speed of scroll when gallery loads and on mouseout.
var startdir='down' //4 'up' or 'down' initial direction
var stayput=0 //5) 0 for gallery always in motion onmouseout, 1 for remains halted onmouseout if not moving when mouse moves out.

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=""

var actualheight=''
var cross_scroll_0, cross_scroll_1
var loadedyes=0

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function moveup(){
if (iedom&&loadedyes){
movestate="up"
if (parseInt(cross_scroll_0.style.top)<(-actualheight))
cross_scroll_0.style.top=parseInt(cross_scroll_1.style.top)+actualheight+"px"
if (parseInt(cross_scroll_1.style.top)<(-actualheight))
cross_scroll_1.style.top=parseInt(cross_scroll_0.style.top)+actualheight+"px"
cross_scroll_0.style.top=parseInt(cross_scroll_0.style.top)-scrollspeed+"px"
cross_scroll_1.style.top=parseInt(cross_scroll_1.style.top)-scrollspeed+"px"

}
uptime=setTimeout("moveup()",10)
}

function movedown(){
if (iedom&&loadedyes){
movestate="down"
if (parseInt(cross_scroll_0.style.top)>0)
cross_scroll_1.style.top=parseInt(cross_scroll_0.style.top)-actualheight+"px"
if (parseInt(cross_scroll_1.style.top)>0)
cross_scroll_0.style.top=parseInt(cross_scroll_1.style.top)-actualheight+"px"
cross_scroll_0.style.top=parseInt(cross_scroll_0.style.top)+scrollspeed+"px"
cross_scroll_1.style.top=parseInt(cross_scroll_1.style.top)+scrollspeed+"px"
}
downtime=setTimeout("movedown()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientY : e.clientY? e.clientY: ""
curposy-=mainobjoffset-dsocy
var leftbound=(menu_height-restarea)/2
var rightbound=(menu_height+restarea)/2
if (curposy>rightbound){
scrollspeed=Math.floor((curposy-rightbound)/((menu_height-restarea)/2) * maxspeed)
if (window.downtime) clearTimeout(downtime)
if (movestate!="up") moveup()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menu_height-restarea)/2) * maxspeed
if (window.uptime) clearTimeout(uptime)
if (movestate!="down") movedown()
}
else
scrollspeed=0
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
if (scrollspeed<defaultspeed&&stayput)
return;
scrollspeed=defaultspeed
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, "top")
cross_scroll_0=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
cross_scroll_1=document.createElement('div')
cross_scroll_1.style.position='absolute'
cross_scroll_1.innerHTML=cross_scroll_0.innerHTML
crossmain.appendChild(cross_scroll_1)
actualheight=cross_scroll_0.offsetHeight
cross_scroll_1.style.top=actualheight+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
}
}
if (window.opera){
cross_scroll_0.style.top=menu_height-actualheight+'px'
setTimeout('cross_scroll_0.style.top=0', 10)
}
loadedyes=1
scrollspeed=defaultspeed
if (startdir=='up')
moveup()
else
movedown()
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fillup, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", fillup );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
fillup();
};
}
else
window.onload = fillup;
}
</script>
</head>
<body>
<div style="overflow:hidden;">
<div id="motioncontainer" style="position:relative;width:150px;height:400px;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;">

<a href="javascript:enlargeimage('../thumb2/photo1.jpg')"><img src="../thumb2/photo1.jpg" border=1></a> <a href="javascript:enlargeimage('../thumb2/photo2.jpg', 300, 300)"><img src="../thumb2/photo2.jpg" border=1></a> <a href="http://www.dynamicdrive.com"><img src="../thumb2/photo3.jpg" border=1></a> <a href="#"><img src="../thumb2/photo4.jpg" border=1></a> <a href="#"><img src="../thumb2/photo5.jpg" border=1></a> <a href="#"><img src="../thumb2/photo6.jpg" border=1></a> <a href="#"><img src="../thumb2/photo7.jpg" border=1></a> <a href="#"><img src="../thumb2/photo8.jpg" border=1></a> <a href="#"><img src="../thumb2/photo9.jpg" border=1></a>
</div>
</div>
</div>
</body>
</html>

jara
04-10-2006, 08:04 PM
My motion gallery is working almost perfect. I want the images to run slower from left to right and from right to left.
Besides that I want my pictures to enlarge as in the following site www.kjosoutdoors.com/gallery_stock.html
Many thanks from a dutch girl

jscheuer1
04-10-2006, 08:58 PM
The speed of the gallery is controlled in the configuration:


var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var endofgallerymsg="<span style='font-size: 11px'>End of Gallery</span>" //3) message to show at end of gallery. Enter "" to disable message.

A function could be written perhaps to zoom in/out (in IE) and/or change the dimensions of the images. It might be difficult or impossible to get it to look as smooth as the flash demo your post links to.

jennwee83
04-30-2006, 02:34 PM
Hi jscheuer1,

I used your code and modified it to become horizontal - continues..
However, after i modified it...I have a problem....

When the pictures move from left to right....there are no problems...
But, when the pictures move from right to left, the pictures start overlaping...

The modified code has shown below:
// JavaScript Document
/***********************************************
* CMotion Image Gallery- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Last updated Mar 25th, 06'. Vertical - Continuous (jscheuer1)
* This copyright notice must stay intact for legal use
* modified in http://www.dynamicDrive.com/forums
* for vertical orientation & continuous motion by jscheuer1
***********************************************/

var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var defaultspeed=1 //3) speed of scroll when gallery loads and on mouseout.
var startdir='down' //4 'up' or 'down' initial direction
var stayput=0 //5) 0 for gallery always in motion onmouseout, 1 for remains halted onmouseout if not moving when mouse moves out.

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=""

var actualheight=''
var cross_scroll_0, cross_scroll_1
var loadedyes=0

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function moveup(){
if (iedom&&loadedyes){
movestate="up"
if (parseInt(cross_scroll_0.style.top)<(-actualheight))
cross_scroll_0.style.top=parseInt(cross_scroll_1.style.top)+actualheight+"px"
if (parseInt(cross_scroll_1.style.top)<(-actualheight))
cross_scroll_1.style.top=parseInt(cross_scroll_0.style.top)+actualheight+"px"
cross_scroll_0.style.top=parseInt(cross_scroll_0.style.top)-scrollspeed+"px"
cross_scroll_1.style.top=parseInt(cross_scroll_1.style.top)-scrollspeed+"px"

}
uptime=setTimeout("moveup()",10)
}

function movedown(){
if (iedom&&loadedyes){
movestate="down"
if (parseInt(cross_scroll_0.style.top)>0)
cross_scroll_1.style.top=parseInt(cross_scroll_0.style.top)-actualheight+"px"
if (parseInt(cross_scroll_1.style.top)>0)
cross_scroll_0.style.top=parseInt(cross_scroll_1.style.top)-actualheight+"px"
cross_scroll_0.style.top=parseInt(cross_scroll_0.style.top)+scrollspeed+"px"
cross_scroll_1.style.top=parseInt(cross_scroll_1.style.top)+scrollspeed+"px"
}
downtime=setTimeout("movedown()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientY : e.clientY? e.clientY: ""
curposy-=mainobjoffset-dsocy
var leftbound=(menu_height-restarea)/2
var rightbound=(menu_height+restarea)/2
if (curposy>rightbound){
scrollspeed=Math.floor((curposy-rightbound)/((menu_height-restarea)/2) * maxspeed)
if (window.downtime) clearTimeout(downtime)
if (movestate!="up") moveup()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menu_height-restarea)/2) * maxspeed
if (window.uptime) clearTimeout(uptime)
if (movestate!="down") movedown()
}
else
scrollspeed=0
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
if (scrollspeed<defaultspeed&&stayput)
return;
scrollspeed=defaultspeed
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_height=parseInt(crossmain.style.height)
mainobjoffset=getposOffset(crossmain, "top")
cross_scroll_0=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
cross_scroll_1=document.createElement('div')
cross_scroll_1.style.position='absolute'
cross_scroll_1.innerHTML=cross_scroll_0.innerHTML
crossmain.appendChild(cross_scroll_1)
actualheight=cross_scroll_0.offsetHeight
cross_scroll_1.style.top=actualheight+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
}
}
if (window.opera){
cross_scroll_0.style.top=menu_height-actualheight+'px'
setTimeout('cross_scroll_0.style.top=0', 10)
}
loadedyes=1
scrollspeed=defaultspeed
if (startdir=='up')
moveup()
else
movedown()
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fillup, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", fillup );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
fillup();
};
}
else
window.onload = fillup;
}

Thank you very much!!
Jenn Wee

jennwee83
04-30-2006, 02:35 PM
Sorry for the previous post...

The code has been shown below:

/***********************************************
* CMotion Image Gallery- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Last updated Mar 15th, 04'. Added "End of Gallery" message.
* This copyright notice must stay intact for legal use
***********************************************/

var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var defaultspeed=1 //3) speed of scroll when gallery loads and on mouseout.
var startdir='right' //4 'left' or 'right' initial direction
var stayput=0 //5) 0 for gallery always in motion onmouseout, 1 for remains halted onmouseout if not moving when mouse moves out.

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=""

var actualwidth=''
var cross_scroll_0, cross_scroll_1
var loadedyes=0

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}



function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function moveleft(){
if (iedom&&loadedyes){
movestate="left"
if (parseInt(cross_scroll_0.style.left)<(-actualwidth))
cross_scroll_0.style.left=parseInt(cross_scroll_1.style.left)+actualwidth+"px"
if (parseInt(cross_scroll_1.style.left)<(-actualwidth))
cross_scroll_1.style.left=parseInt(cross_scroll_0.style.left)+actualwidth+"px"
cross_scroll_0.style.left=parseInt(cross_scroll_0.style.left)-scrollspeed+"px"
cross_scroll_1.style.left=parseInt(cross_scroll_1.style.left)-scrollspeed+"px"

}
lefttime=setTimeout("moveleft()",10)
}

function moveright(){
if (iedom&&loadedyes){
movestate="right"
if (parseInt(cross_scroll_0.style.left)>0)
cross_scroll_1.style.left=parseInt(cross_scroll_0.style.left)-actualwidth+"px"
if (parseInt(cross_scroll_1.style.left)>0)
cross_scroll_0.style.left=parseInt(cross_scroll_1.style.left)-actualwidth+"px"
cross_scroll_0.style.left=parseInt(cross_scroll_0.style.left)+scrollspeed+"px"
cross_scroll_1.style.left=parseInt(cross_scroll_1.style.left)+scrollspeed+"px"
}
righttime=setTimeout("moveright()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientX : e.clientX? e.clientX: ""
curposy-=mainobjoffset-dsocx
var leftbound=(menu_width-restarea)/2
var rightbound=(menu_width+restarea)/2
if (curposy>rightbound){
scrollspeed=Math.floor(curposy-rightbound)/((menu_width-restarea)/2) * maxspeed
if (window.righttime) clearTimeout(righttime)
if (movestate!="left") moveleft()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menu_width-restarea)/2) * maxspeed
if (window.lefttime) clearTimeout(lefttime)
if (movestate!="right") moveright()
}
else
scrollspeed=0
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
if (scrollspeed<defaultspeed&&stayput)
return;
scrollspeed=defaultspeed
}
}


function fillup(){

if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menu_width=parseInt(crossmain.style.width)
mainobjoffset=getposOffset(crossmain, "left")
cross_scroll_0=document.getElementById? document.getElementById("motiongallery") : document.all.motiongallery
cross_scroll_1=document.createElement('div')
cross_scroll_1.style.position='absolute'
cross_scroll_1.innerHTML=cross_scroll_0.innerHTML
crossmain.appendChild(cross_scroll_1)
actualwidth=cross_scroll_0.offsetWidth
cross_scroll_1.style.left=actualwidth+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
}
}
if (window.opera){
cross_scroll_0.style.left=menu_width-actualwidth+'px'
setTimeout('cross_scroll_0.style.left=0', 10)
}
loadedyes=1
scrollspeed=defaultspeed
if (startdir=='left')
moveleft()
else
moveright()
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fillup, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", fillup );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
fillup();
};
}
else
window.onload = fillup;
}

Thank you very much!!
Jenn Wee

jscheuer1
05-01-2006, 05:04 AM
I had made this (horizontal continuous) one up a bit ago, it is probably in another thread somewhere but, I just added a few more options, so use this one:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- saved from url=(0014)about:internet -->
<!-- this and above comment should be removed for live, non-demo use -->
<head>
<title>Cmotion Continuous</title>
<style type="text/css">
body {
background-color:violet;
}

#motioncontainer {
background-color:purple;
border:2px solid purple;
}

#motioncontainer a img{ /*image border color*/
border: 1px solid #ccc;
}

#motioncontainer a:hover img{ /*image border hover color*/
border: 1px solid navy;
}

#motioncontainer a:hover{
color: red; /* Dummy definition to overcome IE bug */
}

</style>
<script type="text/javascript">
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for source code
* Last updated Mar 15th, 04'. Added "End of Gallery" message.
* This copyright notice must stay intact for legal use
* Modified here for continuous looping motion by jscheuer1
* as first seen in http://www.dynamicdrive.com/forums
***********************************************/

var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var running=0 //3) Set to 1 for default scrolling onmouseout except for when gallery is already stopped.
var defaultspeed=2 //4) if running=1 set to default speed for mouseout scrolling.

function enlargeimage(path, optWidth, optHeight){ //function to enlarge image. Change as desired.
var actualWidth=typeof optWidth!="undefined" ? optWidth : "600px" //set 600px to default width
var actualHeight=typeof optHeight!="undefined" ? optHeight : "500px" //set 500px to default height
var winattributes="width="+actualWidth+",height="+actualHeight+",resizable=yes"
window.open(path,"", winattributes)
}

////NO NEED TO EDIT BELOW THIS LINE////////////

var iedom=document.all||document.getElementById
var scrollspeed=0
var movestate=""

var actualwidth=''
var cross_scroll_0, cross_scroll_1, ns_scroll
var loadedyes=0

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft: what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function moveleft(){
if (iedom&&loadedyes){
movestate="left"
if (parseInt(cross_scroll_0.style.left)<(-actualwidth))
cross_scroll_0.style.left=parseInt(cross_scroll_1.style.left)+actualwidth+"px"
if (parseInt(cross_scroll_1.style.left)<(-actualwidth))
cross_scroll_1.style.left=parseInt(cross_scroll_0.style.left)+actualwidth+"px"
cross_scroll_0.style.left=parseInt(cross_scroll_0.style.left)-scrollspeed+"px"
cross_scroll_1.style.left=parseInt(cross_scroll_1.style.left)-scrollspeed+"px"
//showhidediv("visible")
}
lefttime=setTimeout("moveleft()",10)
}

function moveright(){
if (iedom&&loadedyes){
movestate="right"
if (parseInt(cross_scroll_0.style.left)>0)
cross_scroll_1.style.left=parseInt(cross_scroll_0.style.left)-actualwidth+"px"
if (parseInt(cross_scroll_1.style.left)>0)
cross_scroll_0.style.left=parseInt(cross_scroll_1.style.left)-actualwidth+"px"
cross_scroll_0.style.left=parseInt(cross_scroll_0.style.left)+scrollspeed+"px"
cross_scroll_1.style.left=parseInt(cross_scroll_1.style.left)+scrollspeed+"px"
}
righttime=setTimeout("moveright()",10)
}

function motionengine(e){
var dsocx=(window.pageXOffset)? pageXOffset: ietruebody().scrollLeft;
var dsocy=(window.pageYOffset)? pageYOffset : ietruebody().scrollTop;
var curposy=window.event? event.clientX : e.clientX? e.clientX: ""
curposy-=mainobjoffset-dsocx
var leftbound=(menuwidth-restarea)/2
var rightbound=(menuwidth+restarea)/2
if (curposy>rightbound){
scrollspeed=Math.floor((curposy-rightbound)/((menuwidth-restarea)/2) * maxspeed)
if (window.righttime) clearTimeout(righttime)
if (movestate!="left") moveleft()
}
else if (curposy<leftbound){
scrollspeed=(leftbound-curposy)/((menuwidth-restarea)/2) * maxspeed
if (window.lefttime) clearTimeout(lefttime)
if (movestate!="right") moveright()
}
else
scrollspeed=0
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function stopmotion(e){
if ((window.event&&!crossmain.contains(event.toElement)) || (e && e.currentTarget && e.currentTarget!= e.relatedTarget && !contains_ns6(e.currentTarget, e.relatedTarget))){
if (running){
if (scrollspeed<2)
return;
scrollspeed=defaultspeed
return;
}
else {
if (window.lefttime) clearTimeout(lefttime)
if (window.righttime) clearTimeout(righttime)
movestate=""
}
}
}

function fillup(){
if (iedom){
crossmain=document.getElementById? document.getElementById("motioncontainer") : document.all.motioncontainer
menuwidth=parseInt(crossmain.style.width)
mainobjoffset=getposOffset(crossmain, "left")
cross_scroll_0=document.getElementById? document.getElementById("motiongallery_0") : document.all.motiongallery_0
cross_scroll_1=document.createElement('div')
cross_scroll_1.style.position='absolute'
cross_scroll_1.style.whiteSpace='nowrap'
extra=document.createElement('nobr')
extra.innerHTML=document.all? document.all['trueContainer'].innerHTML : document.getElementById("trueContainer").innerHTML
cross_scroll_1.appendChild(extra)
crossmain.appendChild(cross_scroll_1)
actualwidth=document.all? cross_scroll_0.offsetWidth : document.getElementById("trueContainer").offsetWidth
cross_scroll_1.style.left=actualwidth+'px'
crossmain.onmousemove=function(e){
motionengine(e)
}

crossmain.onmouseout=function(e){
stopmotion(e)
}
}
loadedyes=1
if (running){
scrollspeed=defaultspeed
moveleft()
}
}
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", fillup, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", fillup );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
fillup();
};
}
else
window.onload = fillup;
}
</script>
</head>
<body><center>
<div id="motioncontainer" style="position:relative;width:400px;height:225px;overflow:hidden;">
<div id="motiongallery_0" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer">&nbsp;<a href="javascript:enlargeimage('../thumb2/photo1.jpg')"><img src="../thumb2/photo1.jpg" border=1></a> <a href="javascript:enlargeimage('../thumb2/photo2.jpg', 300, 300)"><img src="../thumb2/photo2.jpg" border=1></a> <a href="http://www.dynamicdrive.com"><img src="../thumb2/photo3.jpg" border=1></a> <a href="#"><img src="../thumb2/photo4.jpg" border=1></a> <a href="#"><img src="../thumb2/photo5.jpg" border=1></a> <a href="#"><img src="../thumb2/photo6.jpg" border=1></a> <a href="#"><img src="../thumb2/photo7.jpg" border=1></a> <a href="#"><img src="../thumb2/photo8.jpg" border=1></a> <a href="#"><img src="../thumb2/photo9.jpg" border=1></a></nobr>

</div>
</div></center>
</body>
</html>

jennwee83
05-02-2006, 11:40 AM
Hi John,

Thanks for your code and reply...

However, when i applied it into my website...it was not workable...But i'm not sure where is wrong....
I will try to check where goes wrong...
Thanks very much!!!

jennwee83
05-02-2006, 02:19 PM
Hi John,

The code u provided above doesn't automatic scrolling when we load the page.

But the code you provided before (vertical continues) is a very good example...
Thanks

Regards
Jenn Wee

jscheuer1
05-02-2006, 03:47 PM
Hi John,

The code u provided above doesn't automatic scrolling when we load the page.

But the code you provided before (vertical continues) is a very good example...
Thanks

Regards
Jenn Wee

I had no way of knowing if you wanted it to start scrolling onload or not. That, and the fact that I wanted this to be an option in general for the script, is why the configuration area of the above script has these options:



var restarea=6 //1) width of the "neutral" area in the center of the gallery in px
var maxspeed=7 //2) top scroll speed in pixels. Script auto creates a range from 0 to top speed.
var running=0 //3) Set to 1 for default scrolling onmouseout except for when gallery is already stopped.
var defaultspeed=2 //4) if running=1 set to default speed for mouseout scrolling.

If you set the 'running' variable to 1, it will scroll onload and onmouseout. Onmouseout scrolling will not resume if the most recent hover position of the mouse has stopped the scrolling.

pingeyeg
06-23-2006, 10:35 PM
I am not sure why this is happening, but for some reason when certain people run the script the slideshow will stop and then disappear. Why would this happen. It doesn't happen to everyone only to some people. Is there a fix for this?

Lenz
10-24-2007, 07:56 PM
Excuse my English, this translated to google.
I was reading the list of messages, but I failed to function "CMontion" in Firefox.
The gallery is functioning properly, but it opens the console errors by clicking on each image.

I hope I can help.

Link to site.

http://www.susanacoletti.com.ar/coleccion.htm

jscheuer1
10-24-2007, 08:48 PM
Excuse my English, this translated to google.
I was reading the list of messages, but I failed to function "CMontion" in Firefox.
The gallery is functioning properly, but it opens the console errors by clicking on each image.

I hope I can help.

Link to site.

http://www.susanacoletti.com.ar/coleccion.htm

FF error console with strict reporting on:


Warning: deprecated arguments usage
Source File: http://www.susanacoletti.com.ar/layers.html
Line: 299

relevant code:


<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
var ant;
ant = -1;
function MM_showHideLayers() { //v6.0

//Layer0.style.visibility = "hide" ;

var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
if (ant!=-1)
{
ant.visibility='hidden';
}
ant = obj;

}

There are other errors. The entire script block is antiquated, as are others on the page. There are also repetitive functions. None of this has to do with the DD script.

If you are lucky, changing:

var i,p,v,obj,args=MM_showHideLayers.arguments;

to:

var i,p,v,obj,args=arguments;

will take care of it

Lenz
10-25-2007, 12:39 PM
The code is armo another person, so that version will not be used.
Today I am going to test the changes you suggest me.

Thanks very much

transcribe
07-21-2011, 10:58 AM
All the posts here a slightly old but I try:

I've used the Cmotion continuous in a page I'm building and it's cool.
My only problem (beside my non-pro coding) is that in IE the Cmotion and the Omni Slide Menu script I'm using are very saccaded and slow.

This doesn't occur in Safary of Firefox.
I'm wondering if anyone here including jscheuer1 would be able to fix this.

I've looked into getting the right Doctype, and so far the "xhtml1-transitional.dtd" seem to do it better than the "html4/loose.dtd"... but maybe there is a better one to use.

thanks in advance...

transcribe
07-21-2011, 11:03 AM
sorry here is the link to the page I'm talking about :
http://www.louiseleconte.com/page2.html

jscheuer1
07-22-2011, 12:41 AM
Actually there's no DOCTYPE on the page with the cMotion script. And, if viewed on its own in any browser, it acts oddly. I'm talking about the /content/reviewslouise.html page. Once it gets going it's OK. But at first it either jumps or overlaps itself.

Perhaps if you fixed it, you would have better luck with it. I may do more testing when I have more time.

Also, if you remove the absolutely positioned container for the iframe (on index2.html):


<div style="position:absolute;left:520px;top:50px">
<iframe src="http://www.louiseleconte.com/content/reviewslouise.html" style="border-width:0px; border-style:solid; border-color:#E0DBD3;" width="1200" height="650px">
<p>If you can see this, your browser doesn't understand IFRAME. You need them to visit this website... we are sorry. Try from another computer.</p>
</iframe>
</div>

Well that messes up the layout, but fixes the problem of the cmotion being slow in IE.