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
    Jul 2005
    Location
    Leeds
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    sequentially show/hide divs?

    I have 7 divs that i want to flip through link a slideshow, anyone know a script that will show/hide a set of divs (with unique id's) based on a 4 second pause between shows?

    mark
    web design leeds - Award winning strategic web design and marketing

    web design blog - My web design blog

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,736
    Thanks
    0
    Thanked 241 Times in 236 Posts
    Hi there trooperbill,

    try this very simple script, it may give you some ideas.
    Code:
    <!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>div rotation</title>
    
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
    <meta name="Content-Script-Type" content="text/javascript"/>
    <meta name="Content-Style-Type" content="text/css"/>
    
    <style type="text/css">
    /*<![CDATA[*/
    div {
         display:none;
         width:324px;
         height:200px;
         line-height:200px;
         font-family:verdana,arial,helvetica,sans-serif;
         font-size:16px;
         text-align:center;
         border:3px double #000;
         position:absolute;
     }
    #div1 {
         left:10px;
         top:10px;
     }
    #div2 {
         left:340px;
         top:40px;
         border-color:#f00;
         color:#f00;
     }
    #div3 {
         left:70px;
         top:70px;
         border-color:#0f0;
         color:#0f0;
     }
    #div4 {
         left:200px;
         top:100px;
         border-color:#00f;
         color:#00f;
     }
    #div5 {
         left:130px;
         top:230px;
         border-color:#660;
         color:#660;
     }
    #div6 {
         left:260px;
         top:160px;
         border-color:#066;
         color:#066;
     }
    #div7 {
         left:190px;
         top:290px;
         border-color:#606;
         color:#606;
     }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    
      var num=0;
      var time=4000;
    
    function showHideDivs() {
       num++;
    if(num>7) {
       num=1;
     }
       document.getElementById('div'+num).style.display="block";
    setTimeout("document.getElementById('div'+num).style.display='none';showHideDivs()",time);
    }
    onload=showHideDivs;
    //]]>
    </script>
    
    </head>
    <body>
    
    <div id="div1">this is div number one</div>
    <div id="div2">this is div number two</div>
    <div id="div3">this is div number three</div>
    <div id="div4">this is div number four</div>
    <div id="div5">this is div number five</div>
    <div id="div6">this is div number six</div>
    <div id="div7">this is div number seven</div>
    
    </body>
    </html>
    coothead

  • #3
    New to the CF scene
    Join Date
    Jul 2005
    Location
    Leeds
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    supercool - thanks!

    mark
    web design leeds - Award winning strategic web design and marketing

    web design blog - My web design blog


  •  

    Posting Permissions

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