Question:
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
Solution:1
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
Solution:2
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); Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
EmoticonEmoticon