Switch Divs

Discussion in 'Web Development and Programming' started by rangana, Apr 23, 2008.

  1. rangana

    rangana Regular Member

    Joined:
    Apr 12, 2008
    Messages:
    106
    Likes Received:
    0
    Location:
    Cebu City Philippines
    Can we switch from one divs to another divs automatically?.. :roll:

    ...With JS, this could be possible, see this script :)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#wrap{width:304px;margin:20px auto;border:3px double #555;padding:10px;font-family:Arial;font-size:10pt;}
.mydiv{
width:300px;
height:200px;
border:1px solid #000000;
text-align:center;
}
#one{background:#eee;}
#two{background:#fc0;}
#three{background:#9c0;color:#222;}
#four{background:#96c;color:#fff;}
.show{
display:block;
}
.hidden{
display:none
}
</style>
<script type="text/javascript">
function rangSwitch(rang,pause)
{
var divs=document.getElementById('wrap').getElementsByTagName('div');
var iterate=0, obj;
while(obj=divs[iterate++])
{obj.style.display='none';}

divs[rang].style.display='block';
rang++;
rang==divs.length?rang=0:null;

setTimeout(function(){rangSwitch(rang,pause)},pause);
}
window.onload=function()
{
var pause=2000; //computer per miliseconds
setTimeout(function(){rangSwitch(1,pause)},pause);
}
</script>
</head>
<body>
<div id="wrap">
<div class="mydiv show" id="one"> First Div </div>
<div class="mydiv hidden" id="two"> Second Div </div>
<div class="mydiv hidden" id="three"> Third Div </div>
<div class="mydiv hidden" id="four"> Fourth Div </div>
</div>
</body>
</html>
     
    rangana, Apr 23, 2008
    #1
Similar Threads

  1. Divs Vs Tables

  2. How to call upon css(divs)

Loading...

Share This Page