SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool looped and timed javascipt fade of multiple div's in order

    Hi,
    I've found this great script but I was unable to change it to fit my needs. What this script does is it fades the box to opacity .3 on click of the btn and back to 1.0 when click again. What I need is for 4 or 5 divs to fade one after the other as soon as the page loads. So no more "go" button, all images are set to an initial opacity of .3 and one after the other they go to 1.0, stay there for 3 seconds, then go back to .3.

    Here's the script I found.
    Thanks in advance for the help.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="texthtml;charset=utf-8" />
    <script type="text/javascript">
    var TimeToFade = 1000.0;

    function fade(eid)
    {
    var element = document.getElementById(eid);
    if(element == null)
    return;

    if(element.FadeState == null)
    {
    if(element.style.opacity == null
    || element.style.opacity == ''
    || element.style.opacity == '1')
    {
    element.FadeState = 2;
    }
    else
    {
    element.FadeState = -2;
    }
    }

    if(element.FadeState == 1 || element.FadeState == -1)
    {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
    }
    else
    {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
    }
    }


    function animateFade(lastTick, eid)
    {
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(eid);

    if(element.FadeTimeLeft <= elapsedTicks)
    {
    element.style.opacity = element.FadeState == 1 ? '1' : '0.3';
    element.style.filter = 'alpha(opacity = '
    + (element.FadeState == 1 ? '100' : '30') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
    }

    element.FadeTimeLeft -= elapsedTicks;
    var newOpVal = element.FadeTimeLeft/TimeToFade;
    if(element.FadeState == 1)
    newOpVal = 1 - newOpVal;

    newOpVal = newOpVal/2 + 0.3;
    element.style.opacity = newOpVal;
    element.style.filter =
    'alpha(opacity = ' + (newOpVal*100) + ')';

    setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
    }



    </script>

    </head>
    <body onload="fade('fadeBlock');">

    <div id="fadeBlock" style="background-color:Lime;width:250px;
    height:65px;text-align:center;">
    <br />
    I'm Some Text
    </div>
    <br />
    <br />
    <input type="button" onclick="fade('fadeBlock');" value="Go" />

    </body>
    </html>

  2. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here is a script that does what you want. It is not your original script, but it works in all browsers. You can change the dwell times at the top of the script.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Fade divs</title>
    <script type="text/javascript">
    <!--
    // opacity value is 0-1 for non-IE and 0-100 for IE
     var count=0, tOut=null, stepF=2, fadeTop=100, fadeBot=30, final=false, aPause=1000, fadePause=50; // global 
    //
     function startChange()
      {  clearTimeout(tOut);
         ++count;
         if(count >=((fadeTop-fadeBot)/stepF)+1)
          { if(final==false)
              { // after increasing opacity, now decrease after 3sec
                   increasing=false; count=0; final=true;
                   tOut=setTimeout(startChange,aPause)     // wait 3 sec
                   return; 
              } 
            else
              { // move to next div
                  ++currentDivRef;
                  if(currentDivRef<allTopDivs.length)
                    { increasing=true; currentOpacity=fadeBot; count=0; final=false;
                      tOut=setTimeout(startChange,aPause);
                    }  
                   return;           
                } 
           }       
             // change opacity of target div
               currentOpacity=(increasing==true)? currentOpacity+stepF : currentOpacity-stepF;           
               if(increasing==true)
                 { currentOpacity=(currentOpacity >=fadeTop)?fadeTop : currentOpacity; }
               else
                 { currentOpacity=(currentOpacity <=fadeBot)?fadeBot : currentOpacity; }
                   if(isIE==true)
                    { allTopDivs[currentDivRef].style.filter = 'alpha(opacity='+currentOpacity+')'; }  // IE opacity value reqd is 0-100
                   else 
                     { allTopDivs[currentDivRef].style.opacity = currentOpacity/100;  }    // not IE  opacity value reqd is 0-1
                //     
                   tOut=setTimeout(startChange,fadePause)           
      }   
    // ------------------ end of startChange() -------------------------------------
    //
    var allTopDivs=new Array(), isIE=false, currentDivRef, currentOpacity, increasing; // global
    window.onload=function(){
     // get div object refs
       var allDivs=document.getElementsByTagName("div");
       var i;
      // collect divs with class topDivs 
       for(i=0;i<allDivs.length;i++)
        { if(allDivs[i].className=="topDivs"){ allTopDivs[allTopDivs.length]=allDivs[i]; }  
         }         
    // check for user agent type. IE first
       if(typeof allTopDivs[0].style.opacity=="undefined" && navigator.userAgent.indexOf("MSIE")!= -1)      // check for IE  
         { // IE opacity value reqd is 0-100
         // set initial opacity for all divs
          for(i=0;i<allTopDivs.length;i++){ allTopDivs[i].style.filter = 'alpha(opacity=30)'; }    // visible 30%
          isIE=true;                                       // flag IE as browser
         }
        else if(typeof allTopDivs[0].style.opacity=="string" && navigator.userAgent.indexOf("MSIE")== -1)    // check for not IE
         { // not IE  opacity value reqd is 0.0-1.0
          // set initial opacity for both divs
           for(i=0;i<allTopDivs.length;i++){ allTopDivs[i].style.opacity = 0.3; }    // visible 30%
           isIE=false;                                   // flag IE is not browser
         }
      // start opacity change for first div. currentDivRef is index value in allTopDivs array 
        currentDivRef=0;  
      // use IE method and change later  
        currentOpacity=30; 
      // start by increasing opacity   
        increasing=true;
      // start timeout  
        tOut=setTimeout(startChange,aPause)
     }
    //-->
    </script>
    <style type="text/css">
    <!--
    .topDivs { float:left; margin:5px ; width:100px; height:100px; border:2px solid #000; } 
    #d1 { background-color:#F00; }
    #d2 { background-color:#0F0; }
    #d3 { background-color:#00F; }
    #d4 { background-color:#FF0; }
    #d5 { background-color:#F0F; }
     
    -->
    </style>
    </head>
     
    <body>
     
    <div id="d1" class="topDivs">
    </div>
    <div id="d2" class="topDivs">
    </div>
    <div id="d3" class="topDivs">
    </div>
    <div id="d4" class="topDivs">
    </div>
    <div id="d5" class="topDivs">
    </div>
     
    </body>
     
    </html>


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
  •