SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adapting this slider js to use variables?

    As part of an attempt to revisit my imagination (before it was dissolved into a glass of accessibility-flavoured low-juice) I'm playing around with slidey things again.

    I'm v rusty so need some help…

    I'm trying to adapt the following slider method/script to be able to accept the id of the div to slide as a variable passed via the function call i.e. slideUp(divID)

    Code:
    var slideUp = new Array(-200,-184,-170,-154,-137,-119,-101,-84,-68,-53,-41,-29,-20,-12,-5,-0,3,5,6,6,5,4,0,0);
    var slideDown = new Array(-200,-200,-204,-205,-205,-205,-204,-202,-198,-195,-190,-185,-177,-169,-158,-145,-130,-113,-94,-75,-55,-35,-17,0);
    	
    var pathIndex = 0; 
    var moveID = null;
    	
    delay = 5;
    
    function lookUp() {
    
    	clearTimeout(moveID);
    
    	var yPos = slideUp[pathIndex];
    	pathIndex+=1;
    	document.getElementById('moveInner').style.top = yPos + "px";
    
    	if(pathIndex < slideUp.length-1) {
    		moveID = setTimeout("lookUp()",delay);
    	}
    }
    
    function lookDown() {
    	clearTimeout(moveID);
    
    	var yPos = slideDown[pathIndex];
    	pathIndex-=1;
    	document.getElementById('moveInner').style.top = yPos + "px";
    
    	if (pathIndex > 0) {
    		moveID = setTimeout("lookDown()",delay);
    	}
    }
    ( fr/ Dan Steinman's DuoPath as spotted at NewsToday Bookshelf)

    I've tried the methods I would normally use to use variables in functions, but the script fails to create a slide effect - moving only a step for each click.
    This presumably points to a failure somewhere in the setTimeout portion.

    Code:
    function lookDown(divID) {
    	clearTimeout(moveID);
    
    	var yPos = slideDown[pathIndex];
    	pathIndex-=1;
    	document.getElementById(divID).style.top = yPos + "px";
    
    	if (pathIndex > 0) {
    		moveID = setTimeout("lookDown(divID)",delay);
    	}
    }
    
    …
    
    <div id="moveInner">
    …
    
    <a href="…" onclick="lookDown('moveInner');…">Info</a>
    How do I get the script to function correctly when passing the div id to it as a variable?
    Where am I going wrong?
    It's probably something simple that I'm overlooking, but as said, I'm v rusty.

    Many thanks in advance.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK:
    Code:
    moveID = setTimeout("lookDown('"+divID+"')",delay);
    Better:
    Code:
    moveID = setTimeout(function(){lookDown(divID);},delay);
    ::: certified wild guess :::

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks to you, matey.

    Incidentally, the "OK" method worked fine in both MSIE5/Mac and Safari, whereas the "Better" method failed in both.
    Last edited by Bill Posters; Mar 19, 2004 at 04:56.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bill...thanks! I knew using a callback wasn't supported in some older browsers, but not about the mac angle you experienced. Found this. Analyzing (you know, like, reading) it. I'll revive this thread if there's something to contribute.

    adios
    ::: certified wild guess :::


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
  •