View Full Version : Tab Content Script -> Get it to cycle through tabs

12-19-2006, 06:10 PM
1) Script Title: Tab Content Script
2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem: Hey guys, Could anyone tell me how I can (and if it is actually do-able) set the tab content script so that the tab changes from 1 -> 2 ->3 etc every, say minute, - Can this be done?
I've seen it elsewhere but i'm unsure if they were using the same type of system.

Does anyone have any idea?

Thank you very much for replies :) - it is really appreciated

12-19-2006, 10:47 PM
That can be done. It would be a bit of a project and requires a fair amount of javascript knowledge. This script has all the capabilities of that script and more and also will act as a slide show:


It just looks a little different and is different to set up. The speed can easily be slowed down to a 1 minute interval.

Added later:

This could be easier than I thought as the script you want already has (newly added) a way to switch tabs 'manually' via a link.

12-19-2006, 11:30 PM
Yeah, easier than I thought with that new functionality added. Just put this after the script call:

<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.

function slidetabs(tabgroup){
var tabcount=0, stab=0;
for (var i_tem = 0; i_tem < document.getElementById(tabgroup).getElementsByTagName('li').length; i_tem++){
stab=stab+1<tabcount? stab+1 : 0;
expandtab(tabgroup, stab);
setInterval("slidetabs('maintab')", 5000);

The 5000 at the end will make it every 5 seconds, for every minute, use:

setInterval("slidetabs('maintab')", 1000*60);

12-20-2006, 02:11 AM
Nice! And if you want the tabs to stop cycling once a user clicks on a tab, you can modify John's code at the very end:

var cyclevar=setInterval("slidetabs('maintab')", 5000);

The code in red is the change. Then, inside the HTML for the tabs:

<ul id="maintab" class="shadetabs" onClick="if (typeof cyclevar!='undefined') clearInterval(cyclevar)" >
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>

01-02-2007, 06:12 PM
cheers guys,

this is great.