Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Revealing hidden layers in sequence with time delay

    Hi,

    I have an image built up of multiple CSS layers:

    .....
    #layer32 { position: absolute; top: 0px; left: 0px; visibility: visible }
    #layer34 { position: absolute; top: 0px; left: 0px; visibility: visible }
    #layer35 { position: absolute; top: 0px; left: 0px; visibility: visible }
    ....

    then later:

    .....
    <span id="layer32"><img src="myimage32.gif"></span>
    <span id="layer34"><img src="myimage34.gif"></span>
    <span id="layer35"><img src="myimage35.gif"></span>
    .....

    The layers are generated via a perl script reading user input. Right now all the layers are set as visible upon loading. I would like to set it up so that the layers load hidden and then one by one become visible with a brief time delay between layers until all layers are visible. Thanks for any suggestions.

    Dan

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    this will show each layer every 2 seconds.

    <head>
    <style type="text/css">
    #layer32 { position: absolute; top: 0px; left: 0px; visibility: hidden }
    #layer34 { position: absolute; top: 0px; left: 0px; visibility: hidden }
    #layer35 { position: absolute; top: 0px; left: 0px; visibility: hidden }
    </style>
    <script type="text/javascript">

    function showLayers(){
    var delay = 2000; //2 secs
    setTimeout("document.getElementById('layer32').style.visibility='visible'",delay);
    setTimeout("document.getElementById('layer34').style.visibility='visible'",delay*2);
    setTimeout("document.getElementById('layer35').style.visibility='visible'",delay*3);
    }
    </script>
    </head>
    <body onload="showLayers()">
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New to the CF scene
    Join Date
    Sep 2003
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Worked great! Thank you.

    Dan


  •  

    Posting Permissions

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