Hi Friends,
I thought to share simple things more frequently and occasionally post more detail findings (since we are on war to fight with time :) )
If your div structure is below:
<body onload="javascript:TabInterval();">
<div id="div1">
<p>This is Div 1</p>
</div>
<div id="div2" style="display: none;">
<p>This is Div 2</p>
</div>
<div id="div3" style="display: none;">
<p>This is Div 3</p>
</div>
</body>
We can simply rotate these divs using .show() and .hide() methods
So, Try with below jQuery script
<script type="text/javascript">
//starting point for the rotation, after initially load div 1
var startRootDiv = 2;
function rotateAllDivs() {
if (startRootDiv == 2) {
$("#tab1").hide();
$("#tab2").show();
startRootDiv = 3;
}
else if (startRootDiv == 3) {
$("#tab2").hide();
$("#tab3").show();
startRootDiv = 1;
}
else {
$("#tab1").show();
$("#tab3").hide();
startRootDiv = 2;
}
}
function TabInterval() {
setInterval(rotateAllDivs, 5000);
};
</script>
This div tabbing configured to run with a time interval of 5 seconds.
Happy simple coding :)
Buddike
No comments:
Post a Comment