Results 1 to 5 of 5

Thread: Tab Content Script -> Get it to cycle through tabs

  1. #1
    Join Date
    Dec 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Tab Content Script -> Get it to cycle through tabs

    1) Script Title: Tab Content Script
    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    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/dynamici...tentslider.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.
    Last edited by jscheuer1; 12-19-2006 at 10:50 PM. Reason: add info
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,127
    Thanks
    44
    Thanked 3,228 Times in 3,189 Posts
    Blog Entries
    12

    Default

    Yeah, easier than I thought with that new functionality added. Just put this after the script call:

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

    Code:
    setInterval("slidetabs('maintab')", 1000*60);
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Aug 2004
    Posts
    9,910
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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:

    Code:
    var cyclevar=setInterval("slidetabs('maintab')", 5000);
    The code in red is the change. Then, inside the HTML for the tabs:

    Code:
    <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>
    "
    "

  5. #5
    Join Date
    Dec 2006
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    cheers guys,

    this is great.

    Sam

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •