SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    yellowfade technique using setTimeout problems

    Hello, I've got a problem with using the yellowfade technique with javascript.

    I got a stylesheet with seven classes, each another shade of yellow. The javascript has a for loop that iterates trough all of them. That works just fine, but as soon as I add the timeout it stops working.

    Here is my original code:
    Code:
    var interval = 600;
    
    function _yellowFade (elementId) {
    	for (var i = 1; i <= 7; i++) {
    		setTimeout(document.getElementById(elementId).className = "yellowfade_" + i, interval);
    	}
    }
    I appreciate any help, there's a download with demo files below (very small, just a couple of lines). Maybe that makes the problem more clear.

    Download: http://test.concept7.nl/yellowfade.zip

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var interval = 600;
    
    function _yellowFade(elementId)
    {
    	for (var i=0; i < 7; i++)
    	{
    		window.setTimeout(function()
    		{
    			document.getElementById(elementId).className = "yellowfade_" + i, interval;
    		}, interval);
    	}
    }

  3. #3
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria
    Code:
    var interval = 600;
    
    function _yellowFade(elementId)
    {
    	for (var i=0; i < 7; i++)
    	{
    		window.setTimeout(function()
    		{
    			document.getElementById(elementId).className = "yellowfade_" + i, interval;
    		}, interval);
    	}
    }
    A late reaction but I still can't get it too work. This is my current version of the javascript file. The rest is still the same.

    Code:
    var interval = 600;
    
    function yellowFade (elementId) {
    	for (var i = 0; i < 7; i++)	{
    		window.setTimeout (function () { document.getElementById(elementId).className = "yellowfade_" + i, 600; }, 600);
    	}
    }

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    var interval = 600;
    
    function yellowFade (elementId) {
    	for (var i = 0; i < 7; i++)	{
    		window.setTimeout (function () { document.getElementById(elementId).className = "yellowfade_" + i; }, interval);
    	}
    }

  5. #5
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria
    Code:
    var interval = 600;
    
    function yellowFade (elementId) {
    	for (var i = 0; i < 7; i++)	{
    		window.setTimeout (function () { document.getElementById(elementId).className = "yellowfade_" + i; }, interval);
    	}
    }
    In what browser have you tested this? If tested...

    Anyhow, it doesn't work. But it won't generate errors either it's perfectly valid javascript code.

    It just runs, and after a whill it loads the class 'yellowfade6' and that's it. The classes in between don't work. Longer intervals isn't helping...

  6. #6
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just figured out something else.

    If the interval is set to 600, then it only runs 600 milliseconds instead of 600 * 7 = 4200 milliseconds.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a quick idea. I haven't tested it.
    Code:
    var interval = 600;
    
    function _yellowFade(elementId, classNum)
    {
      classNum = classNum || 0;
      if (classNum < 7) {
        setTimeout("_yellowFade('" + elementId + "'," + (classNum + 1) + ")", interval);
      }
      document.getElementById(elementId).className = "yellowfade_" + classNum;
    }

  8. #8
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So you want the interval to increase each time with 600 millisecons?

  9. #9
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not the problem was that it only ran for 600 milleseconds. It did only run the for loop once. Mike's example is working though. I only need some modification with me classes and interval variable to make it look smooth.

    Thanks a lot.


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
  •