Comments on: Stereotabs: Tabs with Prototype and Scriptaculous

By: jbonez

jbonez — Wed, 10 Mar 2010 15:38:42 +0000

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: Pablo

Pablo — Wed, 03 Feb 2010 13:22:31 +0000

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: Pritush

Pritush — Tue, 05 Jan 2010 16:38:56 +0000

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: Developer’s Snacks: Exploration on Web Tab Modules | Onextrapixel - Showcasing Web Treats Without Hitch

Tue, 10 Nov 2009 16:06:24 +0000

[...] Stereointeractive [...]

By: Dong

Dong — Tue, 10 Nov 2009 08:38:13 +0000

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

Dong — Tue, 10 Nov 2009 04:27:52 +0000

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: Benjamin

Benjamin — Sat, 07 Nov 2009 08:57:27 +0000

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

Benjamin — Sat, 07 Nov 2009 08:49:32 +0000

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: Scott Meves

Scott Meves — Tue, 20 Oct 2009 00:03:27 +0000

@Don, I think you can create multiple instances on the same page, you just have to create new instances of the tabs class:

// first tab set
var tabs = new tabset('container'); // name of div to crawl for tabs and panels
tabs.autoActivate($('tab_first')); // name of tab to auto-select if none exists in the url
// second tab set
var otherTabs = new tabset('anothercontainer');
otherTabs.autoActivate($('tab_first')); // name of tab to auto-select if none exists in the url

By: Don

Don — Mon, 19 Oct 2009 20:34:22 +0000

Great tab script! Very smooth. Can two instances of stereo tabs reside on the same web page, or would they conflict?

Don