Tutorial :jQuery tabs modify to auto scroll



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
Previous
Next Post »