Javascript animation problem

[fenderplayer]

Hi,

I am trying to make a kind of images slider where a div (class 'wrapper' in the code below) contains several nested divs (class 'slide') each containing different images.

<div class="wrapper">
   <div class="slide">
	<img src="img1.gif" />
   </div>
   <div class="slide">
	<img src="img2.gif" />
   </div>
...
    <div class="slide">
	<img src="img9.gif" />
    </div>
</div>

At one time only three images are seen because 'wrapper' has a fixed height and overflow property as hidden. I want to cycle through the images within the 'wrapper' div continuously. I was able to achieve this using the following js code:-

function Slide(){
	var imgclassname = "slide";
	var imgarr = getElementsByClass(imgclassname);  //get all nodes of class 'slide' into 'imgarr'
	var pnode = imgarr[0].parentNode; //this is class 'wrapper' node
	var clone = imgarr[0].cloneNode(true);
	document.all == "undefined"?imgarr[0].style.marginTop="-60px":imgarr[0].style.cssText="margin-top:-60px";
	pnode.removeChild(imgarr[0]); //remove the first 'slide' div
	pnode.appendChild(clone); //place the first 'slide' div at the bottom
	setTimeout(Slide,4000);
}

The effect that i am looking for is a gradual slide of the images, like a scrolling effect, instead of the abrupt change in the image list. I tried by replacing the line where the margin-top value is changed directly to -60px with a function where the final margin-top value is reached gradually in decrements of -10px. The faulty code i used:

var timer = 0;
function slideScroll(imgobj,dist){
	while(dist < 70){
		dist = dist + 10;
		document.all == "undefined"?imgobj.style.marginTop="-"+dist+"px":imgobj.style.cssText="margin-top:-"+dist+"px";
		timer = setTimeout(slideScroll(imgobj,dist),500);
	}
	clearTimeout(timer);
}
 
function Slide(){
	var imgclassname = "slide";
	var imgarr = getElementsByClass(imgclassname);  //get all nodes of class 'slide' into 'imgarr'
	var pnode = imgarr[0].parentNode; //this is class 'wrapper' node
	var clone = imgarr[0].cloneNode(true);
      slideScroll(imgarr[0],0);
	//document.all == "undefined"?imgarr[0].style.marginTop="-60px":imgarr[0].style.cssText="margin-top:-60px";
	pnode.removeChild(imgarr[0]); //remove the first 'slide' div
	pnode.appendChild(clone); //place the first 'slide' div at the bottom
	setTimeout(Slide,4000);
}

I get the "useless settimeout" message on firebug. I am not sure how to go about implementing this.

Any suggestions?

[paul_wilkins]

The following is useless

setTimeout(slideScroll(imgobj,dist),500)

because the function that you're running returns undefined, so when the timeout is being setup and the function is invoked, it thus becomes

setTimeout(undefined,500)

which is useless

Instead, you want to give setTimeout a function that already knows about imgobj and dist.

function (imgobj, dist) {
    return function() {
       ...
    }
}(imgobj, dist);

When the outer function is called, the inner function that is returned will automatically know about the passed variables

So here's what you need to do:

setTimeout(function (imgobj, dist) {
    return function() {
        slideScroll(imgobj,dist);
    };
}, 500);

[fenderplayer]

Cool...that worked!!

I noticed that when i write my code:

var timer = 0;
function slideScroll(imgobj,dist){
    while(dist < 70){
        dist = dist + 10;
        document.all == "undefined"?imgobj.style.marginTop="-"+dist+"px":imgobj.style.cssText="margin-top:-"+dist+"px";
        timer = setTimeout(slideScroll(imgobj,dist),500);
    }
    clearTimeout(timer);
}

Firebug shows imgobj and dist values being passed but timer value is still 0. Its never set. Whats the difference here (if its not difficult to explain)?