| View previous topic :: View next topic |
| Author |
Message |
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 614
Location: Cebu City Philippines
|
 Posted: Wed Apr 23, 2008 6:31 am Post subject: Switch Divs |
 |
|
Can we switch from one divs to another divs automatically?.. 
...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>
|
|
|
| Back to top |
|
 |
|
|
DDragon
50+ Club
Joined: 20 Jun 2007
Posts: 90
Location: Australia
|
| Posted: Sat Aug 23, 2008 10:03 am Post subject: Re: Switch Divs |
|
|
This has a wide range of applications great work.
DD |
|
| Back to top |
|
|
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 614
Location: Cebu City Philippines
|
| Posted: Sat Aug 23, 2008 10:39 am Post subject: Re: Switch Divs |
|
|
| Thank you. |
|
| Back to top |
|
|
|
