Configuration
You can create a tab set and pass it a few options to customize it to your current page structure. By default, the code will search for tabs by using the class name "tab", and tab content using the class name "panel". It also will apply the class name "selected" to the currently selected tab.
You may also have noticed that the id attributes for the tags and tag content started with either "tab_" or "panel_". This is a way to link a tab with its specific content while still keeping the ids unique. You can change these in the configuration as well.
Finally, if you wanted, you can turn off the fade effect, and also change the event that triggers the tab activation.
Below is an example of how you can pass options to your tab set.
var tabs = new tabset('container', {
classNames: {
tab: 'tab', // class name used to identify the tabs
panel: 'panel', // class name used to identify the tab content
tabActive: 'selected' // class name added to the active tab
},
ids: {
tab: 'tab_', // what to strip off the tab id to get the tab name
panel: 'panel_' // what to strip off the tab content id to get the tab name
},
onEvent: 'click', // perhaps you want to activate on mouseover? not recommended
effects: true // set this to false if you do not want to include effects.js
});
This is so cool. I’m wondering whether this stereotabs can be integrated with velocity menu
By fadhlirahim on Jul 24, 2007
I’m wondering if people think it would be better to eliminate the IDs and class names from the tabs themselves and just rely on the href tag?
@fadhlirahim: I bet it would work with velocity menu… just include both javascript sources and initialize stereotabs second. it should be able to add the onclick event in conjunction with any existing tab events.
By smeves on Jul 24, 2007
Clicking on tabs too fast screws everything up…
Maybe you should consider putting “limit: 1″ into Effect’s queue option?
Best,
kangax
By kangax on Jul 26, 2007
is there any way to load tab contents dynamically?
By Yücel Dağlar on Jul 28, 2007
@Yücel
Sure, just use prototypejs’ Ajax.Updater
http://prototypejs.org/api/ajax/updater
By naholyr on Jul 31, 2007
Very nice guys!
By Ben Arwin on Aug 1, 2007
Very nice!
If you want to see it in real world:
http://www.ihr-implantologe.eu
Thank you very much!
By Michael Konjevic on Sep 1, 2007
Hello,
Very usefull script. Only thing is when you refresh the page, you see all of the content flashin before the content fades. Is there a way to fix this? Hope to see a reply.
Thx.
len
By Lenrick on Nov 4, 2007
Len,
If you add a “display:none” style to your panels they will not display when the page loads. However, this will make your page inaccessible to visitors with javascript turned off. It’s a trade-off.
By Scott Meves on Nov 4, 2007
Thank you for a great script! It works great although I encoutered a small problem when using it without effects. I think this is what you meant (from line no 55-67):
By Joel on Nov 5, 2007
Hi Scott,
Thx for your fast reply. It worked.
Len.
By Lenrick on Nov 5, 2007
doesn’t work with prototype 1.6
Any fix?
By Chris on Nov 22, 2007
Hey, Love the script! I just have a quick question, though… I was wondering if there was any way to highlight the selected tab using CSS? cheers. D.
By Dennis hurley on Nov 29, 2007
hey awsome script
one thing though:
is there a way to make it not flicker when you first come upon the tabbed page? (it seems that the script first loads, and displays the tabs, and then hides it)
By david on Dec 5, 2007
@david, check out my comment to Len above.
(If you add a “display:none†style to your panels they will not display when the page loads. However, this will make your page inaccessible to visitors with javascript turned off. It’s a trade-off.)
By Scott Meves on Dec 5, 2007
lol omg
i totally missed that
By david on Dec 5, 2007
Hi,
Clicking several tabs very fast will display several tabs contents together. Is there anyway that can ensure only one tab content is display at a time?
By samantha on Dec 16, 2007
Yes, I noticed that the contents wil be displayed together if you click the tabs fast. It’s easy to reproduce this.
Is this perhaps related to the fading effect?
By Eric on Dec 17, 2007
Whenever the tab is clicked, the page will jump back to the top. Does anyone know how to fix it?
By Henly on Dec 18, 2007
Thanks for this script. Everything works fine, except: I cannot switch off the fading effect. I tried to set effects: false in line 34. But then it doesn’t work anymore. Any suggestions?
By Kate on Dec 19, 2007
nice script!
By An VÅ© on Jan 1, 2008
Thnx;
But I have the same problem as Kate. If I set the effect to false It does not work anymore…
By Bart on Jan 2, 2008
Hi,
Same problem as Samantha, whent he tabs are clicked even remotely fast the content overlaps inside.. Try clicking the demo above, it will happen.
I am using Safari 3.0, and am experiencing the issue in all browsers..
Thanks for any help on this!
By Ben on Jan 14, 2008
Anyone want to post and update to this script that fixes the issue? I’m short on time but plan on doing so in the future. I think we’ll have to add the Effect.Fade into an Effects queue.
By Scott Meves on Jan 14, 2008
Nice script.
However, would like to know if we want to print the page, how can all the content be displayed?
By Conan on Feb 13, 2008
Conan, you could accomplish this by creating a new stylesheet for print.
In that stylesheet you can add print-specific styles, such as making sure your tabs are visible:
By Scott Meves on Feb 13, 2008
I have add a specific style sheet for print with “.panel {display: block;}”, however only the current tag is displayed and other content still be hidden. Please help. Thanks.
By Conan on Feb 13, 2008
Conan, If it’s not working perhaps it’s because the prototype functions hide() and scriptaculous’ Effect.Fade() set a display:none style directly to the elements you want to print. You have two options, which I will leave up to you to implement. You could make a print button on the page that when pressed would first make all the elements visible in the page before it prints (or you could make a printer-friendly version of the page without the tabs script). You could also rewrite the code so that instead of calling hide() you instead apply a new class name with something like $(element).addClassName(‘hiddenTab’). and then make sure the inline this class would be in your normal stylesheet as:
Then, in your printer stylesheet, you would override these styles:
By Scott Meves on Feb 13, 2008
Thanks for the suggestion.
How can I apply the addClassName function together with fade-in/fade-out effect?
By Conan on Feb 19, 2008
Really great piece of code. Just one objection, though. I don’t really like that orphaned exception. I mean, if I have set options.effects = false, throwing an exception saying Effects is missing is out of order.
My first solution is to check for Effects after confirming I want it in the first place:
//extend options
if (this.options.effects && typeof Effect == ‘undefined’)
throw(“Stereotabs requires including script.aculo.us’ Effects library!”);
BTW, I changed the message a bit, as you can see.
Anyway, it may be even better to degrade to options.effects = false and show a warning instead of an exception.
cheers
By J. A. Rodriguez on Mar 2, 2008
Nice code. I’ve used this a few times and it works great. Have a new problem, though. I need to have links within the individual panels that should open other panels but I can’t figure out how to make them work. I tried using the relative and absolute url with the hash for the panel name, but the page doesn’t refresh since the browser just views these as anchor links. How can I use a text link to open a different panel?
By cg on Mar 5, 2008
I love the script, but for the life of me cannot get the current tab in a selected state. How was that created in the demo above?
I see the stylesheets are just a tad different than what is here in the page as opposed to the downloaded file, but the changes don’t reflect the functionality as well.
Any ideas? The site I’ve implemented the code at is here: http://www.mooshoopork.net
By Evan on Mar 17, 2008
Nevermind, figured it out.
the class “ul#tab li a.active” needs to change to “ul#tabnav li a.selected” and that did the trick.
Tested in firefox and IE 6 for PC.
By Evan on Mar 17, 2008
@Evan,
The javascript adds a classname to the currently selected tab called “selected”. So, you could add a style like:
It looks like the selected state is working fine on your site in FF but not when I checked it in safari. You may need to add “!important” to your a.selected style.Looks like you fixed it while I was checking! Great work.By Scott Meves on Mar 17, 2008
how can you turn off the effect?
By damien on Mar 21, 2008
Hello Scott,
First of all – thanks for sharing good code, I’ve searched for proper tabbing solution, and right now – yours looks like a good fit.
I want to offer few improvements for you to review, and possibly apply.
//line 33
fixHeight: true, //this is to automatically resize panels to have same size as highest one
//line 46
if(this.options.fixHeight) {
var maxPanelHeight = this.panels.max(function(panel) {
var visible = Element.visible(panel), height;
Element.setStyle(panel, {position: ‘relative’, width: ‘100%’, left: ‘0px’});
if (!visible) Element.show(panel);
height = Element.getHeight(panel);
if (!visible) Element.hide(panel);
return height;
});
this.panels.each(function(panel) {
panel.style.height = maxPanelHeight.toString() + ‘px’;
});
}
By Andriy Tyurnikov on Apr 3, 2008
Hi! Great job! Thanks! Just what I was looking for!
Im working on creating a site for gamers and right now I’m using your script so users can watch “hot”-things posted on the site trough a div at the main page by clicking the tabs. The thing is that this function would be enhanced so friggin much if it would cycle trough all tabs automatically with js, instead of the user always having to click on the tabs to see the next panel. Like the one on this site: http://www.gameplayer.se. It’s exactly what I’m looking for except it’s in flash, wich sucks.
So question! Is there an easy way to create this? Can’t belive it’s too hard
Tips are appreciated 
Cheers
Patrik
By Patrik Ilola on Apr 16, 2008
@Patrik:
This is a great idea. If you are familiar with prototype.js, you would want to make use of the periodicalExecuter (http://www.prototypejs.org/api/periodicalExecuter) function to automatically call the ‘activate()’ method on the next tab. This is a quick example I just came up with and it probably won’t work right out of the box, but it might get you going if you feel like diving into it on your own.
By Scott Meves on Apr 16, 2008
@Scott
Hmm. Actually I’m not that familiar with prototype.
Maybe it’s too much to ask for, but is there any chance that you could help me out? Would really like to get it to work. I’m kinda stuck there. I bet that others would be interested too
By Patrik Ilola on May 20, 2008
I have to be honest– this is not high on the list right now. But, I’ll keep it in mind for future a future update. Maybe someone out there reading this will want to pitch in.
By Scott Meves on May 20, 2008
Okey! I understand! Thanks anyway!
By Patrik Ilola on May 20, 2008
I recommend the duration of effects to be set to 0.5 instead of the default Fade effect.
By Fadhli Rahim on Jun 5, 2008
this code is broken for use in Firefox3 RC2 due to a native implementation of getElementsByClassName which returns a node collection.
it can be fixed by changing ‘getElementsByClassName’ to ’select’ and adding a ‘.’ before the class name.
e.g.
before : getElementsByClassName(‘tab’)
after : select(‘.tab’)
By Nick Sellen on Jun 5, 2008
Well, thanks Nick for that tip. i just installed FF3 and started to panic a bit when i check the site using this script.
out of curiosity, does this mean that FF3 is going break many script or just the one using getElementsByClassName function?
i’m not sure if it’s such a major thing (newbie to js) but kind of odd if it impacts so many script to make such change with any fall back from FF, no?
thanks again.
cheers
By julien on Jun 7, 2008
Great script. I had a similar problem as Nick mentioned above, though. However, not with Firefox but with Safari 3 and Prototype 1.6. It’s working fine with Prototype 1.5, but in order to work with 1.6 you have to change the getElementsByClassName to select as in Nick’s comment.
By Adrian Schoenig on Jun 14, 2008
Nick : where do you change all of this, please ?
i’ve made the changes in the stereotabs.js but that does not do the trick.
regards.
By foxmask on Jun 17, 2008
Hi… Looks like bahzillions of people have upgraded to Firefox 3, and it doesn’t work with Stereotabs…
I’m going to need to switch to another tabs system until a fix is released… any word on a timeframe?
Stereotabs FTW!!! (once it works with FF3!)
By Mike on Jun 20, 2008
Just uploaded a new version that works with Firefox 3 and prototype 1.6. Thanks to Nick’s comment the fix was super easy. Thanks Nick!!!
By Scott Meves on Jun 20, 2008
still can’t get to work in FF3 – does something other than the .js files need to be updated?
By evan on Jun 20, 2008
I get the error “this.tabs.each is not a function”
line 42 in stereotabs.js
By evan on Jun 20, 2008
found the problem…
http://stereointeractive.com/blog/wp-content/uploads/code/stereotabs.zip
isn’t the current…
By evan on Jun 20, 2008
the change of getElementsByClassName to select method is quite annoying…..the problem is prototype 1.6 have a disadvantage that it breaks when you gzip it..problem with the internal hack in method parameter conditioning
(http://ajax.sys-con.com/read/464826.htm)
is there any way that we could use the old prototype and still support FF3?or any solution about gzip-ing the new prototype?
thanks alot…
By Dan on Jul 13, 2008
For the people who want to get rid of the relatively slow changing of the tab content (like damien), change the following lines:
line 57:
new Effect.Fade(this.showPanel, {queue: ‘front’});
change to:
new Effect.Fade(this.showPanel, {duration: 0.1, queue: ‘front’});
line 64: new Effect.Appear(this.currentPanel, {queue: ‘end’});
change to: new Effect.Appear(this.currentPanel, {duration: 0.1, queue: ‘end’});
By Phunkk on Jul 16, 2008
… the download page is quite confusing. the zip package comes with an old stereotab-library…!?
By Kate on Jul 18, 2008
I was having trouble with the effects setting. My fix for setting effects to false broke things when effects was set to ‘true’, so I ended up just changing a couple of lines to ignore the effects setting (suited my purposes). Here is the modified js if anyone is interested:
[code]
var tabName = tab.id.replace(this.options.ids.tab,'');
this.currentPanel = this.options.ids.panel+tabName;
if (this.showPanel == this.currentPanel) {
return false;
}
$(this.currentPanel).show();
if ($(this.showPanel) != null){
$(this.showPanel).hide();
}
this.tabs.invoke('removeClassName', this.options.classNames.tabActive);
tab.addClassName(this.options.classNames.tabActive);
this.showPanel = this.currentPanel;
[/code]
By David Fauber on Jul 29, 2008
Ciao.
Thanks for your very useful code.
A question: is it possible have two different and indipendent tabs set in the same page? For example at right USA(Alabama, Texas, Florida etc) and at left Europe(Italy, France, UK etc)
I’ve done some test but without good result.
Thanks
Federico
By Federico Bo on Jul 31, 2008
@Federico Bo:
You can use it twice without a problem. Just make sure you use different id’s in the second set and that you dont change the effect settings (so dont disable them).
By Coen Coppens on Oct 6, 2008
Default security settings in IE7 prevent this script from running unless you allow it. Any way around that?
By Chris on Oct 8, 2008
I have no idea why that would be the case, nor do I use IE7… but please do share with us if you figure out what is going on. Does IE7 prevent javascript by default? This script doesn’t do anything out of the ordinary…
By Scott Meves on Oct 8, 2008
Excellent script. Thank you for sharing.
Whenever I click on a tab the page reloads and jumps to the top of the browser window. Can anyone advise on how to prevent this?
Thanks in advance.
By Walter Lockhart on Oct 20, 2008
I used the script and it was working quite nicely, then it just broke and started loading it all into a single div. I ran error checker and it found the following errors:
Error: element.dispatchEvent is not a function
Source File: http://www.mysite.com/wp-content/themes/mytheme/js/prototype.js
Line: 3972
Error: this.panels.invoke is not a function
Source File: http://www.mysite.com/wp-content/themes/mytheme/js/stereotabs.js
Line: 45
Any idea what would have caused it to suddenly break?
By Bryan Davis on Jul 24, 2009
If I had to guess, I’d say an unrelated js file may have a stray comma somewhere that is interfering with your javascript being evaluated properly. Either that, or a quick search on google would imply that the “element.displatchEvent” error hints that you are including Jquery and Prototype on the same page.
By Scott Meves on Jul 24, 2009
Is it possible to select the color of the opacity change? Right now, it changes opacity to zero from the base Panel Div background color.
I have a white background on my page and would like to keep the white background and black text. So the Panel Div needs to be white too. When I make the Panel Div dark it looks very odd with my layout. I would like to use the fade effect but make the Panel Dive dim dark black briefly then fade back to the original white. This would be more dramatic and obvious than just simply fading the text.
I looked around at the code, but didn’t immediately see a way to achieve this.
Thanks for any input you can share.
Don
By Don on Aug 21, 2009
I did forget to compliment you on your fantastic script. It is simply very cool. I’ve looked around a lot for a tab menu script that would be subtle, but cool, but not too basic. Mootools, Jquery and Prototype. I’ve been through them all. This one is simply perfect for what I want to do. I just regret that I don’t have a dark layout to capture the full effect. Hope there is a way to do what I’ve asked about.
Thanks again
By Don on Aug 21, 2009
I noticed this comment above and I don’t see an answer to it.
“Whenever the tab is clicked, the page will jump back to the top. Does anyone know how to fix it?”
By Henly on Dec 18, 2007
I am having this issue on a site currently in development. It only happens with smaller browser windows. Anyone have a clue on how to fix this?
By Bryan on Sep 29, 2009
@bryan, try adding a “return false;” at the bottom of the activate function.
By Scott Meves on Sep 29, 2009
@scott – I’ve tried adding return false; into the end of the activate:function(tab) in the stereotab.js, but that doesn’t solve the problem.
This is the code I have (before the add).
Where do I add the return false; to make it work?
By Bryan Davis on Sep 29, 2009
Hi Bryan, sorry for the misleading comment. I looked into it and the solution is to stop the event bubble on the “click” event on the links. What’s likely happening is the browser window is trying to scroll to the position of your named anchors. Here is a fix. You have to add an additional parameter to the activate method to catch the event, and then call Event.stop() on it.
By Scott Meves on Sep 30, 2009
Thank Scott…I’ll give this a try!
By Bryan on Oct 1, 2009
Hello,
Amazing tutorial!! I have everything working almost perfectly now. My only issue is a screen jump.
I have it setup to divide my post, comments, and trackbacks into different tabs. When I click on ‘post’ to go back to the actual article it jumps the page down. Is there a way to remedy this? I want the page to stay scrolled to the top no matter which tab is chosen.
Thanks again!
By Benjamin on Oct 12, 2009
@Benjamin, check comment 68
By Scott Meves on Oct 13, 2009
Wow of course I missed the one right above me! Sorry Scott!
Thanks it works great!!
By Benjamin on Oct 13, 2009
Great tab script! Very smooth. Can two instances of stereo tabs reside on the same web page, or would they conflict?
Don
By Don on Oct 19, 2009
@Don, I think you can create multiple instances on the same page, you just have to create new instances of the tabs class:
By Scott Meves on Oct 19, 2009
Hello Again Scott,
Once again, great tutorial. However I am still having the jump issue. Maybe it’s a conflict on my end?
I am using this bit of code just as was shown above:
activate: function(tab, event) {
var tabName = tab.id.replace(this.options.ids.tab,”);
this.currentPanel = this.options.ids.panel+tabName;
if (this.showPanel == this.currentPanel) {
return false;
}
if (this.showPanel) {
if (this.options.effects) {
new Effect.Fade(this.showPanel, {queue: ‘front’});
} else {
$(this.currentPanel).hide();
}
}
if (this.options.effects) {
new Effect.Appear(this.currentPanel, {queue: ‘end’});
} else {
$(this.showPanel).show();
}
this.tabs.invoke(‘removeClassName’, this.options.classNames.tabActive);
tab.addClassName(this.options.classNames.tabActive);
this.showPanel = this.currentPanel;
if (event) {
Event.stop(event);
}
},
I can click to a tab when the page initially loads, but it does nothing when I try to select a second tab.
Thanks in advance for helping out a newbie trying to get his hands dirty!
Benjamin
By Benjamin on Nov 7, 2009
Ok I spoke to soon…
I was missing the \’, event)\’ on the first line. I changed it but a cache issue was stopping me from seeing it.
Sorry for the post (feel free to delete it).
Thanks again for a great tutorial.
By Benjamin on Nov 7, 2009
Hi Scott,
About comment 68. I tried it but it only seems to fix IE browsers. It still scrolls down in FF 3.5. How can I fix this.
More power!
By Dong on Nov 9, 2009
Hi Scott,
I’m sorry I got it right this time. My bad.
However, a couple of things. I’d like to know how to pre-select the tabs. Also, would it be possible to have the ’selected’ class appear in the li tag instead of the a tag?
Thanks and more power.
By Dong on Nov 10, 2009
i want to disable fade effect that appears when changing tabs, how to do this ?
and also how to make tab text appear horizontal instead of vertical
By Pritush on Jan 5, 2010
Dear Scott, I have a suggestion that would improve this (awesome) piec of code.
Currently, if you click on multiple tabs very fast, all the according panels wil appear instead of just the last one.
This can be fixed by queueing both the fade and the appear effect to the *end* of the effect queue. E.g. look for the line that says “new Effect.Fade(this.showPanel, [...]);” and change ‘front’ to ‘end’.
I think it is even more awesome this way.
By Pablo on Feb 3, 2010
Any tips on how to set this up for wordpress? ive installed plugins and widgets but no idea how to impliment this into my site.
By jbonez on Mar 10, 2010
Hello,
Thanks for the script – so cool
Can anybody tell me how to dissable the fade effect between change of tabs or how to make fade effect go faster? Thanks.
By Tommy on Apr 21, 2010