SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    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?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The following is useless
    Code javascript:
    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
    Code javascript:
    setTimeout(undefined,500)
    which is useless

    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

  3. #3
    SitePoint Member
    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);
    }
    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)?


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •