Create A Tabbed Content Rotator Using jQuery

2009 May 7

by Raymond Selda

Today we are going to create a tabbed content rotator (not sure what to call it really) using everyone’s favorite Javascript framework, jQuery and an interface library called jQuery UI. This effect can be used effectively on your homepage to present customers with your products and services.

jQuery UI 1.6 – The User Interface Library for jQuery

Javascript is not really my cup of tea that’s why I use jQuery, a framework for easily interacting with Javascript. jQuery UI is a library built on top of jQuery which allows you to create interactions, full-featured widgets and animation effects. jQuery UI 1.6: The User Interface Library for jQuery, written by Dan Wellman, is a book that will give you a good foundation in learning jQuery UI.

jQuery UI 1.6: The User Interface Library for jQuery has in-depth explanations on each component; building from its default basic state into a more advanced state. Additionally, the book also looks at how components can be used in real world scenarios. This book is aimed at user interface designers and developers who need to learn how to implement jQuery UI quickly.

I also have a tutorial on coding up a professional menu in case rotating content with tabs is not your thing. You can view a working demo of this tutorial in case you’re curious and feel free to download the source files for reference.

Let us begin.

Build A Solid Structure – XHTML

We have our usual wrapper that wraps the rotator div which contains the tabs structured as a list and the content fragments that we’re going to rotate. We also reference jQuery and jQuery UI in the head section. The key point here are the class names ui-tabs-selected and ui-tabs-hide for the list and content fragments. Those class names are part responsible for rotating our content.

Updated: We just called ui.core.js and ui.tabs.js instead of using a customized code. Please check out the updates. Hope most of you will be able to use this one. Thanks.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Tabbed Content Rotator Using JQuery</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<script src="ui.tabs.js" type="text/javascript"></script>

<body>
<div id="wrapper">
	<div id="rotator">
		<!-- Tabs -->
	    <ul class="ui-tabs-nav">
	        <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><span>Maximize Profits</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><span>Flexible Technology</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><span>Practical Solutions</span></a></li>
	        <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><span>Customer Support</span></a></li>
	    </ul>

	    <!-- First Content -->
	    <div id="fragment-1" class="ui-tabs-panel" style="">
	        <h2>Maximize Profits</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
	    </div>

	    <!-- Second Content -->
	    <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
	        <h2>Flexible Technology</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
	    </div>

	    <!-- Third Content -->
	    <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
	        <h2>Practical Solutions</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
	    </div>

	    <!-- Fourth Content -->
	    <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
	        <h2>Customer Support</h2>
	        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam.</p>
	        <p><a class="btn_get_started" href="#">Get Started</a> <a class="btn_learn_more" href="#">Learn More</a></p>
	    </div>
	</div><!-- end rotator -->
</div><!-- end wrapper -->
</body>
</html>

Wrapper and Rotator Styles

After establishing our structure, we now design our rotator with some CSS. Assign a width and a couple of borders to our wrapper then center it. We then make some room for the tabs by adding a bottom padding to our rotator div.

/* Rotator Styles */
#wrapper {
	width:960px;
	border-top:3px solid #92a5bc;
	border-bottom:1px solid #92a5bc;
	margin:0 auto;
}

#rotator {
	background:#FFF;
	color:#000;
	position:relative;
	padding-bottom:2.6em;
	margin:0;
	font-size:16px;
}

Tab Styles

Basically we position the tabs below the content fragments and we display them horizontally. You’re also going to notice that we stacked up a few selectors (the list and the elements inside it) because each of them will share the same properties and values and we always strive to write optimized CSS.

/* Tabs */
ul.ui-tabs-nav, li.ui-tabs-nav-item, li.ui-tabs-nav-item a:link, li.ui-tabs-nav-item a:visited {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	line-height:1.3;
	text-decoration:none;
	font-size:100%;
	list-style:none;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
}

ul.ui-tabs-nav {
	position:absolute;
	bottom:0px;
	left:0;
	z-index:1;
	width:100%;
	background:#FFF url(images/uitabsbg.gif) repeat-x bottom right;
	border-top:1px solid #FFF;
}

Non-Selected Tab Styles

Assign our tabs some font and border styles. We also tile the same background image from the ul.ui-tabs-nav

/* Non-Selected Tabs */
li.ui-tabs-nav-item a:link,
li.ui-tabs-nav-item a:visited {
	font-size:.8em;
	font-weight:normal;
	color:#999;
	background:#FFF url(images/uitabsbg.gif) repeat-x bottom left;
	border-left:1px solid #FFF;
	border-right:1px solid #c5ced9;
}

Hovered Tab Styles

We give our tabs some padding and give the hover state a background graphic.

/* Hovered Tab */
#rotator .ui-tabs-nav-item a:hover,
#rotator .ui-tabs-nav-item a:active {
	background:#FFF url(images/uiactivetabbg.gif) repeat-x bottom left;
	color:#333;
}

#rotator .ui-tabs-nav-item a span {
	float:left;
	padding:1em;
	cursor:pointer;
}

Active Tab Styles

We give all of the link states the same hover background graphic. Basically you can customize this graphic according to your design needs.

/* Active Tab */
#rotator .ui-tabs-selected a:link,
#rotator .ui-tabs-selected a:visited,
#rotator .ui-tabs-selected a:hover,
#rotator .ui-tabs-selected a:active {
	background:#fff url(images/uiactivetabbg.gif) repeat-x bottom left;
	color:#333;
}

Content Panel Styles

Now we’re going to style the content panel. This is the section that holds the content that is being rotated. The key point here is the padding which we’re going to use to enclose the text content and make some room for the background graphic associated with each rotated content. Then we use a class to hide the other panels.

/* Content Panels */
#rotator .ui-tabs-panel {
	font-family:Arial, Helvetica, sans-serif;
	clear:left;
	color:#000;
	padding:40px 540px 15px 15px;
	height:225px;
}

#rotator .ui-tabs-hide {
	display:none;
}

Content Styles

We’re just going to style our header, paragraph and links inside the content panel.

#rotator h2 {
	color:#E75D00;
	font-weight:normal;
	margin:0;
	font-size:1.8em;
	line-height:1.2em;
}

#rotator p {
	font-size:1.1em;
	margin:.5em 0;
	color:#333;
}

#rotator .btn_get_started {
	float:left;
	height:30px;
	width:99px;
	text-indent:-9999em;
	margin-right:7px;
	overflow:hidden;
	background:transparent url(images/getstarted.gif) no-repeat
}

#rotator .btn_learn_more {
	float:left;
	height:26px;
	font-size:.9em;
}

Background Images

Now we’re going to apply the background images. The first 2 panels have the images to the right part of the panel so we need to position the graphic to the right. Then we’re going to position the images to the left for the other 2 panels. Also take note that we need to set a new padding to make some room for the images that are positioned to the left. And that’s it for the CSS.

/* Background Images */
#rotator #fragment-1 {
	background:transparent url(images/coins.jpg) no-repeat top right;
}

#rotator #fragment-2 {
	background:transparent url(images/bearings.jpg) no-repeat top right;
}

#rotator #fragment-3 {
	background:transparent url(images/map.jpg) no-repeat top left;
	padding:40px 15px 15px 540px;
}

#rotator #fragment-4 {
	background:transparent url(images/support.jpg) no-repeat top left;
	padding:40px 15px 15px 540px;
}

Making the Contents Rotate

Now it’s time for some jQuery magic! If you’ll notice at the beginning when we first built our structure, we referenced two Javascript files in the head section. First reference is for jQuery and the second is for jQuery UI.

To make our content rotate we just need to invoke the function to rotate our tabs that is included in jQuery UI library. You just need to point the tabs function to the section where it holds the links, in this case we enter #rotator > ul inside our function.

<script type="text/javascript">
	$(document).ready(function(){
		$("#rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
	});
</script>

Voila! We are Done!

Content rotators are one of the neat ways you can showcase your products and services without taking up too much screen real estate. After you’re finished, you can experiment and try placing the tabs above or lining them up vertically. Try looking up some websites that use this kind of interface for inspiration. Simple variations to the interface can be a great way to learn more about CSS.

I hope you will find this tutorial helpful. If you have any questions or comments please feel free to let me know. Until then, see you next week and have fun!

129 Responses leave one →

Dan Whitmore permalink

May 7, 2009

Sweet!

I’ve been looking for a rotator with a fade effects, bookmarked!

Dan
Rimmer permalink

May 7, 2009

Really useful! Thank you so incredibly much for taking the time to do this.

Rimmer
Raymond Selda permalink*

May 7, 2009

@Dan: Thanks for the bookmark. Really appreciate it.

@Rimmer: You’re most welcome. Always my pleasure to share what I know.
Mike Meisner permalink

May 10, 2009

Well done. Really nice write-up and tutorial, and the download took minutes to implement on a test WordPress site I’m building. Thanks.
Raymond Selda permalink*

May 10, 2009

@Mike: Thank you for the kind comments. I’m glad it was easy for you to implement on your site.
Jerry permalink

May 10, 2009

Who is “Viola”? Or did you mean…

V O I L A?
Raymond Selda permalink*

May 10, 2009

@Jerry: Thank you for the correction. hehehe.
jede permalink

May 11, 2009

this is really cool dude, kip it up thanks
Ann permalink

May 15, 2009

This is beautiful. Is there a way to make it accessible when Javascript is turned off?
Raymond Selda permalink*

May 15, 2009

@jede: Thanks dude! Hope I can keep it up.

@Ann: I’m sure there’s a way but right now I don’t have any idea how to. Maybe this will help you http://tinyurl.com/qn5koe
Ann permalink

May 16, 2009

Thanks, Raymond. That looks like a good link. Nice aesthetic on this, as well as on the dark menu.
Ronan permalink

May 22, 2009

very nice. I have seen loads of this kind of thing but this one ticks the right boxes.
digadao permalink

May 23, 2009

This is great ! But it would be even better if the rotator could stop when the mouse is over the content
Abdel permalink

May 24, 2009

Thanks for this great article !!!
Module23 permalink

May 25, 2009

Thanks for your article, very useful when creating a js-menu. Good work – bookmarked
Innovacionweb.com permalink

May 26, 2009

How to stop click on a tab?
Jim permalink

May 27, 2009

Thanks a lot this is the shizzle! I am fairly new to jQuery this is a huge help, great tutorial!
Thanks!
~ Jim
~ Jacksonville, FL
Greg permalink

May 28, 2009

Superb work Ray, beautifully written and great tutorial. I was wondering if it is possible to “turn off” the rotator – other than to increase the delay to near-infinity?. Keep up the great work!
Raymond Selda permalink

May 28, 2009

You can stop the rotation upon clicking by removing the “true” parameter when you initialize the plugin.

From:
$("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000, true);

To:
$("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);

Further documentation: http://jqueryui.com/demos/tabs/
Martyn wynn permalink

May 28, 2009

Nice effect, but apparent flaw in that JQuery UI is a really common plugin that could be potentially used to create any number of effects on a page. By creating and packing a custom version of JQUERY.UI there is limited opportunity to use the full range of features associated with this library.

It would be nice to see this plug-in working using standard UI/Tab libraries otherwise it is just too limited to apply within any JQuery-UI site.
Jim F permalink

May 29, 2009

Great job! Is there a way to make it so the images slide instead of dissolve?

I wanted to use this but with the slide function of this: http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html

Can’t quite get it right tho.
Jim S permalink

June 2, 2009

Hi – I implemented this on a section of the webpage that is about 500px down the page… so you have to scroll down slightly to see all of the content rotating.

It works great EXCEPT…
When the content rotates, the page jumps back to the top of the page. I am guessing this is because of the #fragment-1 #fragment-2 etc in the anchor tags of the tabs, and can anyone suggest a workaround? Other than that, working nicely.
Thanks!
~ Jim
~ Jacksonville, FL
Raymond Selda permalink*

June 3, 2009

Hi Jim S,

Good observation. I can see what you’re experiencing. I’m not really sure though what causes this but I’ll try to come up with a workaround. Thank you for pointing this out.
Jim S permalink

June 3, 2009

Thanks Raymond. I think it is the hash in the anchor tag of the tabs behaving like a…

-anchortagEQUALS#> Back To Top </anchortag-

… kind of thing – kind of hacked that up to get it to appear in this post.
Thanks a lot!
~ Jim
Andy permalink

June 16, 2009

Thanks for the code! I’m having trouble getting the rotator to appear in IE8. Any suggestions?
Raymond Selda permalink*

June 16, 2009

Hi Andy,

Haven’t checked the rotator yet in IE8. I was hoping it would work okay in IE8 because it looked somewhat good in IE7. I wonder if someone experiences the same. I’ll try to check it out. Thanks
Andy permalink

June 16, 2009

Thanks for your help. Here is a link in case you’d like to view my source.

http://marketing.iuf.indiana.edu/2009/ad-direct-mail/ert-bday-cardb.html
Raymond Selda permalink*

June 16, 2009

Nice work Andy. I love the clean white design. Nice to see that you put the tabs above. Good job.
Andy permalink

June 16, 2009

Thanks. Glad you like it. We are working a portfolio site.
Marco permalink

June 20, 2009

Hi mate!
You done a great job but I think that using your own library will cause many people (me for sure) to not use your good work.

Can’t you release it using standard libraries?
Raymond Selda permalink*

June 20, 2009

Hi Marco,

I’ve just updated the tutorial to use the standard libraries of jQuery UI. The truth is the previous code was not my own library. Javascript is not really my cup of tea so I’m very thankful there’s jQuery. I hope you can use the tutorial now.

Thank you for asking nicely.
Andy permalink

June 23, 2009

Thanks again for the new code. Wanted to share the css fix I found. I was having IE problems and traced it back to position: relative in the rotator div. It could have something to do with all of the other things I changed in the css, but I just wanted to share in case anyone was having the same problem. I removed position: relative and it works fine in ie now.
Raymond Selda permalink*

June 23, 2009

Thanks for sharing the CSS fix Andy. Appreciate it.
GeoffL permalink

June 29, 2009

This is really useful – thanks so much!

Quick question. Can this content be rotated without the tabs visible? I’d like to use it to simply rotate a few content div’s. Thanks for any help.
Raymond Selda permalink*

June 30, 2009

Hi GeoffL,

That’s a good question. Yeah, actually you can remove the unordered list that holds the tabs and just have it rotate. I did the same thing in my homepage but I used loopedslider. Good luck!
GeoffL permalink

June 30, 2009

Duh .
Simple. Thanks so much for the quick reply! Again, great work on this. Works EXACTLY how I want it.
GeoffL permalink

June 30, 2009

Well, I spoke too soon. When I remove the unordered list from the code, there is no rotation, only the first appears. Strange.
Raymond Selda permalink*

June 30, 2009

You’re right! hahaha. I tried to remove the tabs using Firebug and I thought it’s going to work. Apparently it didn’t. hehehe. A quick workaround you can do is to add display:none; for the unordered list ul.ui-tabs-nav. Good luck again.
GeoffL permalink

June 30, 2009

Works well now, thanks! I’m using this in a very simple way for the site I’m working on now, but I think it may help with other projects as well in the typical (tabs included) way! So thank you!
marea permalink

July 3, 2009

good info.
simon gregory permalink

July 5, 2009

hey just wondering if anyboby figured out how to fix the issue with this in ie8, just doesnt work for me, its great but i need it to work in explorer hope somebody can help! thanks
Raymond Selda permalink*

July 5, 2009

Hi Simon,

I checked out the rotator in IE8 and it’s working like a charm. What problems are you having? Maybe you missed out something. Try checking whether you’re calling the Javascript. Good luck.
Andy permalink

July 6, 2009

Hi Simon,

I was having a problem in IE8 initially. In the CSS, I removed relative positioning from the rotator div and that fixed everything.
Ozkar permalink

July 7, 2009

Es igual que el jqueryTab e incluso este es mas rapido de implementar. The JqueryTab is more easier than this script.
Marco Avellaneda permalink

July 8, 2009

Thank you ver much. I just want to comment this, in IE 6.0 the fade efect distorts the letters (just a litle).
Pk Anane permalink

July 9, 2009

Thanx alot…
u r a life saver..
l8r
Lucas permalink

July 15, 2009

I was wondering if anyone fixed the return to top of page on tab switch issue? I’m dying to use this but am unable while it’s misbehaving so.

Thanks,
Lucas
dmitry permalink

July 17, 2009

Hi Raymond,
thanks for a wonderful tutorial. I had one question though. Is it possible to have the tab to also activate a new page instead of just going to the rotator? i.e. I’m trying to replace the navigation bar with the rotator element.

I appreciate any help you can offer w/ achieving this effect.
SiGa permalink

July 18, 2009

Hi, Raymond!
Great tutorial and real nice styled slider, highly appreciated! Two questions, please:
First: If Javascript is turned off, it has got a real funny behavior, when links in the nav are clicked several times (try). Normally, the divs are displayed in a row, one under another. What would I have to change so anyone who´s got JS turned off can see all the divs anyway (or every single when clicking a link)?
Second: Is it allowed to use this for commercial projects, too?
Thanks a lot!
Raymond Selda permalink*

July 18, 2009

@Lucas: I can’t remember fixing this but I’ve added dummy content in the demo page to show you that the rotator is already behaving in accordance with your requirements. Good luck.

@dmitry: I think it’s possible but I’m not really sure what you’re looking for. I would suggest that you try out a different approach for what you want to do.

@SiGa: Having JS turned off is one weakness of this rotator. Try this instead http://tinyurl.com/qn5koe
For commercial projects you have to send me $20 for the license… JOKE!!! hahaha :-p. You can use this for any projects you have as long as you give me your soul. hehehe. Good luck.

Web Designer Turned Internet Marketer