sequentially show/hide divs?

trooperbill · 07-12-2005, 09:38 AM

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

coothead · 07-12-2005, 10:59 AM

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

trooperbill · 07-12-2005, 11:32 AM

supercool - thanks!

mark