NOTE (UPDATED 9/4/2010): The article below is obsolete. My newest recommendation is that you don’t code these yourself. Head on over to Code Canyon and buy one that’s pre-made for anywhere from $6 to $30. Much easier, and they are pretty.
This last week I learned how to make rotating tabs on a website. You know what I’m talking about, those rotating slideshows that display the news. Unfortunately, I couldn’t find any tutorials on the subject. But since I’m sorta’ a Java redneck, rest assured, any fix of mine is nothing more than a good lookin’ hack. But it works. And so, if you want rotating tabs on your website, do as I do and employ my quick and dirty methods.
First, put the following between your <head>…</head> tags.
<script type="text/javascript" src="jquery.ui-1.5b4/jquery-1.2.4b.js"></script>
<script src="jquery.ui-1.5b4/ui.core.js" type="text/javascript"></script>
<script src="jquery.ui-1.5b4/ui.tabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#rotate > ul').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 7000);
});
</script>
Then, download and unzip this into the same directory as the webpage you’re building.
Finally, somewhere in the body of your webpage, cut and past the following:
<div id="rotate">
<ul>
<li><a href="#fragment-1"><span>Section 1</span></a></li>
<li><a href="#fragment-2"><span>Section 2</span></a></li>
<li><a href="#fragment-3"><span>Section 3</span></a></li>
<li><a href="#fragment-4"><span>Section 4</span></a></li>
<li><a href="#fragment-5"><span>Section 5</span></a></li>
</ul>
<div id="fragment-1">
</div>
<div id="fragment-2">
</div>
<div id="fragment-3">
</div>
<div id="fragment-4">
</div>
<div id="fragment-5">
</div>
</div>
Put stuff in between each fragment id and it will rotate on your webpage. There you have it, super dirty, incredibly friendly.
{ 10 comments… read them below or add one }
This is horrible. You don’t need hundreds of lines of code to eat up your bandwidth to accomplish this. It’s like extinguishing a match with a firehose.
Yeah, I think you’re right, but that’s why it’s quick and dirty. If I were to do it again today, I’d absolutely do it differently. But when I first made rotating tabs, this was what I did first.
i8pikachu –
That might be so (lots of lines), but I don’t see your tutorial online – besides whats an extra 5 or 10 kilobytes at most? a whole half a second downloading on dialup?!
Keep them coming Joshua – most of us do appreciate them :)
how do u control the time on th erotation?
Change the number in the line $(‘#rotate > ul’).tabs({ fx: { opacity: ‘toggle’ } }).tabs(‘rotate’, 7000);
7000 represents 7 seconds. 10000 represents 10 seconds.
I have looked at that guy’s version here: http://stilbuero.de/jquery/tabs_3/rotate.html
I copied all his code, then I used yours, and I even downloaded a theme from jquery web site, but no matter what I do, I can not get the tabs to look like tabs! It cycles through the content, and I see the tab names, but not the colored background and the outline of the tabs. What am I doing wrong?
Thanks. Nice stuff :-) this jquery noconflicts is still making some problems… but will fix it.
How do you get this to stop on the last slide?
Thanks a lot for sharing, this is exactly what i’m looking for, i will give it a try tonight and see how it goes.
I have the same problem of kevin. I see the tab names, but not the colored background and the outline of the tabs.
I supose that needs img to work correctly. I try to create it with photoshop, but the resulte isn’t the same.
Can you help me ?
Thank you in advance