Create A Tabbed Content Rotator Using jQuery
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!
Trackbacks and Pingbacks
- CSS Brigit | Create A Tabbed Content Rotator Using jQuery
- Create A Tabbed Content Rotator Using jQuery | Switch on the Code
- Technology Related Links for May 8th, 2009 - Jason N. Gaylord's Blog
- Como criar um “Conteúdo rotatório” usando jQuery | Createeve
- Topics about Web-design | Create A Tabbed Content Rotator Using jQuery - Raymond Selda Blog |…
- Create A Tabbed Content Rotator Using jQuery
- Create A Tabbed Content Rotator Using jQuery | Misr IT Reader
- The Technology Post for May 22nd - Jason N. Gaylord's Blog
- Create A Tabbed Content Rotator Using jQuery - Raymond Selda Blog | XHTML, CSS, PHP, MySQL, Wordpress, and all of the fun stuff under the Web!
- Create A Tabbed Content Rotator Using jQuery - Raymond Selda | Helping You Design and Build Websites « Netcrema - creme de la social news via digg + delicious + stumpleupon + reddit
- Twitted by stinkstiefel
- The best links of the day 26/05/09 | D-Lists
- How to Create a Tabbled Content Rotator with jQuery | Candes | Cristian Neagu - UI Designer, Developer, Consultant
- How to Create a Tabbled Content Rotator with jQuery | Business Marketing Experts
- Twitted by mathias89
- How to Create a Tabbled Content Rotator with jQuery | Misr IT Reader
- Tabbed Content Rotator Using jQuery | Seaside99
- Como hacer girar el contenido de su pagina web con jQuery — Tu Tecnologo
- 又一款TAB，基于JQ - Ajax Finder [Ajax探索者]
- Brilang.com » Blog Archive » links for 2009-06-02
- Tabbed Content Rotator
- Tabbed Content Rotator | MixInformatico.com
- 10 Cool Accessible jQuery and Ajax Plugins - Blog Reign
- 10 готини jQuery и Ajax плъгина
- The best tutorials combining HTML,CSS,PHP and JQuery | blogfreakz.com
- Tabbed content rotator using jQuery | Ajaxdump
- Pestañas en JQuery
- 35 Fresh and Useful jQuery Plugins « Tech7.Net
- 35 свежих и полезных jQuery плагинов
- 25 Tutorials and Resources for Learning jQuery UI - Speckyboy Design Magazine
- links for 2010-03-07 | Visualrinse | Design and Development by Chad Udell
- links for 2010-03-07 | Iona.LABS
Thanks, Raymond, for your reply and for pointing me to Jenna´s tutorial (I obviously forgot about that one)! I´ve also got Luca´s problem – could it depend on the layout maybe? I´ll have to try a variation to find out…
Want to keep my soul! :-p
By the way: Where´s the Paypal-button?? hahaha…
This is an automatic traduction (sorry for my english)
With respect to the exposition (approach) of @Siga for working without javascript, I did the following thing:
1.-introduce all the div “fragment” (, , y ) together in a div which i called div = “contenedor” and with css I gave it the following characteristics:
#contenedor {
overflow: hidden;/*SO THAT WORK WITHOUT JAVASCRIPT */
height:240px;
}
2.- I eliminated the class “ui-tabs-hide” (NOT THE CLASS “ul.ui-tabs-nav”) of the div “fragment-2″,”fragment-3″ y “fragment-4″ (only i eliminated the class to the divs but didnt touch the css)
3.-i Moved the menu () complete at the end of the divs “fragments” (but inside the div “rotator”)
4.-I removed in the css “ul.ui-tabs-nav” the absolute position and I used float:left;
ul.ui-tabs-nav {
float:left;/* take off 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;
}
I hope it works, only i probed in firefox
I am sure that there are better alternatives, since I am not an expert in javascript not even in jquery, but i felt obligatted to comment my solution
Regards
sorry for my english
is very cool, but, i need your help!
i need to add 2 arrows for left (previous) and right (next)
is it possible?
thank’s! and sorry for my english :S
Almost the script I was looking for. Well done. The only thing i miss is this. By hover a listitem the content get displayed. Do you think this is possible with this script, because you you the link to send something to the url?
Or someone knows a script working like that?
But still.. good job!
Hi
love the script. just having an issue with what appears to be a jquery plugin conficts.
the script runs fine on the site , except for pages that are also running sIFR.
if i remove the calls to the sIFR files the flipper works again.
Unfortunatly my client values the custom fonts over the content flipper, but id like to look for a solution first before giving up all hope and bowing down to Corporatocracy.
just wondering if anyone else has come across this problem as well, and has a solution?
Great rotator, but I am reproducing the “jumps to top of page” issue.
Oddly enough, with as much dummy content as has been added in the demonstration, the issue does not exhibit itself, but when there is just enough dummy content to have the entire page be slightly over a full screen high… the issue reappears.
Very nice indeed. Almost perfect, except for the “jump to the top” issue mentioned by Jim S. and Lucas. Anyone figured out a workaround yet? I’ve been banging my head against the wall trying to troubleshoot that issue, but no luck yet. It would appear the dummy text only prevents the page from jumping back to the top if you use a lot of it, such as in the demo (12 paragraphs of dummy text). But if you have just a little dummy text (i.e., 1 paragraph), the issue arises once again. Would love to use this but until I figure out how to prevent the page from jumping to the top, I’m afraid I can’t. With that said, it is a very lovely script.
Hi Ray,
many thanks fr this tutorial…..
But i still face the problem of “jumping to the top” !!!
Hi….
I found a simple workaround for the “jump to the top” issue.
I placed the entire div(wrapper) corresponding to the rotator inside a table’s td tag and automatically the issue got settled…..
Thanks so much for sharing your tip Rayden. Appreciate it
Hi
Very good example!
Just two problems :
1. when you click too fast, it can mess the images order
2. when I used ui-core+ui-tabs+jquery-1.3.2.min.js it didn’t work, only when I use the 1.7.2 ui js+1.3.2..
Thanks
Is there a way to get a click on the tab to also trigger a jquery call to show a page below the tabs using ajax?
hi
great thanks!
i need to stop the tab rotation after mouse selected a tab or hover over it. then if the mouse leaves the tab
rotation should start. i used your suggestion as
“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);” ”
it stops the rotaion after mouse click. but does not start again after mouse leaves the tab.
how do i fix it?
Hi Raymond,
Thanks for such a cool script.
I’d switched off the tabs and I’d like the rotation to stop when I either mouse in to the rotation area or click in the rotation area. I tried the code below but it did’nt work. The rotation just continues.
From:
$(“#rotator > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 4000, true);
To:
$(“#rotator > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 4000);
Any ideas how to acheive this?
Thanks in advance
Godbar
Hello
quick question, and hopefully a easy solution
My Client is using (and dependant on) jQuery 1.2.6 and would like to use this content flipper.
we have managed to get it implimented fine on the site ,however the onstates (that is the class changes on the li’s ) are not working.
bearing in mind that we cannot upgrade to 1.3.2 .. is there any solution for this issue?
Hi, How to solve the problem of “jump to the top” ?
is There a workaround?
The table td doesnt work.
Any solution?
Just thought i’d share this with everyone suffering from the page jumping problem,
http://groups.google.com/group/jquery-ui/browse_thread/thread/819b376821764c8e/fc2528ed9ed7aaeb?lnk=gst&q=page+jumps#fc2528ed9ed7aaeb
It appears to be the page height rather than the anchor!
You can also make it slide and fade or just one or the other. Use the fx property height. That will make the image slide up and fade at the same time.
# $(document).ready(function(){
# $(“#rotator”).tabs({fx:{height:”toggle”,opacity: “toggle”}}).tabs(“rotate”, 4000);
# });
Another useful add on to this is to make them change on mouseover instead of click. I did find that the images may flash with the mouseover. The code to add to the javascript is
event:’mouseover’
Make sure to add it after the fx {}
Here is the jquery page with that information: http://jqueryui.com/demos/tabs/mouseover.html
Thanks for great script. I had the “Jumping” problem, but when I set height to #rotator, problem disappear
How do I make the slideshow continue (maybe 8 seconds) after the user has interacted with the tabs?
hey there, nice tool, but if the slide / fade is done, the page is jump to the top on every effect, its maybe just a bug.
happy new year at all
greez tom
Looks really excellent however i couldn’t seem to get this working with dynamic contents from wordpress loops. I was pulling images into the tab links from wordpress posts and populated the numbers for each fragment with the post’s ID number.
I also pulled the full image from posts and the ID number for the content panels.
For some reason my entire tab buttons UL also faded along with the rest of the content. Might be that it’s conflicting with some other ajax but I don’t know enough about ajax to trouble shoot.:(
thanks for this tutorial though, very nice
thx collect it to
ajax.wespai.com
How to switch off autostart scrolling?
Really Great Tutorial.
Is there any way to add a previous and next nav button within each content fragment?
I would love to see this with image replacement-based navigation. I’m trying to incorporate images in my nav rather than text (I have that working in every concievable browser except IE6/7.. But great tutorial. It helped a lot!
I love this tutorial. Everything makes sense. I’m trying to add additional jquery stuff to my page, but when i download a new jquery ui file then this rotator breaks. Even if I download the full jquery ui. So something must have changed. I would love to know why it won’t work. Right now i’m stuck with this rotator with no new jquery.
great…
this is what i’m looking for…
thx for your sharing…