Control.Tabs Automatic Cycling Possible?

Again, thanks to Ryan for these incredibly useful scripts.

My question: is it possible to let the tabs automatically cycle through (looping back to the first tab when the end is reached), every couple of seconds?

Something similar to this: http://stickmanlabs.com/crossfader/

Except, when you click a tab's link, it would just take you back to that particular tab and pause it there?

If this is possible, can somebody show a code example of how to enable it? Thanks!

Posted September 13th, 2007 at 8:00pm by Joseph

This isn't a built in feature, but you might be able do it using the delay functions in javascript:

// assume Control.Tab object reference stored in var 'tabs'
function cycleTab() {
  // anything else you may need to do here (eg fade out)
  tabs.next(); // not sure if this wraps when the last tab is reached?
  // anything else you may need to do here (eg fade in)
}
var cycleId = 0;
Event.observe(window, 'load', function() {
  cycleId = setInterval("cycleTab()", 5000); 
});

You could also add a courtesy button to stop the automatic cycling by then calling:

  clearInterval(cycleId);

In case anyone gets sick and needs to get off :)

Let me know how you get on!

Ben

Posted September 14th, 2007 at 4:19am by bbodien

Ben, thanks for the help. Unfortunately it doesn't seem to be working. Here's what I tried (using the source from Ryan's main control.tabs page at http://livepipe.net/projects/control_tabs):

new Control.Tabs('tabs_example_one');
function cycleTab() {  
  tabs_example_one.next(); // not sure if this wraps when the last tab is reached?  
}  
var cycleId = 0;  
Event.observe(window, 'load', function() {  
  cycleId = setInterval("cycleTab()", 5000);   
});  

Any ideas? Thanks!

Posted September 14th, 2007 at 2:17pm by Joseph

Hi Joseph,

the next() function needs to be called your tab object. In your code there, you've instantiated the tab object, but haven't stored a reference to it. 'tabsexampleone' is just the id of the ul element that will form the structure of your tabs - it can't be used therefore in the way you've shown, as it's not an object itself, just an id.

Instead, try this out:

var myTabs = new Control.Tabs('tabs_example_one'); // storing a ref to the new object
function cycleTab() {
  myTabs.next(); // calling next on the object
}
var cycleId = 0;
Event.observe(window, 'load', function() {
  cycleId = setInterval("cycleTab()", 5000);
});

Ben

Posted September 15th, 2007 at 11:48am by bbodien