Create A Tabbed Content Rotator Using jQuery

07 May 2009 ~ 153 Comments

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 Book

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!

153 Responses to “Create A Tabbed Content Rotator Using jQuery”

  1. Dan Whitmore 7 May 2009 at 3:48 am Permalink

    Sweet!

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

    Dan

  2. Rimmer 7 May 2009 at 6:48 pm Permalink

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

    Rimmer

  3. Raymond Selda 7 May 2009 at 7:22 pm Permalink

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

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

  4. Mike Meisner 10 May 2009 at 12:26 am Permalink

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

  5. Raymond Selda 10 May 2009 at 1:13 am Permalink

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

  6. Jerry 10 May 2009 at 8:46 am Permalink

    Who is “Viola”? Or did you mean…

    V O I L A?

  7. Raymond Selda 10 May 2009 at 9:06 am Permalink

    @Jerry: Thank you for the correction. hehehe. :D

  8. jede 11 May 2009 at 11:59 am Permalink

    this is really cool dude, kip it up :) thanks

  9. Ann 15 May 2009 at 9:30 pm Permalink

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

  10. Raymond Selda 15 May 2009 at 10:45 pm Permalink

    @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

  11. Ann 16 May 2009 at 12:17 am Permalink

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

  12. Ronan 22 May 2009 at 4:43 pm Permalink

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

  13. digadao 23 May 2009 at 12:32 am Permalink

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

  14. Abdel 24 May 2009 at 3:12 pm Permalink

    Thanks for this great article !!! :)

  15. Module23 25 May 2009 at 2:12 pm Permalink

    Thanks for your article, very useful when creating a js-menu. Good work – bookmarked :)

  16. Innovacionweb.com 26 May 2009 at 4:11 pm Permalink

    How to stop click on a tab?

  17. Jim 27 May 2009 at 7:36 pm Permalink

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

  18. Greg 28 May 2009 at 10:33 am Permalink

    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!

  19. Raymond Selda 28 May 2009 at 12:23 pm Permalink

    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/

  20. Martyn wynn 28 May 2009 at 11:36 pm Permalink

    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.

  21. Jim F 29 May 2009 at 4:39 am Permalink

    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.

  22. Jim S 2 June 2009 at 11:34 pm Permalink

    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

  23. Raymond Selda 3 June 2009 at 12:10 am Permalink

    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.

  24. Jim S 3 June 2009 at 1:54 am Permalink

    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

  25. Andy 16 June 2009 at 9:42 pm Permalink

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

  26. Raymond Selda 16 June 2009 at 10:00 pm Permalink

    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

  27. Andy 16 June 2009 at 10:11 pm Permalink

    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

  28. Raymond Selda 16 June 2009 at 10:33 pm Permalink

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

  29. Andy 16 June 2009 at 10:34 pm Permalink

    Thanks. Glad you like it. We are working a portfolio site. :)

  30. Marco 20 June 2009 at 1:28 am Permalink

    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?

  31. Raymond Selda 20 June 2009 at 10:01 am Permalink

    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. :-)

  32. Andy 23 June 2009 at 3:12 am Permalink

    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. :)

  33. Raymond Selda 23 June 2009 at 8:37 am Permalink

    Thanks for sharing the CSS fix Andy. Appreciate it. :-)

  34. GeoffL 29 June 2009 at 11:55 pm Permalink

    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.

  35. Raymond Selda 30 June 2009 at 12:08 am Permalink

    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!

  36. GeoffL 30 June 2009 at 12:39 am Permalink

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

  37. GeoffL 30 June 2009 at 12:47 am Permalink

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

  38. Raymond Selda 30 June 2009 at 12:57 am Permalink

    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.

  39. GeoffL 30 June 2009 at 1:49 am Permalink

    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!

  40. marea 3 July 2009 at 1:12 pm Permalink

    good info.

  41. simon gregory 5 July 2009 at 6:10 am Permalink

    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

  42. Raymond Selda 5 July 2009 at 9:04 pm Permalink

    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.

  43. Andy 6 July 2009 at 8:15 pm Permalink

    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.

  44. Ozkar 7 July 2009 at 10:38 pm Permalink

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

  45. Marco Avellaneda 8 July 2009 at 9:37 am Permalink

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

  46. Pk Anane 9 July 2009 at 9:44 pm Permalink

    Thanx alot…
    u r a life saver..
    l8r

  47. Lucas 15 July 2009 at 12:43 pm Permalink

    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

  48. dmitry 17 July 2009 at 9:47 pm Permalink

    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.

  49. SiGa 18 July 2009 at 4:21 am Permalink

    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!

  50. Raymond Selda 18 July 2009 at 10:44 am Permalink

    @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.

  51. SiGa 18 July 2009 at 4:34 pm Permalink

    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…
    By the way: Where´s the Paypal-button?? hahaha… ;-) Want to keep my soul! :-p

  52. Marco Avellaneda 1 August 2009 at 10:52 am Permalink

    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

  53. daro 7 August 2009 at 11:11 am Permalink

    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

  54. Maarten 14 August 2009 at 7:21 pm Permalink

    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!

  55. Pommie 1 September 2009 at 12:57 pm Permalink

    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?

  56. BJ 12 September 2009 at 3:06 am Permalink

    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.

  57. TheBeesDaddy 17 September 2009 at 6:56 am Permalink

    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.

  58. Rayden 1 October 2009 at 3:00 pm Permalink

    Hi Ray,
    many thanks fr this tutorial…..
    But i still face the problem of “jumping to the top” !!! :-(

  59. Rayden 3 October 2009 at 12:15 pm Permalink

    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…..

  60. Eden 11 October 2009 at 6:51 am Permalink

    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

  61. Brian Irwin 11 October 2009 at 10:14 am Permalink

    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?

  62. reza 13 October 2009 at 2:20 pm Permalink

    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?

  63. GodbaR 15 October 2009 at 8:50 am Permalink

    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

  64. aussie 20 October 2009 at 10:58 am Permalink

    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?

  65. Ettore 29 October 2009 at 6:58 pm Permalink

    Hi, How to solve the problem of “jump to the top” ?
    is There a workaround?
    The table td doesnt work.
    Any solution?

  66. David 1 December 2009 at 9:38 pm Permalink

    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!

  67. Jim hanifen 4 December 2009 at 3:10 am Permalink

    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);
    # });

  68. Jim hanifen 4 December 2009 at 3:13 am Permalink

    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

  69. Vel 8 December 2009 at 9:18 pm Permalink

    Thanks for great script. I had the “Jumping” problem, but when I set height to #rotator, problem disappear :-D

  70. Josh Dreier 17 December 2009 at 4:18 am Permalink

    How do I make the slideshow continue (maybe 8 seconds) after the user has interacted with the tabs?

  71. tom 31 December 2009 at 10:38 pm Permalink

    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

  72. @nomadone 15 January 2010 at 4:29 am Permalink

    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

  73. wespai 22 January 2010 at 2:06 pm Permalink

    thx collect it to

    ajax.wespai.com

  74. Alex 3 February 2010 at 7:20 pm Permalink

    How to switch off autostart scrolling?

  75. john 10 February 2010 at 7:25 pm Permalink

    Really Great Tutorial.
    Is there any way to add a previous and next nav button within each content fragment?

  76. Justin 18 February 2010 at 3:09 am Permalink

    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!

  77. Loon 2 March 2010 at 6:31 am Permalink

    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.

  78. seminyak villas 9 March 2010 at 2:23 am Permalink

    great…
    this is what i’m looking for…

    thx for your sharing…

  79. TownDrugStore 29 March 2010 at 2:30 pm Permalink

    Hello Raymond,
    Great tutorial and example. Much Appreciated!

  80. Lokin Crook 3 April 2010 at 3:13 am Permalink

    I found another website with this same info but a little dated. Rather than calling ui.core.js and ui.tabs.js it provided the code (jquery-ui-personalized-1.5.3.packed.js). I tried to load your example but could not get the rotation to work until I switched from calling the ui.core and tabs to the customized code. If you have a moment to reply, what’s the missing connection? TIA!

    • Raymond Selda 3 April 2010 at 1:07 pm Permalink

      Sorry Lokin but you just have to troubleshoot things out because I’m not really a JS expert. Honestly I hate JS. hahaha. I’m sure you’ll work things out.

  81. Mr.Raed 8 April 2010 at 9:30 pm Permalink

    Hi Raymond Selda,

    Thanks alot for this tutorial. I had one question though,

    Assume I want to make multiple “active” background image for each , could you tell us how can I make it ?

    ex:
    Maximize Profits –> active background : blue
    Flexible Technology –> active background: red
    Practical Solutions –> active background: black
    Customer Support –> active background: green

    ASAP.

  82. Lokin Crook 16 April 2010 at 8:17 pm Permalink

    YO Mr.Raed,

    You would just use CSS on the container div that holds that specific cell/block. e.g.

    # #rotator #fragment-1 {
    # background:transparent url(images/coins.jpg) no-repeat top rightright;
    # background-color:blue;
    # }
    #
    # #rotator #fragment-2 {
    # background:transparent url(images/bearings.jpg) no-repeat top rightright;
    # background-color:red;
    # }
    etc.. In fact, you can do anything with CSS to each individual block independently,
    or make one rule for all of the blocks .e.g.

    # #rotator {background-color:#ccc;}

  83. Mr.Raed 17 April 2010 at 4:37 pm Permalink

    To Lokin Crook

    thanks for your replay

    I think you didn’t catch what I meant.

    I was talking about this css ..

    #rotator #fragment-1 .ui-tabs-selected a:link,
    #rotator #fragment-1 .ui-tabs-selected a:visited,
    #rotator #fragment-1 .ui-tabs-selected a:hover,
    #rotator #fragment-1 .ui-tabs-selected a:active {
    background:red; color:#333;
    }

    #rotator #fragment-2 .ui-tabs-selected a:link,
    #rotator #fragment-2 .ui-tabs-selected a:visited,
    #rotator #fragment-2 .ui-tabs-selected a:hover,
    #rotator #fragment-2 .ui-tabs-selected a:active {
    background:blue; color:#333;
    }

    how can I make differnet colors for each element..

    the above css doesn’t work with me.

  84. Lokin 20 April 2010 at 8:31 pm Permalink

    Mr Raed.

    Your CSS failed as it seems you have two different sections referenced that are not part of the same block / section: the class.ui-tabs-selected is not a child of #fragment-1. Therefore nothing happens when you say under rotator under fragment-1 target .ui-tabs-selected. Let say you have a car and a house, you cant really say, under the car find basement cause the basement is under the house.

    #rotator #fragment-1 .ui-tabs-selected

    So then we would need to decide if we want to target the link in the tabs block or the links in the changing fragment blocks or both.

    If you want to target the links inside the changing fragment divs, you could use:
    —————————————————————————————————————–
    #rotator #fragment-1 a:link {background:red; color:#333;}
    #rotator #fragment-2 a:link {background:blue; color:#333;}

    if you want to target links inside tab section not changing, you could use:
    ———————————————————————————————————-
    #rotator ul.ui-tabs-nav li a:link{background-color:blue;}

    if you want to target only current selected anchor from tabs section during a cycle:
    ——————————————————————————————————————-
    #rotator li.ui-tabs-selected a:link{;background-color:blue;}

    cheers

  85. Raghib suleman 21 April 2010 at 1:13 pm Permalink

    thanks for tabbed-rotator slideshow… good work man

  86. Neil 21 June 2010 at 11:10 pm Permalink

    I’m experiencing a problem when I double click one of the ‘tabs’. Two pictures will be visible at the same time for a split second and then the picture that is suppose to display will be in its normal spot. The rotator functions properly it’s just the javaScript switching the pictures can be delayed and both pictures will be visible.

    I tried a few different things to get this working, for example I tried to place a small pause after clicking once on a tab. But I believe I just don’t know enough about how the code works to get this effect working. Not sure if there is a better solution but would someone be able to help me figure this out?

    BTW, this rotator is excellent. Perfect for Ipad/no flash installed browsers. It’s the best alternative to date in serving up animated content. Thank you so much!

  87. Terry 8 July 2010 at 10:06 pm Permalink

    Is it possible to have the rotation start with a random tab instead of the first one?

  88. Terry 9 July 2010 at 12:23 am Permalink

    I solved the random starting tab question.

  89. Jen 22 July 2010 at 3:36 am Permalink

    I’m fairly new to all of this, could you tell me if it is possible to have the tabs sit to the right of the rotator as opposed to the left? When I try to change float from left to right in the CSS, the outcome is not pretty!
    Thanks!

  90. Evert 23 July 2010 at 4:45 pm Permalink

    I’m encountering a strange problem when I scroll down. When switching slides the pages goes up again to the location of the slider. Anyone knows a fix or what might be causing this?

    Sincerely,
    Evert

  91. Neil 4 August 2010 at 3:09 am Permalink

    Repost, hopefully someone out there knows the answer :)

    I’m experiencing a problem when I double click one of the ‘tabs’. Two pictures will be visible at the same time for a split second and then the picture that is suppose to display will be in its normal spot. The rotator functions properly it’s just the javaScript switching the pictures can be delayed and both pictures will be visible.

    I tried a few different things to get this working, for example I tried to place a small pause after clicking once on a tab. But I believe I just don’t know enough about how the code works to get this effect working. Not sure if there is a better solution but would someone be able to help me figure this out?

    BTW, this rotator is excellent. Perfect for Ipad/no flash installed browsers. It’s the best alternative to date in serving up animated content. Thank you so much!

  92. Matthew 13 August 2010 at 7:54 pm Permalink

    Hi there guys,

    I have successfully integrated the rotator, and I have to say it is exactly what I was looking for.

    One quick question, I have replaced the tabs with images and this has worked fine for the hovered and background styles as I have created new styles for each tab, e.g. li.ui-tabs-nav-item-1 and li.ui-tabs-nav-item-2 etc. The problem is with the selected/active tab, I can’t duplicate the style as it is only called once from the nav-fragment-1 line of code, not the rest.

    I hope that all makes sense and any help would be greatfully received. Thanks in advance.
    Kind regards,

    Matthew

  93. jenn 19 August 2010 at 6:00 am Permalink

    this is almost exactly what i need…

    quick question (sorry i’m new at this)…

    i can’t seem to get the tab styles to sit vertically on the left? i don’t see how in the style, they are positioned horizontally? i was expecting something like display: inline;

    this must be a simple solution… i just can’t figure it out. :-(

    ?

  94. Greg 8 December 2010 at 12:25 am Permalink

    Is there a way to include a pause/start button? I’d like to have it rotate as it normally would but also give the user the ability to “stop” the rotation, and then start it up again. Is this possible?

    Thanks,
    Greg

  95. Matthew 28 December 2010 at 5:49 am Permalink

    Hi All,

    Just thought I would shed some light on the issue with the page jumping upwwards when you scroll down the page past the bottom or the rotator.

    The cause is that for the moment of time both tabs are hidden, right between hiding and showing, the overall height of the page becomes smaller which moves the scrollbar up but won’t reset it after tab is shown.

    The solution is to define the total height of your rotator, including tabs and content, in the #rotator class of the CSS. For instance you can see our modified version here http://tinyurl.com/37jxdyc which has the height defined as 300px – without this the page would jump when you are further down the page past the rotator section.

    Hope that helps and by all means take a look at my code for more info.
    Kind regards,

    Matthew

    P.S. Thank you again to the creator for this script, it is truly excellent and my sympathy is with you for the huge numbers of comments you get!

  96. amy 26 January 2011 at 12:09 am Permalink

    what a great script! thank you so much.

    one question. does anyone know if there is any way to stop the rotator on the first frame once it has played once?

    thank you
    amy

  97. Heather 5 March 2011 at 6:54 pm Permalink

    Nice, smooth transition and a small js file! ;-)
    What I miss is the ability to alter it.

  98. amy 1 April 2011 at 12:37 am Permalink

    does anyone know if there is is there anyway to have the transition slide rather then fade??

  99. paulw 12 April 2011 at 12:22 pm Permalink

    Great script!!

    Need help.

    I set the tabs to float right, as I wanted the tabs to appear on the right side of the rotator, however, when I do this the tabs scroll from right to left?

    I have tried all kinds of things to get the tabs to still scroll from left to right, whilst having the tabs aligned to the bottom right of the rotator, with no luck.

    Can anyone help with this?

  100. paulw 12 April 2011 at 1:36 pm Permalink

    Sorted!

    I added another list item before the first one, and set it to a fixed width to move my other tabs over to the right. Crude, but it works.

  101. iqbal 26 April 2011 at 5:04 pm Permalink

    i need the same functionality accept the rotator should change on mousehover and the tab should slide up and down. any good ideas are welcome

  102. Rob 18 May 2011 at 1:48 pm Permalink

    This script is exactly what I needed – it was super easy to set up and customize for my client’s site. Thanks so much for the tutorial Raymond!

    Just thought I’d mention that I also had the jumping issue at first that has been mentioned a few times in the comments, and defining the height of the #rotator took care of it perfectly.

  103. grave 23 July 2011 at 5:23 pm Permalink

    Hello! Your code is excellent!
    I want to make one small change. Will you help me?
    I want to replace the background image for a youtube video for example … Is it possible?
    How do I remove the fade effect in rotate?

    Thanks a lot: D

  104. Ribin 6 September 2011 at 5:17 pm Permalink

    This is great . Thank you so much Raymond.

    If you have a moment to reply , Can you advice me how could I customize the code for including the fade effect in tabs too.
    for eg:- http://www.geoplan.com/

    looking forward for your reply

  105. Drex 15 September 2011 at 9:29 pm Permalink

    Hey people, i’m new with JS but know something about other codes like AS 123 and php.
    Have someone a solution to have this playing just once? so it stops in the final slide?
    Thanks all folks!
    Cheers
    Andrex

  106. Sean 18 September 2011 at 7:06 pm Permalink

    Great slider. How can we modify the transitions? I don’t like that fade to white. Anyway to change the color or use a different transition? Or how about speed it up so you can even see it? We have it working great, this is the only think… If we could do something like the Cycle plugin going up, down, left or right that would be great…

    Thanks,

    S

  107. jotheeswaran 28 September 2011 at 2:33 pm Permalink

    i have been used images as a gif(animated) in tabs. its working in firefox, but chorme and ie8/9 seems not well looking good, my problem is if one tab is active means, other tab also running in background, when click the manually it seems meanwhile displayed the gif images. only i have this issues in chorme and ie browsers.

  108. jotheeswaran 29 September 2011 at 1:40 pm Permalink

    can anyone help how to stop run(gif_image) the inactive tab images. only visible part image movement only show. if use manually it seems to from the visited part of the gif_images(animated).
    my code is
    script call function:

    $(document).ready(function(){
    $(“#rotator > ul”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 9000, true);
    });

    html code

    gif_1_imaage

    gif_2_imaage

    gif_3_imaage

    gif_4_imaage

    gif_5_imaage

  109. Norbs 13 November 2011 at 3:54 pm Permalink

    Thanks for that excellent script and it works just perfect.

    I just can’t tweak it to fit my wish,. I read through the replies here and could not find anything that would work. I even used to follow your earlier reply…
    /*Make sure to add it after the fx {}
    Here is the jquery page with that information: http://jqueryui.com/demos/tabs/mouseover.html*/

    It just appears to be all dead, sorry for my jQuery ignorance but I’d greatly appreciate your help

    What I try to achieve is;
    1. no click on tabs but hover over tabs
    2. still a fading effect on event:’mouseover’

    Thanks you so much

  110. Norbs 13 November 2011 at 4:29 pm Permalink

    I tires to change it to the following but to no avail
    $(“#rotator > ul”).tabs({fx:{opacity: “toggle”}}).tabs({event: “mouseover”});
    $(“.ui-tabs-panel”).fadeTo(“slow”, 0.3);
    $(“.ui-tabs-panel”).hover(function(){
    $(this).fadeTo(“slow”, 1.0);
    },function(){
    $(this).fadeTo(“slow”, 0.3);

    not sure what I’m missing… thanks

  111. Stan 22 November 2011 at 12:08 pm Permalink

    Very nice script Raymond!

    One issue I have is it seems to rotate faster in Firefox than IE. Any thoughts…sorry if this is a repeat question.

    Thanks again,
    Stan

  112. EMRE 17 January 2012 at 4:36 am Permalink

    a problem have occoured for me.For example when i down of the webpage
    when tab change it make my browser go where the tabs are how can i solve this issue

  113. EMRE 26 January 2012 at 6:32 am Permalink

    @Rob
    thank you very much it works now.But it doesnt rotate in some browser like opera and chrome but i am sure somebody would explained it at the comments above now i gotta read all of them down.thanks a lot again

  114. bogdan 10 April 2012 at 4:04 am Permalink

    great job, I put it into my site, but I wanna know if I can make it stop on hover. My client want this way and it is a must. if anyone can help me, then i send him many many thanks:)

    ps. I read all the replays, no solution.


Leave a Reply