SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Javascript animation problem
-
Apr 16, 2009, 13:23 #1
- Join Date
- Dec 2008
- Location
- Virtual Globe Trotter
- Posts
- 18
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Javascript animation problem
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.
Code HTML4Strict:<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:-
Code JavaScript: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:
Code JavaScript: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?
-
Apr 16, 2009, 15:26 #2
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
The following is useless
Code javascript:setTimeout(slideScroll(imgobj,dist),500)
Code javascript:setTimeout(undefined,500)
Instead, you want to give setTimeout a function that already knows about imgobj and dist.
Code javascript: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:
Code javascript:setTimeout(function (imgobj, dist) { return function() { slideScroll(imgobj,dist); }; }, 500);
Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Apr 17, 2009, 01:46 #3
- Join Date
- Dec 2008
- Location
- Virtual Globe Trotter
- Posts
- 18
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Cool...that worked!!
I noticed that when i write my code:
Code JavaScript: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); }
Bookmarks