PDA

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



Splashbrooke
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

jscheuer1
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:

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

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.

jscheuer1
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.
initializetabcontent("maintab")

function slidetabs(tabgroup){
var tabcount=0, stab=0;
for (var i_tem = 0; i_tem < document.getElementById(tabgroup).getElementsByTagName('li').length; i_tem++){
if(document.getElementById(tabgroup).getElementsByTagName('li')[i_tem].getElementsByTagName('a')[0].rel)
tabcount++;
if(document.getElementById(tabgroup).getElementsByTagName('li')[i_tem].className=='selected')
stab=i_tem;
}
stab=stab+1<tabcount? stab+1 : 0;
expandtab(tabgroup, stab);
}
if(document.getElementsByTagName)
setInterval("slidetabs('maintab')", 5000);
</script>

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


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

ddadmin
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>
"
"

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

this is great.

Sam