Site icon StartFunction

Creating Rotating Tabs using jQuery

Some time ago I wrote an article about creating some tabs using jQuery, the Javascript library. One of the readers asked if I could devise a way to “add a code that will automatically and continuosly go to the next tab even without clicking on the tabs?”. Well, here it is. In addition to the rotating tabs, we also need to take care of the behaviour when the user actually clicks on a tab by stopping the cycling behaviour on the desired tab. Finally, we will also highlight the selected tab both in the cycling mode and when the user clicks on a tab.

There’s a new version of this article: Multiple Rotating jQuery Tabs. featuring automatic rotation of the tabs, highlighting of the selected tab title and supports multiple tab panels.

You might want to have a look at the rotating jQuery tabs first. Every second, the current tab fades out and the next one fades in. Click on a tab title and it will display that tab stopping the cycling. After initializing some variables, we will define one function that will be used for changing the tabs and highlight the title. This function will be called by the CLICK event and also from the cycling or rotating system. For the selection, I used a technique from a previous article about jQuery selection and revealing. Whenever a new tab is displayed, we will remove the .select class from the other tabs and apply to to the current one, thus highlighting the title of the current tab.

[js]
//array to store IDs of our tabs
var tabs = [];
//index for array
var ind = 0;
//store setInterval reference
var inter;

//change tab and highlight current tab title
function change(stringref){
//hide the other tabs
jQuery(‘.tab:not(#’ + stringref + ‘)’).hide();
//show proper tab, catch IE6 bug
if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0")
jQuery(‘.tab#’ + stringref).show();
else
jQuery(‘.tab#’ + stringref).fadeIn();
//clear highlight from previous tab title
jQuery(‘.htabs a:not(#’ + stringref + ‘t)’).removeClass(‘select’);
//highlight current tab title
jQuery(‘.htabs a[href=#’ + stringref + ‘]’).addClass(‘select’);
}
[/js]

The next function will be called at a regular interval and it’s what will fade out the previous tab and fade in the next tab.

[js]
function next(){
//call change to display next tab
change(tabs[ind++]);
//if it’s the last tab, clear the index
if(ind >= tabs.length)
ind = 0;
}
[/js]

Now, the following block is the first thing that will be executed when the page is ready. We need to store a reference to all of our tabs in an array to iterate it. We will use the map function from jQuery to walk through the elements: each time we found a new element, we will store its reference into an array. After the map iteration, the ind variable, the array index, is set to 1 so when change is called, the number used will be 1, thus displaying the next tab. If it was 0 the next element displayed would have been the same tab.

[js]
jQuery(document).ready(function(){
//store all tabs in array
jQuery(‘.tab’).map(function(){
tabs[ind++] = jQuery(this).attr(‘id’);
})
//set index to next element to fade
ind = 1;
//initialize tabs, display the current tab
jQuery(‘.tab:not(:first)’).hide();
jQuery(‘.tab:first’).show();
//highlight the current tab title
jQuery(‘#’ + tabs[0] + ‘t’).addClass(‘select’);
[/js]

The following snippet contains the behavioural logic. If we click on a tab title, we will clear the rotating behaviour by clearing the reference to the interval we have defined, inter (this is defined in the last lines of the code). We will store the reference in a variable stringref and call change. The last two lines set the next function to be repeated at an interval of 1000 (merely for testing purposes), which is one second, so if you want to rotate the tabs every 4 seconds you should add 4000. The setInterval function returns a reference that we will be storing and is the one we used to clear the interval when the user clicks on a tab.

[js]
//handler for clicking on tabs
jQuery(‘.htabs a’).click(function(){
//if tab is clicked, stop rotating
clearInterval(inter); //store reference to clicked tab
stringref = jQuery(this).attr(‘href’).split(‘#’)[1];
//display referenced tab
change(stringref);
return false;
});
//start rotating tabs
inter = setInterval(‘next()’, 1000);
});
[/js]

As you can see in the example  for the tabs, the XHTML structure is made of simple lists with their matching IDs to be captured by the JavaScript. Make sure your CSS contains the proper .select class definition. The markup is the same than the previous jQuery tabs article, and just like it, the css is not an integral part of it. Despite the fact that we need the .select class to highlight the tab, we could have just applied an style attribute. Finally, if you don’t want tabs to rotate, just remove the setInterval sentence. Remove also the next function and clearInterval. You are welcome to download the code below but also take a look at the updated version:

Exit mobile version