Klaus Hartl – Stilbüro : Tabs Version 2

Tabs Version 2

November 5th, 2006

Category:: JavaScript,; Web Development,; jQuery

Since the first release of my jQuery Tabs plugin I constantly worked on it – which is most notable if you take a look at the demo page – but until now I have never officially released a new version. Since I made a little API change recently and because I think the plugin is pretty mature now, I hereby announce version 2 of the jQuery Tabs plugin. I’m going to describe all changes and additions since version 1.

Licensing

First of all I changed the licensing for the plugin. The plugin is available under the the same double licensing scheme as jQuery itself is (MIT/GPL). Thus that should be no problem at all, still I think it’s worth mentioning.

Keep track

The (guaranteed) latest version of the plugin is also available from jQuery’s plugin repository. Check it out from svn://jquery.com/plugins with your Subversion client of choice.

Packer

Tabs is packable with Dean Edward’s JavaScript Compressor. I fixed errors that occured in the packed script (e.g. a missing semicolon) and replaced Conditional Compilation with checks for jQuery.browser.msie. In fact, the script in the downloadable ZIP file is already packed. The download contains an uncompressed file as well for those of you who like to have a look into the source code.

Documentation

I added a complete inline documentation, which can be found in the uncompressed source file.

Bookmarkability and the back button

~~Tabs are truly bookmarkable. Clicking on a tab changes the hash in the URL. If you use Tabs together with my newly created History/Remote plugin the back (and forward) button is fixed as well.~~ If you use Tabs together with my newly created History/Remote plugin, tabs are truly bookmarkable, e.g. clicking on a tab changes the hash in the URL of the browser, as well as support for the back (and forward) button is enabled. Tabs will auto-detect its presence. Supported browsers are Firefox, Opera, Safari and Internet Explorer. History/Remote is contained in the download.

API change

To pass in the tab to be initially activated you no longer specify it with an “on” option. Instead you pass the number as first argument to the tabs() function. That’s the way it was in the very beginning and I found passing in the initial tab as {on: 2} a little too verbose:

$('#container').tabs(2); // start with second tab
$('#container').tabs(2, { /* options */ });

If a hash in the URL of the page refers to one fragment (tab container) of a tab interface, this parameter will be ignored and instead the tab belonging to that fragment will be activated. If it is omitted it defaults to 1. But because of the bookmarkability of a tab such usage is limited and more or less deprecated anyway. You can always control the active tab on page load by having the appropriate hash in the URL.

Optional settings

All of the following options are key/value pairs in an object literal that is passed to tabs() as an argument . For example:

$('#container').tabs({ fxFade: true, fxAutoHeight: true});

It doesn’t matter if you omit the initial tab parameter or not:

$('#container').tabs(2, { fxFade: true, fxAutoHeight: true});

Effects

fxFade: true

Boolean flag indicating whether fade in/out animations are used for tab switching. Can be combined with fxSlide. Will overrule fxShow/fxHide. Default value: false.

fxSlide: true

Boolean flag indicating whether slide down/up animations are used for tab switching. Can be combined with fxFade. Will overrule fxShow/fxHide. Default value: false.

fxSpeed: 'fast'

A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds (e.g. 1000) to run an animation. Default value: "normal".

fxShow: {height: 'show', opacity: 'show'}

An object literal of the form jQuery’s animate function expects for making your own, custom animation to reveal a tab upon tab switch. Unlike fxFade or fxSlide this animation is independent from an optional hide animation. Default value: null. See animate.

fxHide: {height: 'hide', opacity: 'hide'}

An object literal of the form jQuery’s animate function expects for making your own, custom animation to hide a tab upon tab switch. Unlike fxFade or fxSlide this animation is independent from an optional show animation. Default value: null. See animate.

fxShowSpeed: 'fast'

A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds (e.g. 1000) to run the animation specified in fxShow. Default value: fxSpeed.

fxHideSpeed: 'fast'

A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds (e.g. 1000) to run the animation specified in fxHide. Default value: fxSpeed.

fxAutoHeight: true

Boolean flag that if set to true causes all tab heights to be constant (being the height of the tallest tab). Default value: false.

There’s one more thing about these effects I would like to point out: Even if you use animations, all the tab contents remain fully printable. This is not granted due to how animations work and you will hardly find that taken into account out there.

Other options

callback: function(tabToShow, tabToHide) {
    // do something
}

A function to be executed upon tab switch. If animations are used this function is invoked after the animations are completed. The function gets passed two arguments: the first one is the DOM element containing the content of the clicked tab (e.g. the div), the second argument is the one of the tab that gets hidden. Alternatively the former element can also be refered to with the this keyword in the body of the callback function. Default value: null.

selectedClass: 'a-css-class'

The CSS class attached to the li element representing the currently selected tab. Default value: "tabs-selected".

hideClass: 'a-css-class'

The CSS class used for hiding inactive tabs. A class is used instead of display: none in the style attribute to maintain control over visibility in other media types than screen, most notably print. Default value: "tabs-hide".

tabStruct: 'div>div'

A CSS selector or basic XPath expression reflecting a nested HTML structure that is different from the default single div structure (one div with an id inside the overall container holds one tab’s content). If for instance an additional div is required to wrap up the several tab containers such a structure is expressed by "div>div":

<div id="container">
    <ul>
        <li><a href="#section-1">Section 1</a></li>
        <li><a href="#section-2">Section 2</a></li>
        <li><a href="#section-3">Section 3</a></li>
    </ul>
    <div>
        <div id="section-1">
            ...
        </div>
        <div id="section-2">
            ...
        </div>
        <div id="section-3">
            ...
        </div>
    </div>
</div>

Recap: The default HTML structure the plugin relies on looks like this:

<div id="container">
    <ul>
        <li><a href="#section-1">Section 1</a></li>
        <li><a href="#section-2">Section 2</a></li>
        <li><a href="#section-3">Section 3</a></li>
    </ul>
    <div id="section-1">
        ...
    </div>
    <div id="section-2">
        ...
    </div>
    <div id="section-3">
        ...
    </div>
</div>

Triggering a tab

I have also added a function to activate a tab programmatically (”from outside”), as if the tab itself were clicked:

$('#container').triggerTab(2);

That would activate the second tab for an interface that was created in #container. Such a function comes in handy if you need rotating tabs for instance.

Thats it – have fun! Download and Demo are still in place.

Comments disabled · Trackbacks disabled · Permalink

189 Comments

Comments feed

Hi I would love to see a nested ajax version !

I know the point is unobtrusive js but I am designing an admin panel so this is not an issue for me. Im a newbie to jquery and so far my own efforts are not going so well.

great stuff btw

Comment by Matt Bourne, November 6th, 2006 at 3:52 pm
Author Comment
Thanks Matt! I see the need to be less unobtrusive in certain environments. You know what, you could use the callback function to load content the Ajax way…:

$('#container').tabs({callback: function() { $(this).load('/path/to/your/content.html'); }});

this in the callback refers to the DOM element holding a tabs content, so that becomes a pretty short snippet. Just a simple example. Let me know if that works for you! If not, I have already a different approach in mind.
Comment by Klaus, November 6th, 2006 at 8:57 pm
Thanks very much.

Comment by Lv, November 7th, 2006 at 2:18 am
Hi,

I’m seeing a problem with IE6. When I add a DIV or IMG to a section of a container the fxAutoheight fails to work in IE6. It continues to work fine in Firefox.

If there is a solution to this, would love to hear it.

Comment by Merric, November 7th, 2006 at 3:26 pm
Maybe its because I’m a relative newbie. However, I’m struggling to get consistency. When I put two div tags inside each section (one floating left and one floating right) then it works in IE6 but not in Firefox.

Comment by Merric, November 7th, 2006 at 6:06 pm
Author Comment

Hi Merric, thats the way the auto height option works. You have to set a fixed height to make it work.

Good news: I’m currently reworking that part to make it more flexible. I will take your problem into account.

Comment by Klaus, November 11th, 2006 at 3:47 pm
Hi Klaus, I tried the ajax tabs you suggested but i cannot get it to work. Could you please put an example of this ajax tabs online?
Cheers
Geert

Comment by Geert Baven, November 13th, 2006 at 10:53 am
Two items that you may want to look into:

1. A way to show all tabs (an ‘untabify’ function if you will).
2. I tried both autoheight and slide effects and they don’t seem to get along very well in firefox 2 …

Comment by Armando, November 13th, 2006 at 8:01 pm
Author Comment

Hi Armando,

1. not sure when I will be able to implement such a thing.

2. Both options counteract unfortunately. While the auto height results in a fixed height, the slide effect obviously needs to change the height during an animation. Not sure if it’s doable at all to get both effects together.

If you need a fixed height for the slide effect maybe you can get away by setting the height in a style sheet.

Comment by Klaus, November 13th, 2006 at 9:33 pm
Hi Klaus,

thanks for your work. I like your tabs and
I tried to use it on my website.
But I have a small problem with Safari.
I have a link on the first tab and I would like to switch to 4th tab.
I used your function triggerTab for this purpose. It works in all
browsers except Safari. Under Safari a click on this link leads to the first page of my site.

In your source code I found that you look for construction ‘>ul>li>a’
and then use fake form submit.

Maybe the problem is that I have menu that is implemented with the similar construction menu 1?
And your search found it first and tried to work with it….

Could you suggest me some workaround for this case?

Best regards,
Dmitry

Comment by Dmitry, November 15th, 2006 at 8:59 pm
Author Comment

Dmitry, can’t really tell from your description. Do you have a demo online? For now I assume you have to narrow down the scope you called triggerTab with.

If you have created the tabs like $('#menu').tabs(); then you should invoke triggerTab with the same selector: $('#menu').triggerTab(4);.

Comment by Klaus, November 16th, 2006 at 8:56 am
[...] Update: Tabs Version 2 [...]

Pingback by Klaus Hartl - Stilbüro : Accessible, unobtrusive JavaScript tabs with jQuery, November 16th, 2006 at 5:56 pm
thanks a lot for the great work!

unfortunaly the triggertab function (on your demopage and in my testcode) doesnt work on ie (testet 5.5, 6.0, 7.0 on xp) (works fine on safari and firefox (xp&osx) :(

all the best,
Daniel

Comment by Daniel, November 16th, 2006 at 6:52 pm
Author Comment

Daniel,

I fixed that, triggerTab works fine now, with or without the History plugin.

Comment by Klaus, November 17th, 2006 at 3:25 am
Klaus,

I use a narrow scope for this call… $(’#container-tabs’).triggerTab(4);

Comment by Dmitry, November 18th, 2006 at 11:05 pm
strange… only part of my message was sent… here is last part…
*****

I tried the new version of Tabs and now it switched to the 4th tab and then immediately to the first page of the site…

You can have a look to this page here:
http://www.photosafari.ru/index.cfm?id=1496

the whole site in Russian but for you I left the needed link in English.
The link “more” in the left box under tabs.

Comment by Dmitry, November 18th, 2006 at 11:08 pm
Hello, first of all, great job!

But I have a problem with tabs and IE 6 under win2000. It didn’t work.
Explorer complains about that line (94 of your demo web):
$(document).ready(function() {
and says that:
error: ‘push’ is null or isn’t an object.

It works ok under IE 6 and win98. Maybe it’s my computer, but I can’t know, I don’t have another computer with win2000.

bye!.

Comment by ek, November 19th, 2006 at 6:37 pm
Hi, Thanks for the plugin!

Can you explain what the following css is doing?

div {
margin: 1.2em 0 0;
width: 50%;
}

div div {
margin: 0;
width: auto;
}

We took this from one of your demos and tried to swap this for

#container {
margin: 1.2em 0 0;
width: 50%;
}

#container div {
margin: 1.2em 0 0;
width: 50%;
}

as we have outer divs that we don’t want to use the width and margns.
but it messes up the layout in IE 6.

Any ideas?
Thanks.
Darren.

Comment by Darren Ferguson, November 22nd, 2006 at 12:39 pm
Author Comment

Hi Darren,

you can simply remove that. That’s just to make the demo look a little nicer with margins etc. For the same reason I didn’t put that into the external style sheet that is included in the download.

Comment by Klaus, November 22nd, 2006 at 1:33 pm
Hi. I just updated to your new version of the tabs interface from a really old one, and I like it a lot. However, there’s a huge problem (at least for me).

The click event function, executed whenever we click on a tab label or, in my case, calling the triggerTab function, removes the id! The call to setTimeout (even with a 0 seconds interval) is enough to let the execution flow continue.

Due to the asynchronous behaviour of this, it produces that code accessing the id may get the empty one; or even worst, code that looks for the element by id won’t find it (which is my case).

Is there any way this can be fixed? I guess I can just remove that piece of code, since I’m not using IE7 yet, but of course this is not the right approach and I’d prefer to have a solution coming from you who knows better how’s this supposed to work.

Thanks in advance,

Comment by Raziel, November 23rd, 2006 at 2:32 am
Hi, i’m using this nice plugin but i had one problem. The tabs-selected class appear at the first time the page loads, but when i make a click in any place of the page, the tab system loose the tabs-selected class. The same happen when i click in other tab of the system, all loose the class. I can’t find the solution to this.
Thanks

Comment by Guillermo, November 23rd, 2006 at 9:09 pm
Author Comment

@Raziel:
According to my measurements, between the removal and restore of the id are an average of 35ms on my machine. I wonder how you manage to access the element by its id in that timeframe and especially at that time. I’m tired of spending another 8 hours of trying to fix that specific IE 7 problem. Nevertheless I just added another option today that may help you (the demo/download is updated). Just don’t include the History plugin or explicitly set the option bookmarkable: false. That way the URL doesn’t change and the hack causing you trouble is just not required. You don’t have support for bookmarking and history anymore of course.

@Guillermo:
I’m sorry, I can’t tell what the problem might be from your description alone. Would be helpful if you have a demo online. I cannot reproduce the behaviour you described.

Comment by Klaus, November 24th, 2006 at 12:29 am
This fails at line 1604 in the jsquery.js library in IE7. UNLESS, you use fxFade:’true’ (this is even the case on your demo page). I unfortunately do not understand the library enough to help in debugging :(

Comment by Nici, November 25th, 2006 at 9:15 am
Dmitry,
It looks like that although you are triggering the fourth tab with the onclick, you have the first tab linked in the href as “#”. Most browsers follow the href after executing the onclick behavior. In order to stop this, you need to use event.preventDefault() at the end of the onclick (or event.returnValue = false; for IE). Or change the href to be “#section-14″ instead of “#”.

Note that I have found that Firefox will actually follow the link and activate the proper tab if I simply link to the tab using href (no need for the onclick triggertab), but IE needs the onclick. Don’t know about Safari. But its probably safest to include them both, or only the onclick with a preventDefault.

Comment by Nici, November 25th, 2006 at 9:43 pm
Thanks for the follow up. I checked the new version and I think it’s kinda messed up. As soon as I migrated to the latest code I get an error in the basic functionality of clicking over my tabs:

y[p]=z.el.orig[p]+”px”;

The problem is that z.el.orig['left'] value is NaN. I haven’t debugged it but this problem is present in yout demo page. Just go to the first “Simple tabs” example and click on Sectio 2 or Section 3 tabs and you’ll get the error.

Oh, and about your question: “how you manage to access the element by its id in that timeframe and especially at that time?” Well, I think the time is not the issue, but since I’m doing some asynchronous calls, I think the call to setTimeout is enough to halt that execution thread, so my other thread that actually looks for the element by id gets executed, failing to find the element. Then, the setTimeout call comes back, and restores the id, but it’s too late at that point in time.

Comment by Raziel, November 27th, 2006 at 5:51 pm
[...] The ajaxy fading in and out of the separate Personal blog and modelling diary is also pretty cool! Got it from here, its totally cool! See the demo page for other things it can do based on jQuery, a javascript library. It weighs in at 24kb but i didn’t go for the lightweight mooFX (3kb!!) because I didn’t like the effects. Other things javascript can do include even rounded corners! Although one might as well just make an image (faster and smaller perhaps?) its still pretty cool what pure code can do. Since its a library, it only is downloaded once and is accessed from your browsers cache. [...]

Pingback by This Cow Is Purple, November 27th, 2006 at 6:03 pm
Hi. Sorry for cluttering the forum, but I figured it out the problem with the last version of the tabs interface:

The code was setting:

showAnim['left'] = ’show’;
and
hideAnim['left'] = ‘hide’;

accessing the arrays with the key ‘left’ (which doesn’t exist) instead of ‘opacity’. I changed it back to ‘opacity’ and it works fine, so far.

Comment by Raziel, November 28th, 2006 at 12:11 am
Nici,

thanks for your try to help me. But unfortunately it did not work. I tried both of your suggestions but with the same result – Safari still redirected me to the root of the site after the click.

Comment by Dmitry, November 28th, 2006 at 9:17 am
Hi, I downloaded the last version and the demo it´s not working locally on Firefox 2.0, but your online demo it does.

When I checked the source code of you online demo, I realize that you are not including your library, instead you are including a file called jquery_002.js, is this a jQuery beta version?

The thing is that if I use these files, it works ok. What is happening?

Comment by taote, November 28th, 2006 at 12:27 pm
This is a great plugin! I’m extremely new to all this javascript fabulousness, though and I think I have a syntax problem…Or maybe a css problem…

Is it possible to have the navigation system in one div and the tabs in a totally separate div? I’ve tried and tried…Is this what tabStruct is for? If yes, how does one physically separate the links from the content to be loaded? Forgive my total ignorance…It’s most likely something super easy…right?

Comment by Anej, November 28th, 2006 at 4:29 pm
I am having problems in IE 7 also. Any news on a fix? Am using fx fade for now, while i’m am prototyping.

Thanks for the great work though, it has saved me hours!

Marc

Comment by Marc McHale, November 28th, 2006 at 5:30 pm
Hi again, i could fi the last problem (it was my fault). Now, i had another problem. I make a system of five tabs that dinamically open a php page. This is make throuhg a callback function (like in your first answer in this comments) that make a jQuery load. If i don’t make anything else, the first time i run the page, there is no content in the first tab (it’s perfect, because never call the function that load the page). To solve this i make a triggerTab to the first tab, but doesn’t work (don’t make the request) If activate another tab, the first time runs perfect, but if i reload the page doesn’t work. All this test were make with Firefox 2.0.

Thanks

Comment by Guillermo, November 28th, 2006 at 7:33 pm
Author Comment

@All:
Sorry for the inconvienence, the latest version I had uploaded produced an error in IE. This is now fixed.

@Raziel:
The only fix for your problem I can think of is to poll for the element with that id a few times, say every 50ms, after all, you know it will be there. I couldn’t find another fix for the IE7 specific scroll problem.

@Taote
It seems to me that you have downloaded the whole demo via “Save Page As”. Some browsers produce file names like jquery_002.js etc. in this case and that isn’t very reliable with downloading external files anyway. There is no file called like that in the demo. Please download the archive. The jQuery file in the demo is called jquery-latest.js, it is taken from the jQuery repository, because in jQuery 1.03 an error occurred in IE caused by a bug in the event module. As soon as jQuery 1.04 or 1.1 is out I will replace my version.

@Anej
The plugin isn’t designed to work like that. The tabStruct option is used to define a structure that differs from the single div structure nested in a container. But it still relies on one single container. Otherwise you couldn’t create tabs as easy as $('#container').tabs();.

@Guillermo
How do you attach the callback function?

Comment by Klaus, November 28th, 2006 at 10:23 pm
The structure of the tab widget is the common, and this is the create function:

function traer(div){ $(this).load('getEventsPage2.php?type=' + div.id + '&fecha=2006-11-10'); }; $(document).ready(function(){ $('#tabs2').tabs({ callback: traer }); $('#tabs2').triggerTab(1); $('#calendar_ev').datePicker(); });

I hope this is that you need.
Thanks

Comment by Guillermo, November 29th, 2006 at 4:40 pm
Author Comment

Guillermo,

triggering a tab that is already visible doesn’t do anything (same with clicking on an active tab). The plugin was not designed to load content via XHR in the first place (it has “accessible” in its name), so I cannot offer a good solution, apart from rewriting major parts of it, so better not expect that.

Maybe you can combine Tabs with my other plugin Remote and work something out that would even be accessible, but I haven’t tested that myself yet.

Comment by Klaus, November 30th, 2006 at 12:35 am
Author Comment
Anej, I judged too early regarding separating the tabs navigation from the tabs container (wow, I didn’t know how flexible my own plugin is). You could hide the default tabs navigation, then rebuild your own and use triggerTab to highlight tabs. Like that:

$('#container').find('>ul:eq(0)').hide().end().tabs(); var nav = ['<ul>', '<li><a href="#">One</a></li>', '<li><a href="#">Two</a></li>', '<li><a href="#">Three</a></li>', '</ul>'].join(''); $(nav).appendTo('#somewhere'); $('#somewhere li').each(function(i) { var tabIndex = i + 1; $('a', this).click(function() { $('#container').triggerTab(tabIndex); return false; }); });

with #somewhere being a div somewhere in your document (where you want the alternate nav to be):

<div id="somewhere"> </div>

and #container the one where you put the tabs HTML structure (as described in the post) into:

<div id="container"> </div>
Comment by Klaus, November 30th, 2006 at 2:06 pm
Thank, Klaus. I think that we trigger another tab first, just to work.

Comment by Guillermo, November 30th, 2006 at 6:47 pm
Hi Klaus,

Thanks again for helping me over the mail!
I have another small question though:

I wonder if it’s possible (and how) to have the and the section-divs inside different divs.
So it would look something linke this:

[deleted code block because it broke my page - Klaus]

Thanks.

Comment by Knalpiep, December 3rd, 2006 at 10:26 pm
Author Comment

Knalpiep, please do not break my site, Im using XHTML as XML here which is much stricter in error handling than HTML is. If you want to post larger code blocks please use the following:

<pre><code> Your code here </code></pre>. Of course you have to escape “>”, “<”, “"”, “&”, otherwise normal HTML is rendered and the information you wanted to post is not conveyed.

Thanks.

Comment by Klaus, December 3rd, 2006 at 10:36 pm
Author Comment

And regarding your question – as far as I can see from your post -, you may want to read the second post before yours.

Comment by Klaus, December 3rd, 2006 at 10:39 pm
Of course sorry for breaking your site.
I didn’t expect my code to be that harmful since there were only some div’s in it.

Anyway, unfortunately, i can’t get your code to work that way.

And if possible, i’d really like it if the “hard-coded” ul could be in another div …

Thanks for the effort!

Comment by Knalpiep, December 3rd, 2006 at 11:47 pm
I’ll have some other comments for you but for now there’s a fairly serious bug in ff2: use a link to go the tab page, hit the back button, forward button, click a tab: all the tabs disappear and cannot be brought back without a reload.

Comment by stylo~, December 4th, 2006 at 7:48 pm
Author Comment

I tried to reproduce that but couldn’t. Can you give me some more information on this? Does it happen in my demo?

Comment by Klaus, December 5th, 2006 at 8:47 pm
Hmm, very weird. Just checked and doesn’t happen on the other computer with ff2, only mine. Maybe it’s an extension, though I only have a few. Ideas?

So you know, this is what I wrote just before checking:

*********

Yes, here, all the tab widgets. And locally. And also when I rewrote the tabs to produce much of it dynamically so no “obtrusive” markup and there isn’t the “obtrusive” css styling if no js, which was one thing I was going to comment on later :-)

All I can say is, use the link on this page to open the demo page (not in a new tab) so you have a back button. Go back, forward, then click one of the tab buttons in any/all of the widgets: bang, all the “fragments” are gone in that widget, only the tab buttons are left. You can click one in each and destroy each. With the special effects, the first click works then 2nd makes it disappear.

Hope it helps. I imagine it’s toggling the css display incorrectly. Or my ff is seriously messed up :-)

Comment by stylo~, December 6th, 2006 at 8:09 am
Author Comment

There is no obtrusive markup. I also believe that with large blocks of content having links on top linking to these sections (like a TOC) is more usable then having none.

Comment by Klaus, December 6th, 2006 at 11:36 am
Author Comment

Knalpiep, I don’t understand what the problem is. With the proposed solution you can have a cloned navigation inside a totally separated element (while the default list is hidden). You don’t need to create that via JavaScript either, you could simply attach the click events.

Comment by Klaus, December 6th, 2006 at 11:44 am
>>There is no obtrusive markup.

With all due respect, rarely do you want the list of links except if the sections are huge. For example a little 2 or 3 tab info box on your homepage would never use links. So you have to add links to your markup, and you have to add all the classes/ids to everything. If you build it via js, then you don’t need any of that. (Actually, the way I did it was to build all that via js if the links didn’t exist, just to hook into your plugin.)

Also if js is not on, you have a problem as-is because the css is applied to the tabs when it shouldn’t be. The script would be better to apply the classes or build the links so the page is fine without js.

Hope it helps.

If I find out what is causing a problem with my ff2 and the tabs, I’ll let you know.

Comment by stylo~, December 7th, 2006 at 3:31 am
Author Comment

There is no need for any class and any id at all. The plugin does not need any of them, they’re there only for the purpose of styling (and that could be achieved in other ways). This should be clear from the first post about the plugin. You could as well initialize the plugin like $('body>div>h2+div').tabs(); or whatever. Except for one class that is required to hide inactive tab containers in order to have control over visibility in other media types, e.g. print, in IE.

I was just friendly enough to provide some basic CSS to start with. Obviously the design is very basic.

If you use tabs for very little chunks of content, then yes, a list may be a little over the top, but such usage isn’t very common. In most cases each tab refers to blocks of semantically separated content. At least that is what I was thinking when I created the tabs and then decided to make them available as a plugin to the jQuery community. If you think you can do better, great, go for it!

Regarding the CSS issue in the case of JS disabled – point taken, yet that is a minor problem really. It degrades gracefully. Still I’m going to fix that.

Comment by Klaus, December 7th, 2006 at 2:20 pm
>>You could as well initialize the plugin like $(’body>div>h2+div’).tabs();

Good point. Just need to apply the styling via js then.

Here’s what I was playing with for building the links, though it certainly isn’t generic or even thought thru much. (I changed the classes for tabs and fragments to use “tabstuff”):

return this.each(function() {

var container = this;

//#################################################
//if more than one on one page, errors. we can’t make timestamp ids or you can’t bookmark. Hmmmmm…
//$(this).children(’div’).addClass(”fragment”); //how to work with tabStruct??
//alert(gE(”anchors”));
if(!$(this).find(”ul”).length) {
$(this).prepend(”);
var tabAnchors = $(container).find(”ul.tabstuff”);
$(this).children(”div”).each(function(i){
$(this).addClass(”tabstuff”).id(”tab”+i).find(”h2″).hide();
tabAnchors.append(’<a href=”#tab’ + i + ‘”>’ + $(this).find(”h2″).html() + ‘</a>’);
});
}
else {
$(this).children().addClass(”tabstuff”).find(”h2″).hide();
}
//#################################################

Oh, yeah, one other point was hiding the titles within the blocks so you don’t duplicate them with the buttons. Maybe an option.

The way I did this years ago was to build the buttons from the hx tags dynamically depending a certain structure which had to be used. I also limited the text in the tab titles in case they got too long.

Hope it helps.

Comment by stylo~, December 8th, 2006 at 8:27 am
Author Comment

Again, don’t take everything of the demo for required. The headline is only there to make obvious that the tab has changed. It doesn’t have to be there at all. Here’s how it can look like. So now you have the problem of how to name a tab. Putting in a headline just to store the name is what I call obtrusive. In other words, you will always have to rely on certain markup. You could of course pass in the names as option, but that becomes pretty ugly and only works out if you know how many tabs there are in the first place.

Your code could be optimized, I leave that up to you. Also, if one uses “ul” as tabStruct option your code will fail. I see another problem arousing for highlighting the correct tab if the page is called with a hash in the URL.

You should use text() instead of html() to retrieve the name of the tab (to avoid nested anchors and other invalid markup constructs).

Would you please use HTML entities “<” and “>” if you want to post “<”, “>”. I’m going to delete comments that break my site (that’s XHTML as XML here).

Comment by Klaus, December 8th, 2006 at 9:47 am
Author Comment
Another downside came to my mind: If you attach the classes for styling via JavaScript, you will most probably notice a FOUC.

And I checked the “obtrusive CSS” issue again. Here’s how it looks with JavaScript disabled (from Plazes). Such degradation is satisfying for me (and my employer). At least the tabs still integrate into the page layout.

Apart from that, you can already change that with the plugin as is, with simple jQuery method chaining:

$(...).tabs().addClass('tabs-activated');

And then let the styling of the tabs stuff depend on that class you have added:

div { /* default stuff */ ... } .tabs-activated div { /* tabs restyling/addon */ ... }

As you can see, you can already do that with minimal effort. Do not restrict yourself by relying too much on the demo. To repeat myself, it’s just meant as a common ground to start with.
Comment by Klaus, December 8th, 2006 at 11:08 am
–I’m going to delete comments that break my site (that’s XHTML as XML here).

Yeah, that’s why xhtml is terrible. No benefit, many costs.

–if one uses “ul” as tabStruct option your code will fail.

That’s why I noted it’s not generic, just playing with the code to automate it for myself.

Thanks for the examples and tips.

Comment by stylo~, December 10th, 2006 at 9:00 am
Hi Klaus,

First I would like to say BiG Thanks to your great plugin! I’m a happy user of it!

Here is my question: What is the most elegant way to add a new tab to the existing tabs?

It would be great if the plugin could offer easy tab closing/creating apis in the future :)

Regards,

- Eric

Comment by Eric, December 11th, 2006 at 10:25 am
Author Comment

> Yeah, that’s why xhtml is terrible. No benefit, many costs.

This is not the right place to start that discussion (again).

Comment by Klaus, December 11th, 2006 at 11:29 am
Author Comment

Eric, closing a tab wouldn’t really work with history, so I’m not sure if I will add that at all. Maybe you can get away with disabling a tab. It would just be a matter of CSS to completely hide the tab. For adding a tab you have to append the li element to the list and a div as container, then unbind click events from the anchors and initialize the tabs again.

Comment by Klaus, December 11th, 2006 at 12:33 pm
You just reminded me of what I forgot to add before. If you were adding the styling via js it would be pretty easy to detabify by removing the styles and returning to a standard layout. I’d really like to see a tab/detab option.

>>This is not the right place to start that discussion (again).
-endless, isn’t it :-)

Thanks again for all the good work.

Comment by stylo~, December 11th, 2006 at 4:33 pm
By the way, if anyone else has the same issue with the tabs disappearing after using the forward and back buttons, please post.

If it helps decipher it, my addons to ff2 are: dom inspector, fasterfox, firebug, flashgot, greasemonkey (no universal scripts), ie tab, ie view, opera view, plain text to link, quicksum, quickproxy, searchbar autosizer, smartsearch, talkback, thumbs, webdeveloper.

Something there must be messing with things but can’t see how yet.

(Doesn’t happen in standard ff2 installation, only mine for some reason.)

Comment by stylo~, December 11th, 2006 at 4:43 pm
hey Klaus,

Thanks a LOT for your reply! adding tab to existing tabs works perfectly now :D

Tab closing/creating APIs might be good features to have? I’ve being copying netvibes.com’s tabs behavior with your plugin’s power :p now I have the tab creating feature with your help, and the final one is “tab reordering”, I’m going to try the interface’s Sortable plugin :)

Thank you again!

Regards,
- Eric

Comment by Eric, December 12th, 2006 at 9:27 am
Just an FYI – Using the dimensions plugin breaks the autoheight option on your tabs. There is no error, the tabs still work and animate. Only the fixed height doesn’t work.

Comment by Abba Bryant, December 20th, 2006 at 6:08 am
Great bit of scripting. Probably the nicest tab effects I have seen to date. The only thing keepng me from using it is that all divs are visible for an instant before the script kicks in. This bit of flicker makes things look a bit unstable. Currently I am using the following script which does not have this problem..

http://www.barelyfitz.com/projects/tabber/

Perhaps it can serve as inspiration.

Thanks for your hard work and have a great holiday!

Comment by Steven G, December 24th, 2006 at 3:28 pm
Steven G, this script is run by using jQuery’s $(document).ready(), which should be instantaneous. The only time you should see a delay is the first time you view the page, before the script file has been downloaded and cached by your browser. Try refreshing the page and see if there is still a delay. In that case, it may be that your cache settings have been changed from the defaults.

Klaus, great plug-in! I just discovered it about a week ago, and I love it. I have a quick question, however. I don’t know if this is intentional, but the hideClass seems to be applied upon page load in every browser, as expected, but the class is only used in IE when triggered, with display: none being applied to thereafter in other browsers. Here is line in question, number 403, from jquery.tabs-2.5.js:

toHide.addClass(settings.hideClass).css({display: '', overflow: '', height: ''});

This doesn’t seem to affect the printing of hidden tabs, but I like to nitpick. :D

Comment by Matei "Ambient.Impact" Stanca, December 27th, 2006 at 3:53 pm
FYI fxAutoHeight seems to break the script in IE 6 and below when combined like this:

$(’#container’).tabs({fxAutoHeight: true, fxFade: true, fxSpeed: ‘normal’});

Removal of fxAutoHeight resolves the problem and the tabs render normally. With it added to the script, the text all appears as one large block below the tabbed area.

Has this been reported yet?

Shane

Comment by Shane Graber, December 30th, 2006 at 2:45 pm
Ah, I see something like this was reported back in November: http://www.stilbuero.de/2006/11/05/tabs-version-2/#comment-9122

Shane

Comment by Shane Graber, December 30th, 2006 at 2:47 pm
Hello, I tryied to put the tabber on a site, but what I observe was that unless the whole page is loaded, the tabber shows all the tabs; this is not good especially if you have something below the tabber. What can I do to hide the other tabs until the whole page loads?

Comment by Adrian Voicu, January 7th, 2007 at 12:16 pm
Maybe you can add some way to choose the event that will trigger the tabs, like mouseovers or something.

Congratulations! Great Job!

Comment by Raphael Martins, January 8th, 2007 at 5:51 pm
Hi Klaus and thanx for these 2 jquery plugins (tab & history).

I think there’s a problem with the back button.

Go to the demo page http://www.stilbuero.de/jquery/tabs/ and try to click the first tab. It will take you here http://www.stilbuero.de/jquery/tabs/#section-2 . Now try to hit the back button and you’ll see that as though you will be taken to the main page http://www.stilbuero.de/jquery/tabs/ there is still displaying the second tab instead of the first.

I think there’s a problem with the history plugin.

This bug occurs on firefox 2, opera 9, ie 5 and ie 6 on windows.

Thank you.

Comment by Catalin Luntraru, January 9th, 2007 at 1:34 am
Author Comment

@Abba Bryant,

the dimensions plugin was overwriting a jQuery core function in an incompatible way which led to breaking the auto height option. This has been solved today – the latest dimensions plugin from SVN will play nice with the tabs.

@Matei Stanca,

I have to use CSS classes and reset inline styles to maintain printing of tab content in IE. In modern browsers I don’t need that, because overriding inline styles is possible with !important. Maybe it is cleaner and will simplify the style sheet if I use a class for all browsers. I will have a look into that in a future version. Besides, since jQuery 1.04 inline styles required for an animation are resetted after the animation is completed anyway.

Comment by Klaus, January 9th, 2007 at 10:01 pm
I’m having the same problem with disappearing tabs as listed above (http://www.stilbuero.de/2006/11/05/tabs-version-2/#comment-12304) except Firefox works fine and IE (6 and 7) on WinXP breaks.

A demo is here: http://fusion.uleth.ca/crdc/prototypes/noticeboard/

Comment by C Foss, January 12th, 2007 at 6:36 pm
I should mention, the tabs that are having problems are the 1 2 3 Next links, not the one that look like tabs.

Comment by C Foss, January 12th, 2007 at 6:43 pm
Will this work in asp.net? I tried adding to my asp.net pages, and the animations worked, but I could not get the tabs to display, they were just listed as bullet points.

Thanks

Comment by jason winn, January 18th, 2007 at 6:44 pm
Author Comment

@C Foss,

I saw you are using jQuery 1.1 with the Tabs – I need to update a few things to make Tabs compatible with 1.1, especially IE related stuff, so maybe that’s the reason. I will fix that tonight.

Comment by Klaus, January 24th, 2007 at 6:23 pm
Hi Klaus,

I can confirm CFoss’s comment. Tabs don’t work with jQuery 1.1. I see everything listed as bullet points as well in Firefox 2.0.0.1 running on WinXP Pro.

Comment by Achaiah, January 25th, 2007 at 4:01 pm
Author Comment

Tabs hasn’t been compatible with jQuery 1.1, so please update to the latest version. In addition, please update to jQuery 1.1.1 as there have been some significant bugs in 1.1 that have been fixed.

The latest Tabs (2.5.2) I have uploaded works fine with jQuery 1.1.1. Also and often requested: it allows you to hide tab content before initialization to avoid flash of content and I have also fixed flicker in Firefox that occured for simple tab switching without animation.

Comment by Klaus, January 25th, 2007 at 4:11 pm
Hi Klaus,

Nope, sorry still doesn’t work for me. I am using the interface.js library (v1.1) in addition to jQuery 1.1.1 so maybe that’s why it doesn’t work nicely together with tabs but I could have sworn I tried tabs.js standalone at some point and it still didn’t work. Any pointers?

Thanks.

Comment by Achaiah, January 25th, 2007 at 8:40 pm
did u find a way to load ajax content inside the tabs???

Comment by khelll, January 27th, 2007 at 5:58 pm
Author Comment

I’m currently working on building Ajax into Tabs…

Comment by Klaus, January 27th, 2007 at 6:58 pm
In Konqueror (I am using version 3.5.5) all sections are hidden, including the active one. If you click on a tab, the section appears, but immediately disappears again. This happens to all examples in your demo.

Comment by manafta, January 28th, 2007 at 2:54 pm
Hi Klaus, the update seemed to work for me. Thanks a bunch!

Comment by C Foss, January 29th, 2007 at 4:57 pm
Is the history plugin required to use the tabs? I don’t really need that functionality but if I leave out the history.js – I get a js error:

$.ajaxHistory has no properties

Thanks for the great plugin!

Comment by Jim, January 30th, 2007 at 3:59 pm
Author Comment

Jim, no it’s not. If you put it in, it will be autodetected and enable bookmarking etc. I fixed that bug and uploaded it.

Comment by Klaus, January 30th, 2007 at 6:39 pm
Is it possible to link (externally, or from another tab) to a tab with ajax content?

Comment by peat, January 31st, 2007 at 7:07 pm
Hi Klaus,
first of all thanks to providing this awesome script and tutorial! I have it all working except I can’t figure out how to change the height of the content area, even after consulting the documentation. I know it must have something to do with this line $('#container-7').tabs({fxAutoHeight: true}); but I can’t find it anywhere in the javascript and have no clue where to add it. (???I am not exactly a programmer) Any clues? If possible in baby language.

Thanks a million!
Dada

Comment by Dada, February 1st, 2007 at 1:59 am
Author Comment

Manafta: Unfortunately the animation module in jQuery 1.1 doesn’t work too well in Konqueror. I’d rather have that improved instead of patching the tabs. If you use jQuery 1.04 you should get better results.

Peat: Yes, the third tab of an Ajax tabs interface, e.g. its link, points to ‘#tabs-remote-3′ for example, so you can just link there. A full URL would look like: http://stilbuero.de/jquery/tabs/#tabs-remote-3 (if you follow the link you will see that the third tab of the Ajax tabs in the demo is highlighted).

Dada: I don’t understand what exactly you need to do. The fxAutoHeight option simply makes the tabs having a constant height (the height of the highest one). Maybe I need baby language too.

Comment by Klaus, February 1st, 2007 at 11:49 am
Hi, I have a question. On your example for the rotating tabs, the rotation stops on click but I want my tabs to stop automatically on the second rotation. Please help me. I am only an xhtml and css coder but I know a little Javscript. I’ve been trying to figure it out for 5 days and to no avail. Thank you.

Comment by Stylemo, February 2nd, 2007 at 11:01 am
Author Comment

I have added an example with limited rotation. Same URL.

Comment by Klaus, February 2nd, 2007 at 2:37 pm
Thanks a lot Mr. Klaus! Now I can really control your very nice tabs. I have one problem in Firefox though. As you see I’m using a select box on the same page with the tabs. My problem is that the select box closes or disappears when a rotation of the tab is triggered. How can I fix that? Thanks again and I’m looking forward for your help.

Comment by Stylemo, February 5th, 2007 at 3:47 am
i’ve just updated my homepage with the latest tabs-version. unforunatly, the callback isnt workin anymore :-(
i use following code to get some contents via ajax after the user switched to a tab:
$('#pages').tabs({fxSlide: true, fxSpeed: 300, callback: function(tabToShow, tabToHide) { var page = tabToShow.id; if(page != "comments" && page != "newcomment") $("#" + page).load("/ajax/photos.php?c=&page=" + page); } });

tried to replace my code with some kind of “alert(’blabla’)”, but it seems, that tabs is totally ignoring my callback code.

do you have any idea?

Comment by Manuel, February 5th, 2007 at 2:25 pm
Author Comment

I changed the callback system with Tabs 2.4 (see changelog). The former “callback” option has become “onShow”.

Apart from that, I also added Ajax tabs recently, thus I think you don’t need that anyway unless you have mixed tabs. If that’s the case I recommend you use “onClick” for your callback because that one gets called earlier than onShow.

Comment by Klaus, February 5th, 2007 at 3:10 pm
thank you for the reply.
next time, i’ll first have a look at the repository ;-)

Comment by Manuel, February 6th, 2007 at 7:53 am
btw: i’ve just noticed that the ajax request is sent everytime a tab is clicked. use something like the following to prevent this:
function(anchor, clickedTab, tabToHide) { var page = clickedTab.id; if(clickedTab.innerHTML.indexOf("loadingindicator.gif") > -1) { if(page != "comments" && page != "newcomment") $("#" + page).load("/ajax/photos.php?c=&page=" + page); } }
this code only sends the request if there is the loading-image inside of the tab. this example works with “mixed” tabs (some static and some ajax tabs)

Comment by Manuel, February 6th, 2007 at 8:22 am
None of the tabs worked in Safari for me. In fact, the content divs were not even visible.

Comment by vargaso, February 12th, 2007 at 11:16 pm
Author Comment

Vargaso, which Version of Safari are you refering to? By the way, I had the same problem after updating the Tabs and not clearing the cache.

Comment by Klaus, February 13th, 2007 at 12:06 pm
Author Comment

I don’t get it – works fine locally.

Comment by Klaus, February 13th, 2007 at 12:18 pm
Author Comment

Fixed.

Comment by Klaus, February 13th, 2007 at 12:36 pm
Hi! Great piece of code…

Is it possible to have nested tabs? If not, is it possible for the future?

Thx!
Mike

Comment by Mike, February 13th, 2007 at 9:59 pm
Author Comment

Of course are nested tabs possible. Mike has put together a nice page for the form plugin where history enabled tabs and (nested) tabs without history are combined…

Comment by Klaus, February 13th, 2007 at 10:08 pm
Thx! I just noticed that after downloading the zip file and seeing the file in there. You may want to check your demo pages as I’m not sure you have an active link to nested.html? I looked but maybe not hard enough.

Mike

Comment by Mike, February 13th, 2007 at 10:14 pm
It is possible to have a tabs in the bottom, left and right side. The current version only have a top tabs.

Tony

Comment by Tony, February 14th, 2007 at 9:43 am
Author Comment

For bottom tabs either change the order in your HTML or use absolute positioning, left and right side tabs are just a matter of CSS as well (use floats or absolute positioning).

Comment by Klaus, February 14th, 2007 at 10:23 am
Thank You Klaus. I will try.

Comment by Tony, February 14th, 2007 at 3:41 pm
Is there a way to have multiple nested divs? Something like div>div>div? I can’t seem to get that to work and I need to have my tabs on the left inside of a div to work properly.

Comment by Mark, February 19th, 2007 at 9:23 pm
Author Comment

Mark, do you need the ul on the left wrapped in a div? Or the tabs content? The latter is what the tabStruct option is for (see demo). What exactly does your HTML has to look like?

Comment by Klaus, February 19th, 2007 at 10:07 pm
Klaus,
Yes that’s exactly what I need, but I also need the fragment divs wrapped by a div. So essentially the construct should be div>div>div (I thought). You can see what I’m trying to do here: http://www.trinitybirmingham.com/news/

Comment by Mark, February 19th, 2007 at 10:16 pm
[...] extras y crear plugins que se aprovechen de sus características. Una muestra de ello es Tabs, un plugin que nos añade de forma no obstructiva una funcionalidad extra a las listas de elementos [...]

Pingback by Tabs 2.0, un plugin para jQuery | aNieto2K, February 20th, 2007 at 10:58 am
[...] Klaus Hartl – Stilbüro : Tabs Version 2 (tags: CSS javascript JQuery tabs plugin) [...]

Pingback by Webmaster Libre | links for 2007-02-20, February 21st, 2007 at 2:28 am
Klaus,
Any luck figuring out what the problem with my nested DIVs might be? The tabStruct option doesn’t seem to allow it to work correctly.

Comment by Mark, February 21st, 2007 at 3:08 pm
I am using your ajax tabs and I wanted to know how to make the calls synchronous.

Comment by Jo, February 21st, 2007 at 11:42 pm
Author Comment

Mark:

Tabs currently do not support multiple ul elements (additionally mixed with headlines in between), I’m sorry. But: You can build your own navigation and use triggerTab with these links while hiding the default navigation list. Works with history and all that, I’ve already done this and described it somewhere in the comments of one of the tabs plugin posts. Let me know if I can help.

Jo:

Synchronous calls are not supported either currently. Maybe it is sufficient to use the blockUI plugin instead? It’s not recommended to make synchronous calls anyway.

You could block the UI in the onClick callback and unblock it again in the onShow callback.

Comment by Klaus, February 22nd, 2007 at 11:29 am
Hi Klaus,

Thanks for the plugin. I intend to use it for my website. I have to admit I’m a newb though.
Could you please explain to me what part of the CSS I need to modify to center the tabs in the middle of the page? (as in the whole tab container)

Thanks in advance,
Hagen

Comment by Hagen, February 23rd, 2007 at 5:00 am
Author Comment

Do you want to center the tabs on top (that’s a bit tricky) or center the whole container?

Comment by Klaus, February 23rd, 2007 at 10:57 am
Is it possible to have a link that is located within Section 1 activate either the 2nd or 3rd sections?

When I try to link like this I get no action.

The link within section one looks like this…
Link from section 1 to section 2

The div ids on the sections look like this

Comment by Zachary, February 23rd, 2007 at 7:51 pm
Author Comment

Come on, if you want to post code you will have to encode HTML entities.

Comment by Klaus, February 23rd, 2007 at 8:09 pm
Hi, I appreciate the quick reply. I would like to center the whole container but would like the tabs to continue being on the left of the container. Also what is the proper way to change the width of the container w/o messing up the dimensions of it.

Thanks,
Hagen

Comment by Hagen, February 23rd, 2007 at 9:56 pm
Author Comment

For centering the container you need: #container { margin: 0 auto; width: 400px; }

Comment by Klaus, February 24th, 2007 at 3:07 pm
I need to set up some tabs (similar to tabs not exactly, is more like a list), but i need that the content loaded via ajax apeear inside another div not in the div that are the tabs, i dont know how to do it, can any1 help me?

thx in advance

Comment by sebastián, February 24th, 2007 at 11:51 pm
Some suggestions:
I know this can be done whitin jQuery but will be nice if this is a part of Tabs plugin:
1. Add a method to add tabs by example: $(’#container’).addTab(2);
2. The same – removing(clear) a tab: $(’#container’).removeTab(2);
3. A good options will be, if the tab has a property “closable” and if the user click an the close button, the tab will be removed.

Regards
Tony

Comment by Tony, February 26th, 2007 at 7:38 pm
Hi Klaus,

I am trying to setup your tabs with GoogleMaps and am having trouble. I’ve Googled and Googled and haven’t found anything related to my problem, but still.. If I missed something I apologize.

Here’s the problem: if I put a GoogleMap in one of the tabs, and the tab is focused initially, then the map works fine and shows up. However, if the GoogleMap is in one of the unfocused tabs, then what happens is (in firefox): the map area renders and you can even see a bit of the map in the top left corner but the rest of the area is gray. And for the life of me I cannot figure out why this is. In Internet Explorer, the map comes up but improperly centered.

Please take a look at these 2 examples:
http://www.webitwell.com/tabstest/
and
http://www.webitwell.com/tabstest2/

The only difference between these two pages is which tab is focused through the .tabs(tabNum) call. It is default in the first one (.tabs()) and 2 in the second one (.tabs(2)).

I can’t figure out what’s happening with the map.

Comment by Igor, February 26th, 2007 at 8:13 pm
Author Comment

Tony, good suggestions and you’re not the first to request that. I will soon start to completely rewrite Tabs (Tabs 3) and it will have these things.

Comment by Klaus, February 26th, 2007 at 10:27 pm
Author Comment

Igor, I know what you’re talking about. I had a really hard time while I was implementing Google Maps in tabs for Plazes. Have a look how it is done there, for example in the search (you can switch to the list tab and start a new search). The trick is basically to add another click handler to a tab which will recenter the map (I remember some more cross-browser magic were required, but that was because the map was resizable as well I think).

If you’re using the latest Tabs, you could also utilize the onShow callback for that.

The problem is that you just cannot initialize maps properly while they are hidden. I think Google either wants it to be that way or just sees no point in supporting that.

Comment by Klaus, February 26th, 2007 at 10:37 pm
How would I link to an anchor on the second tab’s content from a link in the content on the first tab?

Comment by Gunner, March 7th, 2007 at 7:49 pm
Got it to work:

link

Comment by Gunner, March 7th, 2007 at 8:39 pm
Author Comment

Gunner, use triggerTab for this. There’s an example in the demo.

Comment by Klaus, March 7th, 2007 at 8:47 pm
Thanks! Works perfectly!

Comment by Gunner, March 7th, 2007 at 10:05 pm
Hi Klaus,
thanks for this great jQuery plug-in.

I have a little comment/suggestion. I have noticed that when using a custom structure where there is a div wrapping the list of anchors (look at the below code example, it’s the div id="toc" , the plug-in doesn’t work.
The code:

[stripped, because invalid and unescaped HTML entities, Klaus]

Well, that’s all. Could you, please, confirm this doesn’t work?

It seems it’s because the plug-in looks for the first child of the container div.
The idea/suggestion is to have the flexibility for a little more customization (that is, to be able to wrap the anchor list in, at least, a div).

I hope I have explain myself. Excuse my english and thanks in advance.

Comment by Maniquí, March 7th, 2007 at 11:03 pm
Author Comment

If you want to post HTML code you have to escape HTML entities like &lt for < and so on. It can’t be that difficult. If somebody knows of a WordPress plugin, that does that automatically inside of code tags, please let me know.

Comment by Klaus, March 8th, 2007 at 10:38 am
Author Comment

Maniquí, yes, that doesn’t work. The tabStruct option is only for the tab content containers itself, but the unordered list on top is unaffected. Maybe I’ll take something like that into account for Tabs 3 (complete rewrite).

Comment by Klaus, March 8th, 2007 at 10:41 am
[...] I am going to use JQuery to create Tabs that will hold Subscribe, Archives, Search and contact information. The tabs will go on the Blue [...]

Pingback by My Retirement Project » Re-Design Update 2, March 10th, 2007 at 8:33 pm
is there any reason to limit the anchor list to one level of UL? I want to create tabs which are linked to a complex jdMenu, which define many (ajax) tabs. It works when replacing line 178:
var tabs = $('>ul:eq(0)>li>a', this); by
var tabs = $('>ul:eq(0) a', this);….

The second request I have is a way to triggerTab with the page id, not some sequence number.

Comment by Mark Overmeer, March 10th, 2007 at 9:42 pm
For what it’s worth, the default HTML structure example you have above does not work with the latest version of this plugin. I pulled my hair out for about an hour before discovering the problem.

Thanks for a great plugin! :)

Comment by Daniel Kinney, March 11th, 2007 at 11:57 pm
Great library. Thank you for your efforts. I ran into a few issues. I first made a 3 tab layout, for use as a multistep form. I wrapped the form tags around my .fragment divs, and I would get the tabs but no content. I took the form tags and placed them around the container div and it worked. This was great, except I am working on a nested tab layout, with the primary container having two divs, which are each to hold multi-step forms. By having the form tags around the child container, it again breaks the display of the primary tab set. Not quite sure how to handle that. Any ideas?

Comment by Cutter, March 12th, 2007 at 2:47 am
Author Comment

Daniel, I don’t know what went wrong for you, but as you can see on the demo, everything works fine.

Cutter, why don’t you just put the forms inside the containers?

Comment by Klaus, March 12th, 2007 at 10:39 am
Each form is a multi-step process, broken down to ‘areas’ which are each on separate tabs, with the totality of each tab’s contents being the submitted form. This is ideal for large forms, like employment applications or credit applications. I could do it in Flash or Flex, but would prefer an HTML driven layout.

If I place the opening and closing form tags within the container then the display breaks, showing the tabs themselves, but no content pane (the .fragment divs).

Comment by Cutter, March 12th, 2007 at 7:47 pm
Author Comment

Why don’t you use the form itself as container?

Comment by Klaus, March 12th, 2007 at 9:20 pm
Now that was cool! I’ve been doing this (web work) a long time, and I’ve never really thought of a form as a container element:) You JQuery folks are really making me rethink some things, and I like it! Thanks Klaus.

Comment by Cutter, March 13th, 2007 at 2:37 am
Hi Klaus,

Love the product, but I’ve been having some issues getting other jquery plugins to work within the tab containers. Specifically JCarousel. It works fine if you put it on your example page, but if you put it in one of the containers it breaks. JCarousel uses unordered lists to create the image carousel. Could that be the causing problems? I’ve included JCarousel in other plugins and it has worked fine.

Comment by Talat, March 14th, 2007 at 8:05 pm
Author Comment

Talat, do you have some demo online where I can have look at?

Comment by Klaus, March 14th, 2007 at 9:44 pm
Yeah, I had an issue applying Rounded Corners to the tabs, but only in IE (using 6.1, haven’t tried 7). The tabs would appear one on top of the other, instead of side by side. I’m sure this has more to do with the Rounded Corners code, but I haven’t dived too deep into it…

Comment by Cutter, March 15th, 2007 at 4:01 am
Let me try and copy this link in again:

Comment by Talat, March 15th, 2007 at 7:55 am
Author Comment

Talat, from what you send me I could only see that the element .jcarousel-clip has a height of 0, thus the list with images is not showing up. I think this is a problem with jCaroussel, but I couldn’t investigate further, because of the source being compressed. In addition the HTML wasn’t valid and there are too many things going on. To isolate the problem it would have been very helpful to test with Tabs and jCaroussel only.

Comment by Klaus, March 15th, 2007 at 9:25 am
great work! thx

Comment by dariusz, March 15th, 2007 at 11:42 am
Thanks a lot for this plugin !
Just a litle suggestion :
I added the possibility of naming remote tabs so the url becomes comprehensive by making the following changes :
// prepare remote tabs
…
var id = ‘tabs-remote-’ + (i + 1); becomes var id = “mnu”+this.id;
and in the tab definition I added the id attribute for <a> tag.
Do you find this update ok ?
Thanks

Comment by Hatem Belhasine, March 16th, 2007 at 4:35 pm
Author Comment

Hatem, yes, that seems reasonable to me. I’m about to add something like this, but the hash will not be based of another id (which is a little obtrusive if that id is just added for that purpose), but it will be based of the original link. E.g. a link like .../chapter_3.php will become #chapter_3 automatically.

But I still consider to add your modification as an option, because currently it isn’t possible to have two remote tabs in different containers, because the generated ids are identical. And with the above solution it isn’t always guaranteed two have unique ids either. That said, thanks for the suggestion!

Comment by Klaus, March 16th, 2007 at 6:05 pm
Thanks,
About basing the id on the original link, I think that the page name has to be transparent to the user. (sometimes for security reasons).
Another thing, I’ve created nested remote tab, It is ok. But I can’t generate an url to access directly to the nested tab (like url/#nestedid)
Please consider this functionnality. It’s very important.
Good Job.

Comment by Hatem Belhasine, March 16th, 2007 at 6:22 pm
Are there any plans to make Tabs gracefully handle the situation where the number of tabs exceeds the horizontal space given it? Maybe by scroll arrows on the left and right sides, and/or a drop-down menu on a side listing the tabs that couldn’t be shown? That would be incredibly helpful for my uses!

Comment by Matthew Lieder, March 17th, 2007 at 4:31 pm
Author Comment

Matthew, I’ll add that to the list for Tabs 3, I’m going to rewrite a lot of stuff. I like the idea of having scroll arrows, just like in Firefox. The rewrite though is not going to happen too soon.

Comment by Klaus, March 17th, 2007 at 5:06 pm
Thanks, I hope my anxiousness will help motivate you ;)

FYI, a couple others and myself have successfully incorporated your Tabs into a UI component for Qcodo (a PHP5 DAO/AJAX framework): http://www.qcodo.com/downloads/item.php/103. Its CSS has been modified to support bottom-aligned tabs too.

Comment by Matthew Lieder, March 18th, 2007 at 1:10 am
Is there a way to stop the tabs from briefly flashing/reloading flash objects on Firefox for the Mac when using the rotation version of the tabs?

Comment by Weavil, March 27th, 2007 at 6:44 pm
Love the script!!! I am just having a little bit of bugginess in safari. When you start clicking around to the different links, alot of strange behaviour occurs, multiple links will stay active or it will suddenly jump to the first link. My testing url is:

http://savacoolsecviar.com/fs_test.html

and I am using it in the left navigation (displayed in a block list instead of inline tabs)

I have narrowed it down that it is directly related to the history/remote js because when I disable that script everything else works fine.

Comment by Travis Dahl, March 29th, 2007 at 8:23 pm
is there anyway to build it on like change attr on the [a href] tag when

$(’#container’).disableTab(3); // disables third tab});
});

is loaded ???

or am i really really stupid and f*ng tired..

Comment by Rikard, April 3rd, 2007 at 4:03 pm
Klaus, could you elaborate on the “frequently requested enhancements and bugfixes” you added to the recent v2.7 release? It’d help me decide whether or not it’d be worth the effort to port my sites over to the new version.

Thanks!

Comment by Matthew Lieder, April 3rd, 2007 at 6:22 pm
Author Comment

Matthew, of course, there’s a post in the pipeline for that. I was planning to finish that tonight.

Comment by Klaus, April 3rd, 2007 at 6:30 pm
Klaus,

Your tabs are awesome, except for one thing… When using CTRL-MOUSE-WHEEL to scale text/site, your tabs are static (non-scaling). The text quickly grows too big for the tab. Am I missing something? If not, will you be looking into this for v.3?

thanks,
T

Comment by Thomas D, April 4th, 2007 at 4:23 pm
Author Comment

Thomas, this is a CSS issue solely. I provide an example style sheet to start with, but I simply cannot provide one that fits all needs.

Comment by Klaus, April 4th, 2007 at 4:41 pm
Hi, great jplugin.

a question, is it possible to disable ajax call for a particular tab?

example: remote: true, remotefalse=2

active axaj for all tab except for tab 2 (it read in the same document)

Thancks

Comment by Fabrizio, April 6th, 2007 at 11:31 am
I’m using this great plugin on a project and I’m having trouble with the flash of content (I’m using the latest version).

As you said, Klaus, “it allows you to hide tab content before initialization to avoid flash of content”. How is this accomplished – via CSS (the only part I’ve changed), I assume? It works on the demo just fine and I can’t see what difference between my CSS and the demo CSS that would cause the flash of content.

Thanks and great work!

Comment by Pat, April 16th, 2007 at 10:15 pm
Bug Report – jQuery Tabs + Frames (Within a frameset)

Windows XP SP2 – Firefox 2.0.0.3

Apologies in advance if I have posted this to the wrong place. I have tested in IE6, IE7 and Opera 9. Bug only in Firefox 2.0 on Windows XP. Haven’t tested any other versions of Firefox or Operating Systems.

Scenario.

We have 5 web pages:
1. frameset.html – A Frameset with 3 frames. TopNav, LeftNav, MainContent.
2. topnav.html – Top navigation page, rendered within TopNav.
3. leftnav.html – Left navigation page, rendered within LeftNav.
4. index.html – Main content index.html, rendered withing MainContent.
5. mypage.html – Additional content page, rendered within MainContent.

For this bug, we should be able to ignore both TopNav and LeftNav, neither execute any Javascript or contain any conflicting element id’s etc. So i’ll concentrate on the MainContent frame.

Upon load of the frameset index.html is rendered within the MainContent tab. jQuery, jQuery Tabs and jQuery effects are loaded. The “tab set” looks as though it has rendered correctly, but when you click to activate an inactive tab, nothing happens. No Javascript or CSS errors. If I then follow a link from index.html to mypage.html, where mypage.html contains a known working “tab set”, no CSS is applied to the “tab set”. It appears as it would with out any CSS styling. No Javascript or CSS errors.

If I view index.html outside of the frameset, no problems, likewise with mypage.html

This bug only seems to occur in Firefox 2.

I’m 99% sure this is a Firefox bug, but if anyone can shed any light or help in a ny other way please do get in touch.

Cheers

Comment by Matt Richards, April 17th, 2007 at 12:52 pm
Newbie here, my bad up front :)

Does anyone know if there is a way auto cycle through the tabs? Similar to how AOL, http://www.aol.com/, does on their home page? Basically what I want it to do is auto cycle through the “slide”, then when someone click on the tab it would bring them to the “slide”… otherwise it would continue to rotate from tab1 to tab2 to tab3 etc.

Any feedback or words or advice “related to the matter” would be greatly appreciated.

Sincerely
Tom

Comment by Tom, April 17th, 2007 at 8:27 pm
hi,

it’s a good work, i have 2 questions for you :)

- how can i call a personnal fonction when a tab is clicked ?
- how can i do if i want to add a tab when the tabset is already initialized ?

sorry for my english :)

eax

Comment by eax, April 20th, 2007 at 4:16 pm
Author Comment
Fabrizio,

mixed tabs are currently not supported, but it is on the list for Tabs 3 (with automatic detection).

Pat,

say you’ll have already attached the class tabs-container to the tab content divs. To hide them before initialization while ensuring graceful degradation, add a style sheet via JavaScript to the head (I found that using document.write voids some timing problems in Safari), which contains the following declaration:

.tabs-container { display: none; }

For example:

document.write('<style type="text/css" media ="projection, screen">.tabs-container { display: none; }</style>');

Tom,

a while ago I made a demo for rotating tabs.

Eax,

for firing a custom function on tab click you can use the onClick, onHide, onShow callbacks. There’s an example in the demo and also have a look at the documentation to find information about when each callback is executed.

Adding tabs is currently not supported, but it’s also on the list for Tabs 3. A workaround for now would be to add the required HTML for the new tab, uninitialize all tabs via unbind and re-initialize them.
Comment by Klaus, April 21st, 2007 at 9:40 am
RE: Bug Report – jQuery Tabs + Frames (Within a frameset)

After further investigation it appears that Firebug 1.0 was causing the bug not Firefox or the Tabs plug in.

Comment by Matt Richards, April 23rd, 2007 at 12:42 pm
To use nested AJAX, use remote: “true”

Then on one or all of the tabs could point to html file, and in that html file, you initialize another tab Div, it will work as another tabbed content. I wonder how many subtabs it can hold.

But, its been really cool script

Comment by line24, April 23rd, 2007 at 1:59 pm
sorry! my english is not good. my program need two tab. How do “tabs-nav a” use different background png file. thank you :)

Comment by alex, April 25th, 2007 at 9:26 am
Hello,

I just stared using this great plugin (Ajax version), but have come across a small annoyance. When a tab is clicked, the word “Loading” briefly appears in the tabs name. This changes the width of the menu item () and my whole menu seems to “jerk” or “jump” for a second. (My menu items are as long as the text within them – not fixed size.) This is very annoying, and I wish there was a way to turn this feature off. Any ideas?

Comment by Yuriy, May 1st, 2007 at 6:10 pm
Small bug in IE7 with tabs. Change CSS rule:
/* Skin */ .tabs-nav { list-style: none; margin: 0; padding: 0 0 0 4px; height:25px; /* Added */ }
No height causes the tab-container to render the border-top through the tabs in IE7 in some cases.

Comment by Craig, May 10th, 2007 at 1:57 pm
Hi,

I’ve noticed a small bug in Firefox. I’ve got the DIVs rotating but if you are typing anywher within the browser, say the Google Search Bar, each time the DIV is changed, it loses focus from the Google Search Bar and focuses on the page. I believe this is something to do with the $(this).trigger(’click’); function.

Any ideas on how to get around this? Doesn’t happen in Safari or IE 6/7.

Comment by Chris, June 19th, 2007 at 10:46 am
Hi Klaus,

I’ve noticed the same behavior. The library is wonderful but when autorotate changes divs, the firefox navigation bar loses focus and it’s a very frustrating experience to the user.

Comment by Mauro, June 20th, 2007 at 9:43 pm
[...] Klaus Hartl – Stilbüro : Tabs Version 2 [...]

Pingback by Lost in Anywhere » Tabs Version 2, June 21st, 2007 at 5:45 am
I wonder if it’s possible to add more tabs. I tried adding addition elements, but it seems to be not working. I’m not good ad scripting. Any help would be greatly appreciated.

Comment by gene, July 3rd, 2007 at 5:30 am
I’m having issues with this script not liking other javascript and css on my page.

Is there some way to assign the javascript and css to just the specific div so that it doesn’t upset the other scripts on the page?

cheers

Comment by Nathan Waters, July 6th, 2007 at 6:54 am
Compliments on great script!

I want to have only the tabs without the content of the tabs? And when you click on a tab, content appears. How do you do that?

Thanks in advance!

Comment by Marjan, July 31st, 2007 at 12:55 pm
Hi Klaus,

The tab script you provide is excellent, but I am trying to use it as a multi-level tabs, does your script actually support it?

I am attempt to do it at 4 level. main > subnav > subsubnav > subsubnav(selection box)

And I run into problem try to reset the tabs to go back to select the first item (just like you first load the page)for each tab instead of what I have left it from the last navigation?

Is there a way to do it?

many thanks in advance.

Comment by Lisa Yau, August 8th, 2007 at 6:32 pm
The tabs work fine, if you want to use your tabs. You can’t adapt it so you can use your own styled tabs.

Your own div lets say “tabnav id”, styles your tabs then you require container- div for it to reconise the tabs, but that would mean that all your content has to go inside of the div that styles the tabs because your content div will not work when there id a div below it, having to put all of the tabs and the content inside a personally styled div, which your code reconises buggers up the layout. It would be good if there is someway to seperate the code for tabs from the content so these can be styled individually, and are not reliant on 1 div for the whole process to work.

Comment by Stuart, August 9th, 2007 at 4:13 pm
Author Comment

Stuart, I don’t understand what the problem is. The tabs plugin comes with an external style sheet (theme), which you can customize as you wish. You can completely build your own if you wish. Even the class names that are used are configurable.

The given HTML structure is required for graceful degradation.

Comment by Klaus, August 9th, 2007 at 6:17 pm
Hi, thanks for this plugin!

I’m using the following markup:

Passo 1 Passo 2 Nome .... other li ... same structure as section-1

With this xhtml structure the script doesn’t work in IE6 and IE7 (I get a totally blank page), but works in Firefox 2. If I remove the extra ol and li tag and put in some simple text, it will works also in IE.
When I test in IE I get this error message from the Javascript console:

‘document.defaultView’ is null or not an object

Can anyone help me?

Thanks, Fabio.

Comment by Fabio, August 18th, 2007 at 4:32 pm
Sorry, I thought that if I had used xhtml code inside code tag it won’t be interpreted. I can I post the xhtml code I used?

Comment by Fabio, August 18th, 2007 at 4:34 pm
Klaus, would mind explaining a bit more about integrating Google Maps into an unfocused tab.

Like Igor mentioned from his comment, I’m getting the same results: my map is off-centered, etc. However, it’s fine when I have the map displayed within a focused tab.

Thanks!

Comment by Scott Rod, August 22nd, 2007 at 3:46 pm
Hi,

Thanks for the GREAT plugin! Awesome work!

But I’m having problems in making the remote: true option work. I keep getting a JS error: ‘innerHTML is null or not an object’. Both IE6 and Firefox2. My application is running struts and spring. Any ideas would be appreciated, thank you.

Comment by Tariq, August 28th, 2007 at 11:34 pm
I love your plugin, have used it for ages.
But I’m trying to upgrade to jQuery 1.4 and the plugin crashes when I first change tabs. Am I alone or is the plugin not currently compatible with jQuery 1.4?

Thanks!

Comment by Diego Alto, August 30th, 2007 at 6:44 pm
@Diego Alto: Latest download of Tabs plugin works mostly with JQuery 1.4 (with one exception: Scripts in Ajax tabs is not being executed anymore after loading an ajax tab) => So I went back to V 1.3.1.1

Comment by dpaessler, August 31st, 2007 at 12:02 pm
[...] Tabs version 2 ~ sistema de abas com diversos [...]

Pingback by Os 40 Melhores Plugins da jQuery para facilitar a vida do Desenvolvedor Web | PedroMenezes.com, September 11th, 2007 at 4:56 am
[...] jQuery Tabs Plugin – Quickly, and easily, build an accessible and unobtrusive tabbed navigation interface for your web site. Provides predefined (slide and/or fade) and custom animations on tab selection, callback on tab selection, autoheight, bookmarking. Use with the History/Remote plugin to fix the back button. (http://www.stilbuero.de/2006/11/05/tabs-version-2/) [...]

Pingback by 10 Über cool jQuery Plugins | Web Development With Invisible Window {iW}, September 25th, 2007 at 6:47 pm
I tried to look in all the posts but I couldn’t find how to create a new tab background. I get the concept of using css to position the background but any tips on how to create an image which will fit into the demo without much modification. Thanks.

Comment by Seth, September 26th, 2007 at 7:59 pm
I was a little quick to post…

I found this great resource Tabs Background Tutorial that really helps. Also check out the AlistApart.

Comment by Seth, September 26th, 2007 at 8:10 pm
Hi,
Does anyone figure out how to deal with google maps in tab other than first?

Comment by mixey, October 3rd, 2007 at 1:17 pm
The UI Tabs don’t work in a thickbox iframe.

Comment by Paymon, October 17th, 2007 at 4:42 pm
I can’t for the life of me, get working or find a working example of the tabs with history.

I’m using a current download. Jquery 1.2.1. There are no “history” keywords in ui.tabs.js that aren’t commented out.

Maybe i’m expecting the wrong behaviour. Click tab 2, the url hash will change to #fragment-2 etc.

Comment by Mesa, October 18th, 2007 at 7:00 am
Author Comment

In Tabs 3 history is not supported yet. History plugin needs overhaul.

Comment by Klaus, October 18th, 2007 at 10:42 am
Tabs 2 download is a 404.

Comment by Mesa, October 22nd, 2007 at 8:46 am
Author Comment

I fixed the link. It wasn’t a good idea of mine to silently replace Tabs 2 with version 3. Tabs 3 has its own demo now. More about it soon…

Comment by Klaus, October 23rd, 2007 at 12:25 pm

Klaus Hartl – Stilbüro - Klaus Hartl