jQuery tabs modify to auto scroll

Question

Hi, I used the following tutorial to create a featured content slider for my homepage - http://www.queness.com/post/274/jquery-sliding-tab-menu-for-sidebar-tutorial

What I was wondering though, how would I go about modifying the code to auto scroll to the next tab after x amount of seconds? I assume I would need to setInterval and trigger something inside that function, but I can't quite figure it out.

Any help would be much appreciated! Thanks

Answer 1

There's a function defined for each click handler on that page:

$('a[rel=panel]').click(function () {

    //Get the height of the sub-panel
    var panelheight = $($(this).attr('href')).height();

    //Set class for the selected item
    $('a[rel=panel]').removeClass('selected');
    $(this).addClass('selected');

    //Resize the height
    $('#mask').animate({'height':panelheight},{queue:false, duration:500});         

    //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
    $('#mask').scrollTo($(this).attr('href'), 800);     

    //Discard the link default behavior
    return false;
});

So, the easiest way to trigger a certain tab would be (for the first panel) $("#panel-1 ").triggerHandler("click"); for each tab you want to scroll to.

This would do:

var amount = 1;
setInterval(function(){
    $("#panel-"+amount).triggerHandler("click");
    if(amount == 4)
        amount = 1;
}, 1000);

Answer 2

http://www.cssnewbie.com/example/tabbed-box/advanced.html

Answer 3

using that tuturial as the source, can

setInterval(function(){
    if ($('a.selected').next().length)
       $('a.selected').next().click();
    else 
       $('a[rel=panel]').first().click();
},2000);

demo