sequentially show/hide divs? [Archive]

coothead

07-12-2005, 10:59 AM

Hi there trooperbill,

try this very simple script, it may give you some ideas.:)
<!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