Klaus Hartl – Stilbüro : Accessible, unobtrusive JavaScript tabs with jQuery

Accessible, unobtrusive JavaScript tabs with jQuery

May 13th, 2006

Category:: JavaScript,; Web Development,; jQuery

Here is a jQuery plugin that lets you create JavaScript tabs very easily – once you assembled the HTML with just one line of JavaScript code.

Starting with HTML the plugin relies on the following structure:

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

There is a div with an id (named container here) that holds an unordered list with anchors on top and some divs following. Each anchor in the list points directly to a section below represented by one of these divs (more technically spoken: the URI in the href attribute refers to the fragment with the corresponding id attribute).

This is quite common – think of a TOC – and works fine already without JavaScript. So clicking on one of the links will take you immediatly to the appropriate section. And thats why it is accessible and unobtrusive. The HTML itself is all natural, no need for extraneous elements added only for scripting purposes.

This is nearly it. To create the JavaScript enhanced tabs you call the function $.tabs with one or an optional second argument.

The first argument has to to be the id of the div containing the list and the sections each of which will become the content of the corresponding tab:

$.tabs("container"); // first tab on by default

That way the first tab is on by default. You can specify which tab has to be on first with the second argument (no zero-based index):

$.tabs("container", 2); // second tab on

I recommend to attach this initialization of the tabs to jQuery’s ready event, which is not exactly the same as the load event, in an external file:

$(document).ready(function() {
    $.tabs("container");
});

Here is the source code:

// tabs - jQuery plugin for accessible, unobtrusive tabs by Klaus Hartl
// http://stilbuero.de/tabs/
// Free beer and free speech. Enjoy!
$.tabs = function(containerId, start) {
    var ON_CLASS = 'on';
    var id = '#' + containerId;
    var i = (typeof start == "number") ? start - 1 : 0;
    $(id + '>div:lt(' + i + ')').add(id + '>div:gt(' + i + ')').hide();
    $(id + '>ul>li:nth-child(' + i + ')').addClass(ON_CLASS);
    $(id + '>ul>li>a').click(function() {
        if (!$(this.parentNode).is('.' + ON_CLASS)) {
            var re = /([_\\-\\w]+$)/i;
            var target = $('#' + re.exec(this.href)[1]);
            if (target.size() > 0) {
                $(id + '>div:visible').hide();
                target.show();
                $(id + '>ul>li').removeClass(ON_CLASS);
                $(this.parentNode).addClass(ON_CLASS);
            } else {
                alert('There is no such container.');
            }
        }
        return false;
    });
};

~~You can also download a complete sample, together with some nice CSS, or have a look at this sample live.~~Please use the latest version of the plugin: Demo and Download.

Enjoy!

Update: Tabs plugin revised

Update: Bookmarkable Tabs

Update: Tabs Version 2

Update: Support for (unobtrusive) Ajax

Update: Tabs 2.7: Flexibility

Comments disabled · Trackbacks disabled · Permalink

274 Comments

Comments feed

Very nice indeed Klaus. Thanks for your work here.

Matthew

Comment by Matthew Delmarter, May 13th, 2006 at 10:24 pm
Author Comment

Funny story: Sean, one of my co-workers at Plazes stumbled upon this plugin while searching for some inspiration – not knowing I wrote that thing. He liked it and instantly ported this plugin to Prototype.

Great Job! It’s quite interesting to compare the code. And the idea of making the back button work is really worth thinking about.

Comment by Klaus, May 17th, 2006 at 11:44 am
Nice plugin, very nice.

I had to replace the following though to make it work in the latest Firefox:
var re = /([_-w]+$)/i; var target = $('#' + re.exec(this.href)[1]);
with this
var target = $('#'+this.href.split('#')[1]);

It does the same thing though… right?

Comment by Cybolic, May 22nd, 2006 at 10:24 pm
This is great work, and just what I’ve been looking for.

Comment by Rob Winters, May 23rd, 2006 at 8:23 am
Author Comment

Cybolic, in which version of Firefox did the error occur?

Right, your code has the same result here, because there may only be one ‘#’ in an URL and this fragment identifier has to be last in an URL. this.href.split('#')[1] therefore always returns the correct part.

Comment by Klaus, May 23rd, 2006 at 9:48 am
Nice work! I had some issues with switching tabs. So look how i make it work for me. Sometimes person drag the mouse over tab. And notnig change except the tab get ‘on’ class and we have two ore more tabs that are on. It is good to think abot that.

So i changed :
$(id + '>ul>li>a').click(function() { .. });
to:
$(id + '>ul>li>a').onemousedown(function() { ... }); $(id + '>ul>li>a').click(function() { return false; });

So at the moment I press the tab it swithes to the right section.

Comment by Konstantin Dankov, May 26th, 2006 at 12:04 pm
Author Comment

Konstantin, thanks for the hint.

But I see one problem with your solution: It takes out all the people who use the keyboard for navigation. The click event – although it doesn’t sound like that – catches both a mouse click and an activation via keyboard.

You can’t easily fix this, because an additional keypress event would also fire every time the link gains focus by using the tabulator key for instance.

I will think about another solution.

And by the way: Do you really mean onemousedown instead of onmousedown (remind the ‘e’), or was it just a typo here? The event with the e is fired only once.

Comment by Klaus, May 26th, 2006 at 2:32 pm
It was just a typo. :)

I will use the keypress event.

Keep up the great work!

Comment by Konstantin Dankov, May 29th, 2006 at 8:45 am
This plugin is very helpful! I’m currently using it to make a multi-panel admin page, with different ajax-forms on each tab. For the CSS, I made a few modifications to the example (maybe someone will find it useful):

You can emulate focus by setting non-selected tabs as a lesser color, hover tabs as a lighter color, and selected tabs with bold tab-titles. I put in borders to make it more obvious what tab is being used; the section-? div’s have all sides borders, and the tabs have left, top, and right borders with a -1px bottom margin (zindex>1). This gives the deception that the tab is connected to the content div below.
.anchors a { display: block; position: relative; top: 1px; border: 1px solid #aaaaaa; border-bottom: 0; z-index: 2; padding: 2px 9px 1px; color: #000; text-decoration: none; margin-bottom: -1px; } .anchors .on a { padding-bottom: 2px; font-weight: bold; text-decoration:none; color:#000; } .anchors a:focus, .anchors a:active { outline: none; /* @ Firefox 1.5, remove ugly dotted border */ } .anchors a:hover, .anchors a:focus, .anchors a:active { background:#e5ffd5; border: 1px solid #666666; border-bottom: 0px; } .anchors .on a, .anchor { background: #ddffcc; } .anchors .on a { border: 1px solid #666666; border-bottom: 0px; } .anchors .on a:link, .anchors .on a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ cursor: text; } .anchors a:hover, .anchors a:focus, .anchors a:active { cursor: pointer; } .anchor { padding: 10px; border: #666 solid 1px; } .anchor a { cursor:pointer; font-weight: normal; text-decoration:underline; color: #000; }

Comment by Brian Burg, May 31st, 2006 at 2:38 pm
Great work. Replaced the old easytoggle with this on BakeSale.

Comment by Matti Putkonen, June 6th, 2006 at 8:18 pm
So sad, that You made this plugin… I’ve to change my old, ugly toggle()-based javascript in my formGenerator :P
Thanks! :)

Comment by TeeCee, June 8th, 2006 at 5:36 pm
[...] Klaus Hartl – Stilbüro : Accessible, unobtrusive JavaScript tabs with jQuery Tabs that degrade nicely, with a simple JavaScript API to access them. (tags: javascript ui) [...]

Pingback by Labnotes » Blog Archive » links for 2006-06-09, June 10th, 2006 at 12:57 am
[...] Klaus Hartl – Stilbüro : Accessible, unobtrusive JavaScript tabs with jQuery (tags: accessibility javascript tabs) [...]

Pingback by Kevø X Thomson » Blog Archive » links for 2006-06-12, June 14th, 2006 at 9:54 am
Great work! I was up an running in no-time. How would you recommend activating a tab via javascript? I understand how to set the default tab, but I’m interested in switching tabs programmatically.

Comment by David Koscinski, June 15th, 2006 at 5:32 pm
Author Comment

David, there is a click event attached to each tab’s anchor. If you want to switch tabs programmatically, you can use jQuery’s trigger() function to fire the click event and simulate a click on the link.

Say you want to activate the third tab:
$('#container-2>ul>li:eq(2)').find('a').trigger('click');

That’s it. I have added this to the sample page.

Comment by Klaus, June 15th, 2006 at 6:29 pm
[...] I have revised the jQuery tabs plugin, so that it conforms to the jQuery plugin construct. To create the tab interface you now have to call the tabs function in a jquerish manner: [...]

Pingback by Klaus Hartl - Stilbüro : Tabs plugin revised, June 18th, 2006 at 6:58 pm
Really nice. Is there a way to directly link to a cerain tab? (ie. like /index.html#tab1 or something to that effect) If that could be accomplished, this could just be what I’ve looked for for the past nine months.

Comment by shinmai, June 27th, 2006 at 1:07 pm
Author Comment

Shinmai, yes there is. I already implemented that but have not yet posted an update (apart from the jQuery mailing list): Tabs 1.1 – retrieve active tab from hash in URL.

Please be aware that this version uses the more jQuerish syntax. If you need a clean JavaScript file, please tell me.

Comment by Klaus, June 27th, 2006 at 1:30 pm
[...] A fellow named Klaus has created a nifty little plugin that creates accessible unobtrusive javascript tabs using jQuery. [...]

Pingback by 15 Days Of jQuery : jQuery Tabs, June 27th, 2006 at 3:52 pm
[...] Some further enhancement for the tabs plugin: the ability to bookmark a tab. It’s already in the demo for quite a while but I had not yet posted it (apart from from the jQuery mailing list). [...]

Pingback by Klaus Hartl - Stilbüro : Bookmarkable Tabs, July 13th, 2006 at 8:11 pm
I re-wrote this script to get rid of the flicker once the browser tries to hide the div’s. I’m not a fan of stuff that hides in front of the user.

Of course this requires the divs (tab content) to be given a css value of display:none from the get go. ( .anchor{display:none;} )

$.tabs = function(containerId, start) { var ON_CLASS = 'on'; var id = '#' + containerId; var i = (typeof start == "number") ? start - 1 : 0; $(id + '>div:eq(' + i + ')').css({display:"block"}); $(id + '>ul>li:nth-child(' + i + ')').addClass(ON_CLASS); $(id + '>ul>li>a').click(function() { if (!$(this.parentNode).is('.' + ON_CLASS)) { var re = /([_\-\w]+$)/i; var target = $('#' + re.exec(this.href)[1]); if (target.size() > 0) { $(id + '>div:visible').css({display:"none"}); target.css({display:"block"}); $(id + '>ul>li').removeClass(ON_CLASS); $(this.parentNode).addClass(ON_CLASS); } else { alert('There is no such container.'); } } return false; }); }

Comment by cody lindley, July 27th, 2006 at 5:10 pm
Author Comment

Cody, your change is of course reasonable. To let the tabs still be accessible you should add the style sheet with that display: none; with JavaScript! Otherwise users with JavaScript disabled won’t see anything of the tabs content.

Comment by Klaus, July 28th, 2006 at 8:49 pm
I’m looking for something almost like this solution, but that includes the ability to rotate the content with crossfade on a timer.

Comment by Harvey Ramer, August 3rd, 2006 at 12:41 am
Hello and great work indeed!
Works like a charm, but I can not figure out how to make a link pointing to #section-2 inside the #section-1 ?
What I mean is that the user can press >>next and automaticly come from #section-1 to #section-2 without pressing the tab ?
Possible ?

Regards,
Vicotr

Comment by Victor Tzar, August 7th, 2006 at 4:53 pm
Author Comment

Victor, there is an updated version of this plugin – there you can find, among other improvements, an example of how to switch a tab programmatically. If for example your link to switch to the next tab has an id “next”, then the following snippet should do the trick:

$('#next').click(function() { $('#container-1>ul>li:eq(2)').find('a').trigger('click'); return false; });

Let me know if you would like to have that hidden away in an easy to handle jQuery function so you could write something like $('#container-1).activateTab(2); – I’m starting to think that this is an useful addition.

Comment by Klaus, August 8th, 2006 at 9:50 pm
This is great – I’ve just discovered jquery and have been looking for various solutions based on it. I’m not much of a javascripter, so I’m wondering if it’s relatively easy to add a timeline that would cycle through the tabs – say, show each tab for 3 seconds then stop back at the first, essentially giving a preview of each?

Comment by rolf, August 23rd, 2006 at 1:56 am
Hi,

These tabs are great, just what I need, exept I cant get them to work in Firefox, it only works sometimes. I saw a comment in this post about it, but I have tried that with no luck.

Anyone else having problems getting it working in firefox 1.5.0.5

Thanks,

Andrew

Comment by Andrew, August 24th, 2006 at 2:00 am
Great work. But i am facing a problem and hope you would be able to help me… how can i select the tab by typing the tab id on browser address bar and can i get the tab id also on address bar when i click on it. like http://localhost/prod/retail/index2.html#fundselector_links2

Comment by Harpreet, August 29th, 2006 at 9:57 am
Author Comment

Andrew, I think your problem is solved with the newly released Version 1.0 of jQuery. In Firefox the ready event was under certain circumstances fired before the DOM was ready which can cause the tabs not to initialize properly.

Harpreet, please have a look at my post Bookmarkable Tabs, everything you need to know is explained in detail there.

Both of you should get the latest version of the tabs plugin.

Comment by Klaus, August 29th, 2006 at 7:34 pm
I noticed an issue with the plugin that i’m having when i set it up as well. On the section with just the slide, it appears that the content is actually sliding outside of the containing div. On my version i could only solve this problem by setting the class .fragment to have a specified height, and attempting to use height: 100% was no help. any ideas on how to make sure the div height matches the content?

Comment by Kit Churchill, September 12th, 2006 at 1:50 am
I am trying to use your tabs javascript to do just like ABCNews.com does with their top stories…have it rotate through the top 3 stories automatically (every 4-5 seconds)…with the tabs at the top clickable to stop the animation. What I can’t get it to do is load the text inside the div correctly without having it look like it has an ugly background under it. Once I can get it to switch tabs and keep them looking pretty, I need to figure out how to automate it to switch tabs every 4-5 seconds unless someone clicks a tab. Is this possibly the wrong plugin to be trying to manipulate?

Comment by Matt, September 25th, 2006 at 10:42 pm
Author Comment

Matt, I don’t see the problem here. Just use setInterval. You can also use the handy triggerTab function I added recently.

Such a circle funtionality has been asked for sveral times so I ~~will~~ put up a demo for that.

Comment by Klaus, September 26th, 2006 at 8:58 am
Im trying to use the callback function and it seems the callback is called 2 times when you switch tabs, the second time its called the htmldiv object itself is passed not the id names of the div.

I also need to pass options with each tab to the function which is problematic with this solution, any ideas?

Comment by Richard Thomas, September 28th, 2006 at 7:15 pm
Author Comment

Hi Richard, I cannot reproduce the callback function being called twice. Can you either tell me in which browser that occurs or provide a link where I can have a look?

That the div objects themselves are passed to the callback function is by design. What would you do with the id? In most cases you would call document.getElementById to get a reference to that element, so I pass in the reference immediatly. If you need the id, you can easily get it from the object.

As for the options I have no solution that is not an ugly hack at the moment. Couldn’t you just determine these options by which tab was clicked inside your callback function?

Comment by Klaus, September 29th, 2006 at 6:46 am
Hi, I like your plugin.

I would like to be able to have different background images for the tabs. That you just name as the sections. eg. section-1-on.gif, section-1-off.gif. I tried to add this but didn’t have any luck. I guess I have to study jQuery a little bit more. Thanks again for a great plugin!

Comment by Eskil, September 30th, 2006 at 12:40 am
Author Comment

Eskil, that is simply a matter of CSS. You don’t need jQuery for that.

Comment by Klaus, October 1st, 2006 at 6:34 am
But then I would have to add an ID tag to all the anchors? I would like to have the images dynamicly loaded depending on the section name in tag. Is this possible?

Comment by Eskil, October 2nd, 2006 at 2:38 am
Thanks for the rotating tabs demo! I’m getting closer to my goal. I had tried to combine your tabs with Matt Oakes slideshow, to get a number of tabs each containing some short text and an image slideshow, but found that Safari would kill the slideshow when a tab was clicked. Any hints as to how you would approach that?

Comment by Rolf, October 2nd, 2006 at 6:15 pm
Hi, Thanks for this great plugin.

I would like to know if it’s possible to align tabs to center.

Comment by Sahar, October 7th, 2006 at 12:43 am
This works great, except,,,, when more than one row of tabs is required. I am finding the second row starts to the right of the first tab. When another tab in the first row is selected the first tab on the second row moves to the right of the selected first row tab. This can then create a third row. Any ideas?

Comment by Greg Soulsby, October 12th, 2006 at 9:55 am
Hi Klaus,
Thanks a lot for the plugin, it’s great.
Just as an interesting experiment, I rewrote the plugin in dojo (although with a helper function “testTagType”), this is yet another showcase for how much shorter and readable jQuery code is.

Cheers:

testTagType = function(node, tagName) { if( node.tagName != undefined && node.tagName.toLowerCase() == tagName.toLowerCase() ){ return true; } else { return false; }; }; tabs = function(tabholder, start) { var ON_CLASS = 'on'; var i = (typeof start == "number") ? start - 1 : 0; var tabholder = dojo.byId(tabholder); for(var i=0; i

Comment by Christian Storgaard, October 25th, 2006 at 1:15 am
Hi Klaus,

i just found out the hard way that the Javascript file that is used on your demo page differs from the one that is available for download.

The custom structure example doesnt work with the tabs.js that can be downloaded, but just with the one that is included into the demo page. The file used on the demo has a last-modification date of 2006/26/10, while the one that can be downloaded has been modified on 2006/10/20.

I thought u might want to fix that ;)

/Gunnar

Comment by Gunnar, October 26th, 2006 at 2:59 pm
One more thing.

When using the custom structure the tabs-script is also very greedy and will display:none all other divs that fit the structural rules provided in the script (ie >div>div) and not just the divs that have the class fragment.

Comment by Gunnar, October 26th, 2006 at 3:47 pm
Author Comment

Gunnar,

1) Sorry about that, I seem to have forgotten to upload the latest file.

2) That is also the case with the default structure. The fragment classes are solely used for styling purposes, but not in the plugin itself. If you need other divs as siblings of the tab containers, you could adjust the selector to >div>div.fragment.

Comment by Klaus, October 26th, 2006 at 9:09 pm
i have some troubles to fill the content dynamicaly when i click a tab.
ie. i have 2 Tabs and everytime i click on the tab it should render random Text
in the container. But it changes the text only when i click on the tab twice
(no doubleclick)
Here is my code:
$(document).ready(function() { $('#container').tabs({fxFade: true, fxSpeed: 'fast'}); $('#mylink-1').click(function() { $("#section-1 > div").html(randomText()); }); $('#mylink-2').click(function() { $("#section-2 > div").html(randomText()); }); });

Comment by Alex, October 30th, 2006 at 5:24 pm
Author Comment

Hi Alex,

I assume that #mylink-1 and #mylink-2 are tabs on top. If so I further assume from your code snippet that these functions are called to early, while the animation is still in progress. That may cause the trouble.

Fortunately the tabs plugin also provides the possibility for defining a callback function to be executed after the animation is done. You could then prefill the hidden tab with random text, so that the text is already there while that tab is fading in the next time.

The callback takes two arguments, the first one is the div holding the tab that is about to be shown, the second argument the one that gets hidden.

Try this (makes your code shorter as well):

$('#container').tabs({ fxFade: true, fxSpeed: 'fast', callback: function(visible, hidden) { $('>div', hidden).html(randomText()); } });

Comment by Klaus, October 30th, 2006 at 10:48 pm
[...] Klaus Hartl – Stilbüro : Accessible, unobtrusive JavaScript tabs with jQuery (tags: jQuery javascript plugin tabs css) [...]

Pingback by links for 2006-10-02 at willkoca, October 31st, 2006 at 11:30 pm
I need to navigate and do a bunch of validation on other form fields when a tab is clicked. Is that possible using jquery tabs?

Comment by Anuj Anand, November 1st, 2006 at 6:27 pm
Author Comment

Anuj, yes that is possible. You can specify a callback function to be executed after tab switching:

$('#container').tabs({ callback: function(tabToShow, tabToHide) { // do something } });

I’m working on the documentation for all the updates at the moment.

Comment by Klaus, November 1st, 2006 at 10:54 pm
Hey, I’m just having a problem here, is there any way to deinitialize the tabber. I’m trying to do Dynamic tabs ( on the fly deletion and addition ), but I’m having a problem with calling .tabs multiple times. So i’m just curious if it’s possible?

Comment by Roberto, November 2nd, 2006 at 8:07 pm
Author Comment

Roberto, yes, jQuery has a method to unbind event handlers. Just try:

$('#your-tabs>ul>li>a').unclick();

Comment by Klaus, November 2nd, 2006 at 8:34 pm
Roberto or Kluas:
I am also looking to dynamically add tabs. Do you have a snippet of code to illustrate that?

Comment by Bantoo05, November 2nd, 2006 at 10:48 pm
[...] 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. [...]

Pingback by Klaus Hartl - Stilbüro : Tabs Version 2, November 6th, 2006 at 11:19 am
Hey Bantoo05,

here’s an example of adding a tab dynamically.
1: Create your new tab:

anchor = document.getElementById(”EntirePageTabber_anchor”);
newLi = document.createElement(”li”);
newLink = document.createElement(”a”);
newText = document.createTextNode(name);
newImg = document.createElement(”img”);

set whatever attributes you need,
append each to each other until you append the newLi to the anchor.

Then call
$(’#your-tabs>ul>li>a’).unclick();

and then reinitialize tabs.
that’s it,
still having some trouble reinitializing on a remove, but that’s how I’ve
been adding them.

Comment by Roberto, November 7th, 2006 at 7:26 pm
First of all, i love the script!
But when i unpack the ZIP on my website (not open for public yet), and visit the demo page with Internet Explorer 6 i get a javascript error on the first load.
When i reload the page, it’s gone …

When i look at your demo page with the same browser, i don’t get an error …

My error says:
Line: 42
Char: 21
Error: ‘null’ is null or not an object
Code: 0

I hope you can help me …

Comment by Knalpiep, November 16th, 2006 at 5:37 pm
Author Comment

Hi, there is a bug in jQuery 1.03 that causes that error. Please use jquery-latest.js for the time being. I have also uploaded a new ZIP file with it.

Comment by Klaus, November 16th, 2006 at 6:31 pm
Thanks for the fix!
It’s really a great script …

But what do you mean with “for the time being” ?

Thanks again.

Comment by Knalpiep, November 17th, 2006 at 8:55 am
Author Comment

With that I meant until the official Version 1.04 or 1.1 of jQuery is released.

Comment by Klaus, November 17th, 2006 at 9:17 am
Hi,

i’ve got an issue with Firefox 2.0.
The ul > li is presented like a classic ul > li
and all of the tabs are displayed once the page is loaded.

The code works perfectly with IE.

Any clue ?

Thanks,

Comment by Nerique, November 17th, 2006 at 12:10 pm
Ok, great.
Thanks for the great support!

Comment by Knalpiep, November 17th, 2006 at 12:13 pm
Author Comment

Hi Nerique,

no, from your description alone I can’t tell anything. Sounds like a CSS issue to me.

Comment by Klaus, November 17th, 2006 at 12:46 pm
First of all a little bug.

From your example:

$(’#container-1′).tabs();

Doesn’t work on IE 6 + Windows 2000

You should add an “option”.
eg.:
$(’#container-1′).tabs({fxSlide: true});

And now some question:

1. I need to create disabled tabs. I have created a class to style the tab, added it on li tag and removed the a tag. Is there a better way to do this ?
2. Many other scripts to create tab panes include an xp style that is very cool. Has Anyone created the appropriate css to do it with this plugin ?

Thanks in advance.
Bye.

Comment by Dave, November 28th, 2006 at 3:55 pm
Hi there,

I’m using your great javascript, but i’m experiencing some problems.
I was wondering if i can e-mail you with some source code and my problems.
I cannot give you a link, since it isn’t online yet.

I hope you’re not offended in any way.

Thanks.

Comment by Knalpiep, November 28th, 2006 at 8:15 pm
Author Comment

@Dave
I have fixed that bug in IE, a new version is uploaded. Currently there is no option to disable a tab. The way you did it sounds reasonable to me. I think I’m going to add the possibility to disable a tab, but I have no time to do it right now.

@Knalpiep
Of course I’m not offended in any way, why should I. You can send me an email, but don’t expect too much and be patient.

Please understand that I have very little time, which would get worse if I’d try to fullfill every single request that arrives in my mailbox or via comment in my blog. I’m still trying to be helpful whenever possible, but it’s likely that I cannot solve all of your problems.

Comment by Klaus, November 28th, 2006 at 10:41 pm
Author Comment

Good news, I have just uploaded Tabs version 2.5, it has support for disabling and enabling tabs. More information in the changelog.

Comment by Klaus, November 30th, 2006 at 11:41 am
Now this plugin is almost perfect.

I have two suggestions for you to make it absolutely perfect.

1. try to eliminate the IE specific css class (or store it in a unique css).

2. a better/nice default graphic.

Thanks in advance.

Bye.

Comment by Dave, November 30th, 2006 at 4:08 pm
Author Comment

Dave, thanks!

What do mean with IE specific css class? There’s no such class, do you mean the whole style sheet?

Better graphic is on my list for a long time now. I’ll tackle that next!

Comment by Klaus, November 30th, 2006 at 4:45 pm
Yes, I mean the tabs-ie.css (minor problem) and the portion of code:

body {
font-size: 100%; /* resizable fonts */
}

written directly in the html.

Other js scripts to create tabs don’t have this “problem”.

Thanks in advance.
Bye.

Comment by Dave, November 30th, 2006 at 5:04 pm
Author Comment

Dave, the embedded CSS is not meant to be part of the plugin. It’s just for the demo. That’s why I did not put that into the external style sheet. I think it’s not a good idea to set global styles a la body font-size in the plugin’s style sheet as it most probably will interfere with the style sheet used for a page.

tabs-ie.css is separated and included via Condtional Comments because it uses some invalid CSS properties and I didn’t want to invalidate the main style sheet just because IE is such a stupid browser. But I’ll take that concern into account when doing the nicer design.

Comment by Klaus, November 30th, 2006 at 5:16 pm
Hello,

I love the tabs! Though, I am getting a strange javascript error/alert in IE7. It says the container was not found, and then proceeds normally after clearing it. Have I missed something?

Thanks!

Jared

Comment by Jared, December 7th, 2006 at 1:17 am
Author Comment

Jared, do you use the latest version? I said it before to others, from such a description alone I cannot tell anything. Maybe your HTML is not correct.

Comment by Klaus, December 7th, 2006 at 1:49 pm
Hi Klaus,

Thanks for your reply. I’m using the latest version. Is it possible for us to take a closer look together?

The site is:
http://www.barnoire.com/

And the pages with the js alert issue are:
http://www.barnoire.com/about.html

Click on the, Raphael Groten, Scott Lamer, Vision, Materials tabs for the error.

Best,

Jared

Comment by Jared, December 11th, 2006 at 1:28 am
Author Comment
Jared, I cannot reproduce the error. By the way, you don’t need all that code from the demo. In your case the following is sufficient:

$(function() { $('#container-1').tabs(); });
Comment by Klaus, December 11th, 2006 at 11:13 am
Klaus,

Thank you for checking. I meant to simplify that code but forgot. It is strange that you can’t reproduce the error. It worked flawlessly in IE for you?

Best,

Jared

Comment by Jared, December 12th, 2006 at 3:00 am
this is a great plugin. I am new to jquery, but people like you are helping to show me how awesome it is. Your tabs are great.

Comment by Josh Giese, December 13th, 2006 at 6:47 pm
[...] Accessible Javascript Tabs [...]

Pingback by Web Expose » JQuery Javascript library, December 18th, 2006 at 3:16 pm
I think the jQuery tabs work great EXCEPT every time I click on a tab in IE 7 the text display changes. I have my monitor set to render clear-type, and before I click on anything, the type looks fine, but as soon as I click a tab it’s standard browser type which is no good. I have to hit page refresh to get the text back to clear-type display. Even if I remove all the CSS and only have the JS files it still does it. I figure it’s something in the JS file but I can’t find it. Any ideas? I know it isn’t the CSS files as I’m using a stylesheet I’ve been using for a while and I’ve never seen this problem with IE 7. Any CSS workarounds anybody?

Comment by Stephen Jensen, January 10th, 2007 at 10:42 pm
It would be useful if the “remote” option looked at the url in the anchors
to decide if the reference was local or external, i.e., check to see if it starts with “#”. That way we could mix tabs using embedded content with tabs using remote content.

Comment by James Norton, February 1st, 2007 at 12:24 am
Author Comment

Mixing is not supported yet. That would require a complete rewrite with that in mind and that will happen, but not too soon.

Comment by Klaus, February 1st, 2007 at 12:00 pm
Hi there,

Is there any good way to get external webpages into a tab?..

Kindest regards, Mikael.

Comment by Mikael, February 6th, 2007 at 7:33 pm
Author Comment

Use iframes or this technique.

Comment by Klaus, February 6th, 2007 at 7:55 pm
If i hav a limit width for the tabs and all my tabs will not fit in a row, will it automatically create a 2nd row of tab beautifully?

Comment by Jason, February 7th, 2007 at 6:20 am
Author Comment

It will create a second row, but it’s not very beautiful.

Comment by Klaus, February 7th, 2007 at 8:42 am
So i can´t use the “remote” for fetching external webpage into a tab?..
Is there no easy way to achieve this?

Comment by Mikael, February 8th, 2007 at 10:58 pm
Author Comment

You can’t use Ajax to load external pages anyway… For that you have to implement a proxy on your own server that gets the data from the external server and sends the result back to your Ajax request. Google “cross domain ajax”.

Comment by Klaus, February 9th, 2007 at 1:50 am
Still wondering why the fonts display differently when I click the tabs. Is there something in your .js files that changes the font display?

Comment by Stephen Jensen, February 12th, 2007 at 4:54 pm
Author Comment

I will have a look into that. Somebody else reported an issue with cleartype as well.

Comment by Klaus, February 12th, 2007 at 6:48 pm
Hi there again,

I got the iFRAME working using this jQuery plugin:
http://33rockers.com/2006/12/05/unobtrusive-iframe-with-jquery/

But is it possible to load the TAB only when i click on it. As it is now, every tab´s content is loaded directly.

Kindest Regards, Mikael.

Comment by Mikael, February 15th, 2007 at 11:56 am
The iframe wouldnt work correctly in both firefox and ie, so im forgetting that idea.

When i try to disable the tabs, to make room for the .triggerTab function, i can´t get the container div to fill up the whole wrapper div. I get like 10px of white space at the top, even if i remove the css. Is there anything in the Script that makes this white space?

Thanx for supergreat support and a super plugin!

Comment by Mikael, February 16th, 2007 at 1:17 am
Author Comment

The script doesn’t set any margins. That must be some issue with your CSS. Try validate your HTML first.

Comment by Klaus, February 16th, 2007 at 6:18 am
Are there any known issues with the Tabs plugin and the newest release of jQuery (ver 1.1.1)? Looking to upgrade my jQuery code and was curious if anybody has had issues.

Comment by Greg, February 20th, 2007 at 8:37 pm
Author Comment

I don’t know of any issues. The demo runs with 1.1.1.

Comment by Klaus, February 20th, 2007 at 9:43 pm
I was modified:

name=”section-1″ href=”#section-1″ tabindex=”1″>Section 1
name=”section-2″ href=”#section-2″ tabindex=”2″>Section 2
name=”section-3″ href=”#section-3″ tabindex=”3″>Section 3

It work not good with IE. Firefox ok :)

Comment by Tambietcuocdoi, February 21st, 2007 at 10:48 pm
Author Comment

The problem is that in IE the name and id attribute share the same namespace, thus if you have an element with a name attribute that is the same as the id of another element this will cause problems: IE returns whatever comes first in the source when using document.getElementById. This is fixed in the latest jQuery nightly build. Or just choose other values for the name attributes on the links.

The name attribute is deprecated for anchors anyway, do you really need them?

Comment by Klaus, February 21st, 2007 at 11:30 pm
Yes yes, I want make anchors inherit Backbutton fix :) Who can fix it?

Comment by Tambietcuocdoi, February 24th, 2007 at 8:33 am
how i can hide the content of a tab until the user click in one option?

Comment by sebastian, February 28th, 2007 at 11:05 pm
i found a bug …
in my blog. jquery.tabs does not work well,
it makes extra blanks in firefox
and make set the div’s display attribute to ‘inline’ in ie

http://leen.name/index.php?Blog-submit&id=54

maybe its my problem..
sorry for my poor english.

Comment by leen, March 2nd, 2007 at 2:35 pm
I have integration jquery.tabs to jQWebExt framework, thank you very much.

jQWebExt – jQuery Simple MVC and plugins Components framework.
http://code.google.com/p/jqwebext/

Comment by Rack Lin, March 8th, 2007 at 3:11 am
[...] Javascript Tabs vom Stilbüro Basierend auf jQuery | Demo [...]

Pingback by Tab Interface Scripts | Dr. Web Weblog, March 18th, 2007 at 6:03 pm
Hi, is it possible to get a menu like the one of this site: http://www.quattroruote.it/

(the tab activates when you onmouseover and automaticly returns on default tab depending on the section)

Sorry form my english :)

Comment by Matteo, March 19th, 2007 at 12:24 pm
Author Comment

Matteo, here’s something to start with. I’m simply using triggerTab in the mouseover handler while bookmarkability is turned off.

I will consider to add a mouseover option for Tabs 3.

Comment by Klaus, March 19th, 2007 at 2:32 pm
Thank you very much. :)
You was incredibly fast and kind!

Comment by Matteo, March 19th, 2007 at 2:58 pm
How to install this? No instructions with the tab downloads. Please help

Comment by kevin, March 19th, 2007 at 5:50 pm
I need to navigate and do a bunch of validation on other form fields when a tab is clicked. Is that possible using jquery tabs?

Comment by Tom Webdesign Traunstein, March 21st, 2007 at 11:16 pm
Klaus, is it possible to init the tabs with all tabs off (unselected, not disabled) and all content hidden? What would be the best way to achieve this?

I tried removing and adding the regarding classes right after initialization but this also flashes the content of the first visible tab.

Thanks in advance, Alex

Comment by Alex, March 22nd, 2007 at 12:09 pm
Author Comment

Tom, I’ve just uploaded Tabs 2.7. With that you can do form validation with the onClick callback and if that returns false, tab switching is cancelled. For example if you have a form to be validated in the first tab, it would be validated when clicking on the second one.

Alex, I’m sorry, I’ve never designed the Tabs to work like that, but that’s on the list for Tabs 3.

Comment by Klaus, March 22nd, 2007 at 5:01 pm
Hi, it’s me again, the one of the onmauseover i need another help. Is it possibile to mantain the selection of the botton even inside the tag div? Thanks

Comment by Matteo, March 23rd, 2007 at 4:14 pm
Klaus,

First congratulation for the great work! I am wondering about one accessible feature for which i could not find any information. Let say there are anchors inside a tabbed text, a node given by this CSS selector: “#section-2 #some-anchor”, where the tabb #section-2 is not opened on the page load, and that one would like to point using an URL like http://www.some-site.com/path/to/tabbed-page.htm#some-anchor. I guess it would be easy (if i knew a bit more JQuery!) to write an event handler that enables the tab where the anchor is located. Since i’m not used to JQuery (yet), could you point me to the best way to achieve this? Perhaps consider adding this feature to the extension?

Thanks,
Christian

Comment by Christian, March 27th, 2007 at 5:24 pm
Great script! However, when I load the page in IE6 the tabs flicker on mouseover. But on your demo page they do not. Can you tell me how to fix this?

Comment by Matthew, March 27th, 2007 at 7:11 pm
Author Comment

Christian, I’m not sure if it is that easy, because the script would have to check (recursively?) where the anchor in question is located, which may be expensive if you have a lot of tabs. It is definitely doable though. It would also be useful for nested tabs, but I’m still not convinced that it doesn’t become too complicated.

Comment by Klaus, March 27th, 2007 at 9:17 pm
Author Comment

Matthew, I don’t know why your tabs flicker and I can’t tell without an online demo. The recently discovered fix for flickering background images may help you, or the older one discovered by Dean Edwards, but this one involves server configuration.

Comment by Klaus, March 27th, 2007 at 9:24 pm
Klaus, I think it can be achieved in an inexpensive way if we start from the node that has the anchor (given from the hash part of the URL), then 2 ideas come in mind, but i can’t tell which would be best toward JQuery: (1) loop through the node’s ancestors and look for a node that is a tag; (2) fire an event that will bubble bottom/up to activate all tabs on the ancestor axis.

Comment by Christian, March 28th, 2007 at 12:15 am
please help with installation.

Comment by kevin, March 30th, 2007 at 1:47 am
I am using tabs to load items remotely.

1.I need to change the target url for the tabs, depending on other options that the use chooses.

Is it possible, and if so, how can I do this?

2. Again, using remote urls, there should be an option where the “Loading message” does not get shown at all. If the response is fairly quick, it is distracting.

Thanks,

Peter

Comment by Peter, March 30th, 2007 at 10:09 am
This is really nice and easy way of creating tabs.
I have only one suggestion.
Because of the new version tabs have this background image (which is great actually) it is not possible to have auto width for them.

I was trying to make them dynamic with adding two spans into the li between the href element.

Everything was going ok after i found that the selected class is adding to the parent element which in my case is the span.

I hope you can figure out this because we never know how long is the string.
—
Best regards
Svilen Sabev

Comment by Svilen Sabev, March 30th, 2007 at 8:30 pm
Author Comment

Svilen, thanks for notifying me about this. I have fixed this and uploaded the fixed version.

Comment by Klaus, March 31st, 2007 at 12:56 am
I need to triger a tab using Taconite. I get the alert, but I don’t get the update. Could you tell me what is wrong?

By the way, I wrote a Perl module, PerlJQuery available on CPAN, which includes tabs – that is one of the reasons I am asking.

Thanks,

Peter

Comment by Peter, April 1st, 2007 at 1:58 pm
Author Comment

Peter, I’m sorry, with such description I can’t tell you what’s wrong.

Comment by Klaus, April 1st, 2007 at 9:45 pm
Is it possible load pages into tabs contaning itself jquery code and document functions? For now its just loads simple html content.

Comment by Ivanko, April 2nd, 2007 at 11:20 am
Author Comment

Ivanko, yes that’s possible already. Tabs uses jQuery’s load to get the tab content, which means that eventually included scripts will be evaluated automatically.

Comment by Klaus, April 2nd, 2007 at 12:37 pm
Thanks for reply. For now any document.onload function is not executed when being imported in tab. And its rather reasonable. Becouse no document is created then no function is exec’ed. Could you please make me a hint how to avoid such a thing. I mean, can be some func being executed when its content is imported via ajax?

Thanx

Comment by Ivanko, April 2nd, 2007 at 4:26 pm
Author Comment

You have to include a script element (with inline JavaScript or pointing to an external source). These scripts will be evaluated and all functions in there for example are available in the global context. If you then place the desired function call in there it gets executed immediatly after the content has been loaded via Ajax.

Comment by Klaus, April 2nd, 2007 at 4:38 pm
How can I set the tabs to a wider width?

Comment by Ajax4Me, April 4th, 2007 at 4:07 am
Nice work !

As my English and my javascript are both loosy, I’ m not sure to understand what is meant by the hash URL feature: did you mean that if have an anchor into the tab content like this

Snipped unescaped HTML, – Klaus

the URL: http://somewhere.tld/#Oh-This-Anchor-Is-Nice will select automatically the third tab ?

I have tested, but it don’t work for me !

That is too bad, because enabling the anchors is really a matter of accessibility, and i didn’t find a javascript tab system that implement it…

Comment by Beurt, April 10th, 2007 at 6:17 pm
Author Comment

First of all, I will have to keep repeating this: If you want to post HTML code, you will have to escape certain HTML entities, e.g < > ".

Now to your question: If a fragment identifier/hash in the URL refers to an id of a tab container, the appropriate tab will get activated. You can try it on the demo page:

This link will open the page with the first tab of the first interface active.

This link will open the page with the third tab of the first interface active, because there is a hash of the form “#fragment-3″ (which relates to the third tab) in its URL.

You cannot put just some anchor into the URL, like in your example. The hash has to correspond to a tab container (fragment).

Comment by Klaus, April 10th, 2007 at 6:53 pm
Sorry for HTML I didn’t knew and thought there was a preview before posting, but there is not :-/ !

Ok, the anchors inside tab content are not available… Too bad. I cannot find a way to manage this for my website (and I’m trying to do it myself, but i think I’m far from it now)…

Anyway, thanks for your fast answer and your great work !

Comment by Beurt, April 10th, 2007 at 8:25 pm
Hi, great job!
About the onmouseover, is it possible to keep active the tab even when the mouse is in the inside of the div? Is it also possible to connect some links and not only anchors to the menu items?
It would be great if your tabs became flexible to also create menus with submenus.
Thank you very much.

Comment by Paolo, April 12th, 2007 at 2:43 pm
[...] Javascript Tabs vom Stilbüro Based upon jQuery | Demo [...]

Pingback by 14 Tab-Based Inferface Techniques | Smashing Magazine, April 17th, 2007 at 5:17 pm
[...] Javascript Tabs vom Stilbüro Based upon jQuery | Demo [...]

Pingback by Webdesign (css, grafica e altro) » Blog Archive » 14 Tab-Based Interface Techniques, April 17th, 2007 at 8:26 pm
@Klaus I’m just wondering whether I wasted my time writing and posting my previous bug report? I spent last evening arranging a publicly available demonstration to post here. Should I bother?

Comment by Matt Richards, April 18th, 2007 at 9:51 am
Author Comment

Matt, be assured that you didn’t waste your time! I appreciate your efforts but currently I’m in the middle of a relaunch and I don’t have the time to do anything for the Tabs plugin (I do that in my free time of which there isn’t much currently).

Comment by Klaus, April 18th, 2007 at 11:15 am
Author Comment

Just in case you’re missing your report here, you posted it over here…

Comment by Klaus, April 18th, 2007 at 11:19 am
[...] um menu com abas como este que você pode ver na figura acima. A configuração é simples de ser feita e utiliza javascript e css. Também é necessário utilizar o [...]

Pingback by Menu de abas com jQuery, April 18th, 2007 at 5:36 pm
[...] Javascript Tabs vom Stilbüro [...]

Pingback by sekme bazli arayuz teknikleri : İnternet ve Yaşam, April 19th, 2007 at 3:20 pm
OK, so I’ve got a vertical set of tabs up and running and the individual divs are displaying nicely. Now, I’d like to add one tab that redirects to an external link (i.e. doesn’t display a new tab, but instead goes to a completely different page).

Any ideas how to go about doing that?

Thanks!

Comment by Castellan, April 19th, 2007 at 6:06 pm
Now this feature/plugin also helps to save the climate! :)

Comment by Plant for the Planet, April 19th, 2007 at 8:26 pm
[...] Javascript Tabs vom Stilbüro [...]

Pingback by CMP2.NET | Design,Multimedia,Internet,Security | » Blog Archive » Sekme bazlı arayüz teknikleri, April 20th, 2007 at 3:04 pm
Very nice approach. However, I am having problem with the width of the tabs to fit text such as: ADVANCED SEARCH in only one line. Any sample in how to acomplish this?

Thanks!

Q

Comment by Gonzalo, April 21st, 2007 at 8:46 pm
[...] Javascript Tabs vom Stilbüro [...]

Pingback by Menu com onmouseover, April 25th, 2007 at 8:29 pm
Hi Klaus,

Love the tabs we are going to be using them in a project we are working on. We are using the fade animation with an iframe under each tab. With the iframes we appear to get a slight flicker as the new tab loads. Any ideas how we may reduce this?

Comment by Ross, April 26th, 2007 at 10:33 am
[...] Javascript Tabs vom Stilbüro [...]

Pingback by by Webciyiz Webmaster Kaynakları, April 26th, 2007 at 11:55 am
[...] Javascript Tabs vom Stilbüro [...]

Pingback by Tab Çeşitleri - Tab Arayüz by Webciyiz Webmaster Kaynakları, April 26th, 2007 at 11:56 am
Hi Klaus, the tabs are great and I would love to use them but have encountered a problem with my dynamic page titles. (using joomla CMS with translation module). Is there any way round this? i.e. that the tab links become relative to the page without being dependent on the url?

Comment by Patrick, May 5th, 2007 at 4:13 pm
Hello Klaus,

Congrats on a wonderful module. I love the level of customization and the ease of use. Thanks so much for putting this out.

The only problem I’ve run into is that sporadically when clicking on tabs after the first tab in the list, the first time you click on them it shows that tab’s content for a split second, then switches back to the first tab content. It always shows the proper tab content the second time you click on the tabs, but sometimes on the first it switches weirdly back to the first.

This happens in Firefox (mac & pc latest), and I’m just noticing now that it happens every time in Safari (latest as well).

I’m testing it right this minute with IE6 (which works, aside from some CSS problems that are easily remedied). Don’t have IE6 on my virtual machine though.

I’d be more than happy to share the link with you to see it in action if you like; I’m not going to post it here though.

Thanks!

Comment by tom, May 8th, 2007 at 4:36 pm
How can change these tabs to vertical instead of horizontal? Thanks.

Comment by tg, May 8th, 2007 at 10:54 pm
I found a bug and a fix for Safari. When clicking a tab, Safari executes a form GET. However, current variables are lost as they are not accounted for in that GET. To fix, I added:

/** * Safari Fix : 2007-05-11 * jQuery tabs does not pass existing vars to self **/ var getVars=document.location.search.substr(1).split('&'); var hidVars=''; for(i=0;i'; }
// Simply setting location.hash puts Safari into the eternal load state... ugh! Submit a form instead. var tempForm = $(''+hidVars+'').get(0); // no need to append it to the body //OLD var tempForm = $('').get(0); // no need to append it to the body

to line 374. Please add to package.

Thanks for a great product!

Comment by Craig, May 11th, 2007 at 3:23 pm
When using tabs I usually like to hold the loading of the content until they are really needed, since this saves bandwidth and improves user experience (hate to see things animating in the top right part of my browser). Also the tabs get loaded only once.

So I added this ‘very basic’ way of adding iframes to the tabs as if they where standard content. (this might not be W3C compliant, jquery “best-practices”-compliant or the like. This is just something to get started on).

Here is the definition of the HTML:

[Stripped unencoded HTML - Klaus]

Notice the “remotesrc” property set to the iframe. This is how I specify the final location to be loaded on the iframe. Don’t know if it’s standard, but works on IE and Firefox.

Now the script:

function initTabs(){
$(”#menuTabsContainer”).tabs({
remote: false,
fxAutoHeight: false,
onClick: function(tab, curDiv, prevDiv){
var iframe = $(”#”+curDiv.id).children(”iframe”)[0];

if( ! iframe.src){
iframe.src = iframe.getAttribute(”remotesrc”);
if ($.browser.msie ){
doIt(iframe, “#”+curDiv.id);
}else{
iframe.onload = function(){
window.setTimeout(function(){setIframeHeight(iframe.name);}, 50);
}
}
}
}
});
}

//this is needed because IE will not recognize
//the iframe.onload as I would wish (after doc loaded).
//so we check if the size of the inner document changes
//and if it does we reset the height of the iframe.
var prev = -1;
function doIt(iframe, curDivId){
var h = setIframeHeight(iframe.name);
if( h != prev){
prev = h;
window.setTimeout(function(){doIt(iframe, curDivId);},50);
}
}

//the following is “borrowed” from somewhere else. Sorry
//but i do not remember the source.
unction getDocHeight(doc) {
var docHt = 0, sh, oh;
if (doc.height) docHt = doc.height;
else if (doc.body) {
if (doc.body.scrollHeight) docHt = sh = doc.body.scrollHeight;
if (doc.body.offsetHeight) docHt = oh = doc.body.offsetHeight;
if (sh && oh) docHt = Math.max(sh, oh);
}
return docHt;
}

function setIframeHeight(iframeName) {

var iframeWin = window.frames[iframeName];
var iframeEl = document.getElementById? document.getElementsByName(iframeName)[0]: document.all? document.all[iframeName]: null;

var docHt = 0;
if ( iframeEl && iframeWin ) {
iframeEl.style.height = “auto”; // helps resize (for some) if new doc shorter than previous
var docHt = getDocHeight(iframeWin.document);
// need to add to height to be sure it will all show
if (docHt) iframeEl.style.height = docHt + 30 + “px”;
}
return docHt;
}

Comment by Basic IFrame Support added, May 14th, 2007 at 10:35 pm
sorry but HTML got corrupted. I guess you can easily “view source-code” and get it from there.

Comment by Basic IFrame Support added, May 14th, 2007 at 10:36 pm
Author Comment

No, I cannot just “view source”, because Wordpress also sanitizes HTML that is put into this comment field, especially iframes and that sort of things. I’d appreciate it, if you take the time to properly encode HTML code with the required entities. This is meant for everybody who posts HTML here. I mean, honestly, this is basic HTML knowledge.

Comment by Klaus, May 15th, 2007 at 9:14 am
i want the loading animation in the center of the container, not in the tabs. How to do that, using tabs to load remote content.

Comment by suresh, May 18th, 2007 at 8:35 am
Hi. In IE the disableTab function doesn’t dim the disabled tab so it still looks active (which is deceiving to users). It dims correctly in Firefox however.

Any plans to allow new tabs to be created or removed dynamically? Or can that be done by editing the DOM on the fly to add/remove LI elements?

BTW, your demo page works equally well in IE5.5 so you can add that to your compatability list if you want. (Some people still run that old browser believe it or not – I have to test against it).

Very nice plugin and very compact! :-)

Comment by Gary F, May 20th, 2007 at 9:16 pm
“Hi. In IE the disableTab function doesn’t dim the disabled tab so it still looks active (which is deceiving to users). It dims correctly in Firefox however.”

– I have the same problem :)… I think you should use an alpha filter for IE6 as well, shouldn’t you?

Comment by Mike, May 22nd, 2007 at 12:41 pm
Author Comment
Maybe you should just include the IE specific style sheet that is also found in the download (jquery.tabs-ie.css) and is included in the demo inside Condtional Comments:

.tabs-nav .tabs-disabled a { filter: alpha(opacity=40); }
Comment by Klaus, May 22nd, 2007 at 1:41 pm
Author Comment

The reason I’m using an extra style sheet is mainly filter being an invalid CSS property, but valid CSS is a requirement in several accessibility guidelines.

Comment by Klaus, May 22nd, 2007 at 1:42 pm
Klaus, thanks for your reply. The conditional code doesn’t appear to be working in your demo page – at least for IE6 which is what I’m testing it with.

Comment by Gary F, May 23rd, 2007 at 2:15 pm
Author Comment

Gary, thanks, now I see. The recently added support for flexible tab width, e.g. the additional span, broke the opacity. I tried a bit, but it seems it is completely broken now without a quick fix. I’ll try more things when I have more time again.

Comment by Klaus, May 23rd, 2007 at 2:44 pm
Klaus,

Thanks for the great plugin. Your plugin has gotten me into jquery and I really like both, so thanks. I am new to the front end javascript development and it is great to have quality examples to work with.

Just a quick note on the tabs. I am using them in remote mode, and the only hiccup I have run into is that the callback events are firing when the tabs first load, because in remote mode, you trigger a click event on the first tab.

What I am doing is using the interface plugin to scroll the tabs to the top of the page by passing in the option:

onShow: function() {$("#boomertowne-tabs").ScrollTo(750);

But I don’t want the page to scroll as soon as the user enters, only when a tab is actually clicked.

It was relatively easy to work around, I simply added a variable to check for the first load, and didn’t fire the onShow event. It’s a small tweak but maybe something you could think about for Tabs 3.

Thanks again for the great plugin.

Comment by Sean, May 23rd, 2007 at 3:17 pm
Author Comment

Sean, I’ve just fixed this issue and uploaded the new version.

Gary, I’ve also fixed opacity for disabled tabs in IE.

Comment by Klaus, May 24th, 2007 at 10:37 am
Thanks for fixing, Klaus. Appreciated. :-)

Comment by Gary F, May 24th, 2007 at 2:48 pm
Hi, awesome script!
One question.
I can set a default active tab with:
$('#container-2').tabs(2);

but how can i set the default tab combined with a effect?
$('#container-2').tabs({ fxFade: true, fxSpeed: 'fast' });

Hope you can help me, thank you very much!

Comment by Sandro, May 25th, 2007 at 10:10 am
Author Comment

Sandro, I’m sorry, an effect for initialization is not supported.

Comment by Klaus, May 25th, 2007 at 10:44 am
Hi, sorry for my bad english – i don’t meant an effect on initialization.

I just want to use the version with the effect tabs – and that on start the second tab is active and not the first one. (like in the second example of the demo page where i can set the active tab with .tabs(2);)

So i don’t want an effect on initialization – only that the second tab is active at the beginning (but in use with the effect tabs). Is this possible?

Thank you Klaus.

Comment by Sandro, May 25th, 2007 at 10:53 am
Author Comment

This works: $('#whatever').tabs(2, { /* options */ });

Comment by Klaus, May 25th, 2007 at 1:44 pm
Thank you so much!!

Comment by Sandro, May 25th, 2007 at 2:18 pm
I’m new to jQuery and am having trouble dynamically adding and removing tabs. Is it possible to include “add” and “remove” functions in one of your demos please? Thanks and sorry for my lame request.

Comment by Gary F, May 26th, 2007 at 7:00 pm
hi Klaus,

Great work. I donwload it and got it working within 5 minutes in firefox. However IE7 is giving me some weird trouble. The tabs are getting initialized properly. But as soon as document.ready function is complete, the tabs get invisble. I inserted an alert command as the last thing in my $(document).ready function. Using this, I was able to see the tabs. But as soon as I clicked OK, the tabs are gone. I have include both tabs, and tabs-ie CSS. Any idea where I might be making a mistake

Regards,
Ritesh

Comment by Ritesh Agrawal, May 29th, 2007 at 7:29 am
Firstly, thanks for a great script. I have a few questions:

- How can you surround the tab content in a border.
- In Firefox 1.07 the vertical line which should be below the tabs appears above the tabs.
- Also FF 1.07 the tab content starts to the right of the last tab and then wraps beneath the tabs.

Thanks

Comment by David, June 1st, 2007 at 10:57 am
Hi,
This plugin is fantastic. But is it possible to call a php file using the ajax tab load ? I need this to dynamically populate the contents of the tabs from a database.

Any help will be much appreciated

Comment by pratheesh kumar, June 2nd, 2007 at 10:41 pm
Hi Klaus, thanks for the great plug-in.

I have some troubles to fill the content dynamicaly when i click a tab. I have 2 Tabs and everytime I click on the tab it should load a different content (html file) in the container. I am using the following (I am not sure if this is the correct way to do it).

Ajax tabs

Tab1
Tab2

document.write(’ ‘)

document.write(’ ‘)

var Current = ‘US’;
$(function(){
$(document).ready(function() {
$(’#container-1′).tabs();
});
});

function showPage(pageName){
document.getElementById(’fragment-1′).style.display=’none’;
document.getElementById(’fragment-2′).style.display=’none’;
document.getElementById(pageName).style.display=’block’;
}

Comment by Cynthia, June 3rd, 2007 at 12:37 am
Hi Klaus, thanks for the great plug-in.

I have some troubles to fill the content dynamicaly when i click a tab. I have 2 Tabs and everytime I click on the tab it should load a different content (html file) in the container. I am using the following (I am not sure if this is the correct way to do it).

<h2>Ajax tabs</h2>
<div id=”container-1″>
<ul>
<li><a href=”#” onClick=”showPage(’fragment-11′);”><span>Tab1Tab2document.write(’<iframe src =”‘+Current+’tab1.html’” frameborder=0> </iframe>’)</script>
</div>
<div id=”fragment-12″ style=”display:none;”>
<script>document.write(’<iframe src =”‘+Current+’tab2.html’” frameborder=0> </iframe>’)</script>
</div>

<script type=”text/javascript”>
var Current = ‘US’;
$(function(){
$(document).ready(function() {
$(’#container-1′).tabs();
});
});

function showPage(pageName){
document.getElementById(’fragment-1′).style.display=’none’;
document.getElementById(’fragment-2′).style.display=’none’;
document.getElementById(pageName).style.display=’block’;
}

</script>

Comment by Cynthia, June 3rd, 2007 at 1:04 am
Hi, I tried Phillip B Oldham approach for changing the tab url from the triggerTab event and could not make it work for my scenario. What I need is to change the tab content (url) on the fly (dynamically) based on the user selection.

I have a drop down list of countries and when user changes the country from the drop down, i need to update the tab pages so that when user selects the tab, it can shows the corresponding data. Is this possible?

Thanks for your help.
Cynthia.

Comment by Cynthia, June 3rd, 2007 at 8:08 pm
[...] Source: http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/ [...]

Pingback by 26 Best ways to implement AJAX, CSS and Javascript based Tabs at Witty Sparks, June 9th, 2007 at 8:09 pm
[...] Source: http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/ [...]

Pingback by Bookmarks » Blog Archive » 26 Best ways to implement AJAX, CSS and Javascript based Tabs, June 9th, 2007 at 9:17 pm
is there a posibility to say that i dont want to reload the div content once it was loaded from remote ?
(i got 4 tabs and once the were loaded i just want to switch between them without reloading the already-loaded tabs)

AND

maybe the demo-link should go to the top of the page, since almost everytime i come here i search for it :) (i know boomark but did not bookmark it yet)

Comment by MG, June 11th, 2007 at 4:34 pm
Author Comment

I’m sorry, caching for Ajax tabs is currently not supported, but it’s on the list for Tabs 3.

Comment by Klaus, June 11th, 2007 at 8:45 pm
[...] Klaus Hartl – Stilbüro : Accessible, unobtrusive JavaScript tabs with jQuery Here is a jQuery plugin that lets you create JavaScript tabs very easily – once you assembled the HTML with just one line of JavaScript code. (tags: javascript Ajax jquery) [...]

Pingback by links for 2007-06-12 « /tmp, June 12th, 2007 at 5:18 pm
[...] @ http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/ var addthis_pub = ‘codelinkers’; Back to Codelinkers your virtual Link Sharing [...]

Pingback by jQuery plugin | codelinkers, June 12th, 2007 at 8:26 pm
[...] Sitio: http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/ [...]

Pingback by WebAdictos - Una dosis diaria de web@ » Archivo del Blog » 26 Maneras de implementar tabs (pestañas) con AJAX, CSS y Javascript, June 19th, 2007 at 1:55 am
Hello Klaus, you made a great tabs with jquery. I like it so much.

Klaus when i’m trying to use your tabs change my current tab (using css), i found a little trouble. when i try to use the fourth tab(this content is about my search).

the fourth tab content is mysearch.php, in this page i use a button which return to this page (mysearch.php). i found troble the page is couldnt found because the address is become ” http://localhost/my_search.php“ because i use a css tab before i use your tab. Could you give me some solution about my problem.

thanks for your kind help…
keep working for jquery tabs

Comment by Hendra-1, June 19th, 2007 at 8:50 am
I experience that your tabs-lib crashes with prototype.js – any advice?

Comment by Per, June 19th, 2007 at 1:52 pm
Hi, Klaus!

I’m making a little application.
I just need to close a selected tab.
How can I do this?

Comment by Chacon, June 21st, 2007 at 9:30 pm
Author Comment

Chacon, I’m sorry to say that closing all tabs isn’t supported, one needs to be open.

Comment by Klaus, June 22nd, 2007 at 10:31 am
Hey Klaus,

I’ve been using Safari for Windows a bit, and I noticed that there was a problem when clicking between tabs. For some reason, Safari for Windows has problems with inline styles that other browsers do not have.

When switching between tabs, the inline styles cause the tab content to display without the tab-container. I’m not sure if this translates to other browsers such as Safari for Mac, but this is how I fixed it:

/* 486 */ if ($.browser.safari) {
/* 487 */ if(toShow.attr(’style’) != ‘display: block’)
/* 488 */ toShow.removeAttr(’style’).attr(’style’, ‘display: block’);
/* 489 */ }

Maybe there is a better way to do this?

Comment by Andre, June 25th, 2007 at 3:12 pm
Hey Klaus,

Sorry the addendum, but this works better:

If you move the code to start at line 480, it removes a flicker on tab show.

Andre

Comment by Andre, June 25th, 2007 at 3:17 pm
Hi Klaus. This comments list is already quite long. I’d hope I would have find an answer to my problem by myself. But… no… Even if that sounds quite easy.
I need to wrap my ul.tabs-nav in a div (.tabs-nav_container), for visual purposes. That’s all.
But I can’t have the tabs working with that extra div. Do you think I can ? Any idea how ? Thanks for your help, and even more for these great tabs.

Comment by Julien, June 27th, 2007 at 4:48 pm
Author Comment

Julien, just read about the latest update, there’s all you need to know.

Comment by Klaus, June 28th, 2007 at 6:51 am
[...] Accessible, unobtrusive JavaScript Tabs with jQuery [...]

Pingback by Codigo Geek » Blog Archive » 24 alternativas para Tab o Pestañas, July 1st, 2007 at 9:36 pm
Hello,

The form does not send “submit”.

How is solved?

Comment by Brian, July 3rd, 2007 at 2:18 pm
I have setup the tabs with different forms in each tab. When I switch between the tabs I want to save the form in the backend. I’m using the onClick functionality for this and the jquery AjaxForm.

Now I have this:

$(function() {
$(’#container’).tabs({
fxFade: true,
fxSpeed: ‘fast’,
onClick: function() {
$(’#processform’).ajaxSubmit(function() {
alert(”Saved from switch!”);
});
}
});
});

It gives back the alert, but i doesn’t save the form. What goes wrong?
Thanks for the help.

Comment by Mathijs Gaalman, July 3rd, 2007 at 9:54 pm
Hello,

is it possible to load the Ajax-loaded Contents only once?

Thanks
Aldo

Comment by Aldo, July 4th, 2007 at 1:55 pm
Hello Klaus,

First of all, congratulations for this great plug-in.
I’m creating a web site in which I would like to have a tab inside a main tab. Would it be possible to use a different CSS for this second tab?

As a work around, I’m using a callback that change the class of the selected content. The problem I have is that it’s not launched for the first tab displayed, even selecting the fist tab to be displayed.

Thanks,
DavidD

Comment by DavidD00, July 4th, 2007 at 6:14 pm
-
Hi, thanx for the plugin, works fine for me.

I want to update a div outside the tabs area, when a tab is clicked. This div should then show information related to the tab that was clicked (e.g. if tab 2 was clicked, show 2.
I managed to set up a onClick (or onShow) function. Unfortunately I found no method to retrieve information about the active tab.

My workaround is this, but I would prefer to use the onClick function.
$('#container-1').find('ul:eq(0)>li a').each(function(i) { $(this).bind('click', function() { $("#outside").html("clicked on " + i); }); });

So how I could retrieve the active tab number (or other information like e.g. href, etc.) in here?
$(function() { $('#container-1').tabs({ onClick: function() { $("#outside").html("clicked " + ??????? ); }); }); });

thanx

djot

PS: If you find some time, please set up a documentation page or a “common tasks” page, which sums up all the contributions and solutions from this blog.

Comment by djot, July 5th, 2007 at 7:18 am
Ok, did have a look on the blog and source the last hour, and now just found the solution in the history right after posting my question above … activeTab();

$(function() { $('#container-1').tabs({ onShow: function() { $("#outside").html("clicked " + $('#container-1').activeTab()); } });

djot
-

Comment by djot, July 5th, 2007 at 7:25 am
-
Hi, me again … next question or suggestion for v3:

Cached ajax tabs will be available in v3 as I read …

So this is not possible in the current version I guess:

I think of using static (non-ajax), prefilled tabs. The information in e.g. tab1 has to be updated, if in tab2 a form is submitted.

Now, the static tab1 should be reloaded with a predefined ajax call. So tab1 should be initialized as static tab, which (if called by anything) could be updated via a given ajax url.
So if tab2 is submitted, the ajax url for tab1 is called to update tab1 with the new information entered in the form of tab2.

djot
-

Comment by djot, July 5th, 2007 at 7:54 am
Author Comment
Djot, the source is fully documented, please have a closer look. Besides the activeTab method you can use what always gets passed as arguments to the onClick/onHide/onShow handlers: first argument is the clicked tab (the anchor element), second argument is the div that gets shown, third the one that gets hidden.

$('#container-1').tabs({ onShow: function(clicked, toShow, toHide) { alert(clicked.href); alert(toShow.id); alert(toHide.id); } });

Tabs are also documented on Visual jQuery and you can also use Jörn Zaefferer’s HTML Documentation Generator if you don’t like the inline documentation.
Comment by Klaus, July 5th, 2007 at 10:01 am
Can your plugin perform an inverted tab ? That would be nice !

Comment by Liverpool, July 6th, 2007 at 8:46 am
I have small question.

How can i use this plugin without “bookmarkable” function? I want have tabs change without “#” in link.

Comment by dizor, July 12th, 2007 at 8:53 pm
Sorry, i just find solution – so my problem is now solved. Use without “jquery.history_remote.pack.js”

Comment by dizor, July 12th, 2007 at 9:19 pm
Hi,

I would like to know how to test which tab is active.
Also whould like to know how to add more events like the onClick, onShow and onHide.

Thank you, very nice job. Congratulations

Comment by João Araújo, July 13th, 2007 at 5:46 pm
Sorry, Didn’t read the documentation very well.

$(’#container’).activeTab()

Comment by João Araújo, July 13th, 2007 at 9:50 pm
[...] Javascript Tabs vom Stilbüro Basada sobre jQuery | Demo [...]

Pingback by CaudalWeb Blog » Blog Archive » Interfaces basadas en Tabs, July 14th, 2007 at 7:59 am
Hello
How can i create a new Tab and remove it in a simple javascript code, please help me

Comment by Saeed, July 14th, 2007 at 2:08 pm
Hey Klaus,
This tab is shaping up real well. I was testing the ajax tab functionality after using tabs 1 for sometime. Is there a way to preselect a specfic tab from the set of tabs. For example works for regular tabs and not for ajax-tabs,

$(function() { $('#tabContainer').tabs({ remote: true }); $('#tabContainer').triggerTab(2); });
(or)
$(function() { $('#tabContainer').tabs(2); }

Please let me know if I am missing something obvious.
Thanks.

Comment by Karthik, July 18th, 2007 at 4:55 pm
Author Comment

Karthik, try the following:

$('#tabs').tabs(2, { remote: true });

Comment by Klaus, July 18th, 2007 at 9:34 pm
Klaus, thank you for a great script! I have been using it quite a bit at my site. Today I attempted to implement your Ajax tabs. In Safari (Mac, PC, iPhone) it has a real tough time staying on the tab you click. Sometimes the tab you click is selected, and other times it bounces over to another tab. There’s no method to it, it seems.

It even happens with your Ajax demo at http://stilbuero.de/jquery/tabs/

I have 8 tabs in my scenario, so it happens quite often. With your 3 tabs sometimes you have to play with it for a bit, but you will reproduce it I’m sure. The behavior is that the tab is initially selected, but for whatever reason another tab takes over so you just see a flicker of the tab you want, then another tab takes focus.

I’m using your latest library as well, but as you will see it happens on your page too. Only in Safari, and only with the Ajax tabs.

I’ve tested this with the latest versions of Safari on PC, Safari on Mac OS X, and the iPhone’s Safari browser. It is reproducible every time.

I hope you can reproduce it and fix it!

Comment by Chris, July 25th, 2007 at 10:54 pm
Author Comment

Chris, that is an issue with the history plugin. It simply doesn’t support Safari 3 (yet). If you remove the reference to it, everything should be fine.

Comment by Klaus, July 26th, 2007 at 9:18 am
Hi klaus,
I tried to open your demo using netscape 8.1.3 and it seems your script is not working properly with this browser(netscape 8.1.3).
Anyway, thanks for the great work!

Comment by andy, July 26th, 2007 at 8:11 pm
Hello Klaus, nice work with this script, I will use it !
May I also ask you what you use for the h2 titles in this page to color them in yellow and make it fade out after a certain time ?
Thank you.

Comment by Matthew, July 27th, 2007 at 4:02 pm
Hello Klaus,

Great work on the plugin, much appreciated. Could I please get an example of adding/removing a tab dynamically? Thanks!

Comment by d00bie, July 28th, 2007 at 4:21 pm
may ask something, is it possible that the jQuery tabs will have a feature of multiline tabs?

Comment by camilord, July 28th, 2007 at 5:30 pm
Author Comment

Matthew, the fading is based on some code examples by cody lindley from the early jQuery days. Feel free to take it from here. On the other hand I believe there is a plugin as well, that does the same.

D00bie, adding/removing tabs isn’t supported yet. It’s on the list for Tabs 3. Can’t really tell when that is going to happen.

Camilord, multiline tabs is more a question of proper CSS, but it is really hard to make it work. I planned something like a little left/right arrow instead for Tabs 3 in case tabs exceed available space.

Comment by Klaus, July 28th, 2007 at 6:37 pm
Hi Klaus,
it’s me again :)
Regarding netscape issue I added this line :
padding-top:0.09px;

into .tabs-nav:after and now the tab is goes better on netscape.
Tricky but it works :p

But I have another issue.
Do you have an idea how to make jquery tabs working properly without any conflict with other javascript library like mootools.
I tried to add this code :
jQuery.noConflict();
at the end of javasscript insertion code but it’s not works :(

thanks

Comment by Andy, July 29th, 2007 at 7:08 pm
Author Comment

Andy, have a look here: Using jQuery with Other Libraries

Comment by Klaus, July 30th, 2007 at 5:25 pm
Hello,

I found this tabs and they are great.

But I have a problem.

I want to create a combination auf this tabs and the Thickbox iFrame.

I want a Link in the Tabs-Menu that open a Thickbox iFrame onShow or onClick.

My Code Snipet:

onShow: function()
{
var ActCon = $(’#container-1′).activeTab();
if (ActCon == “3″)
{
alert(”" + ActCon + “”);
window.location.href = index.php?TB_iframe=true&width=750&height=485″;
}
}

But I need more than that href part to successfull open a ThickBox iFrame like:
Link-Text

So, is it possible to add the class to the java location.href thing ?
Or is there any other solution to directly display an iFrame ?

thx,
Martin

Comment by Martin, July 31st, 2007 at 8:26 pm
EDIT:

But I need more than that href part to successfull open a ThickBox iFrame like:
…height=485″ title=”Title” class=”Thickbox”>Link-Text

That was what I wanted to type, it was interpreted as Link :)

Comment by Martin, July 31st, 2007 at 9:42 pm
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, August 1st, 2007 at 2:42 pm
Klaus,

you should add a new feature: reload the tab. Sometimes we need to force the tab content to be refreshed (because the AJAX page has changed). i tried the .enableTab() but it doesnt have any effect.

Maybe you should add a new param when creating the tabs that forces reload the content when user click on the activated tab and from a function.

despite this, great module!

regards,

massa

Comment by massa, August 1st, 2007 at 5:30 pm
Author Comment

Marjan, having all tabs closed is currently unsupported. That feature will go into Tabs 3.

Comment by Klaus, August 1st, 2007 at 6:25 pm
Thanks for the answer.

Hm, is there anyway to fake it somehow? I’m close to finishing a project, so if you have any advice I would really appreciated it.

Take care.

Comment by Marjan, August 2nd, 2007 at 9:38 am
Any thoughts on extending the code to add another param to the hash? Maybe something like #tab-3/photo-1.

I need to set this up for a small carousel embedded in a tab. I’m running into difficulty with using the back button. The way I currently have it “working”, tab-3 loads photo-1, meaning that if you press while at #tab-3/photo-1, it just goes back to #tab-3 and loads “photo-1″ again. Breaking the back button in new and different ways :)

The other alternative I tried was just allowing #tab-3 to show photo-1, but if you go from #tab-3/photo-2 to #tab-3 it will jump to the anchor.

Any insight/scoldings/comments would be greatly appreciated, I’m definitely STUCK! :)

Great plugin you’ve made here, can’t wait to see what v3 is all about :)

Comment by Neil, August 7th, 2007 at 9:52 pm
user logins in from first tab and cookies are created.
I want to pass a cookie to one of the tab remote:true urls as a parameter without reloading the page.
e.g.
—
div id =tabcontainer
li a href=”file.php?id=cookie['id']
—
and have been unable to do so.
So I tried to create the tab on the fly, having read comments above – I am still unable to create tabs dynamically.

I tried
var newTab = ‘\\\User Tab\\\’;
$(’#tabcontainer>ul’).append(newTab);
$(’#tabcontainer’).enableTab(2);
but of course that creates a tab with the right url – but not the correct Tab fragment hash.

Anyone set me on the path of how I can do what I want – that is
1. log a user on validated against a database (can do)
2. create a cookie
3. create a remote tab url with that cookie passed in ef file.php?id=cookieID

thanks

Comment by KAB, August 8th, 2007 at 3:48 pm
hmmm – tried to escape the code as mentioned before with no luck. So image the correct html here
[code]
var newTab =
li class="tabs-disabled"
a href="info.php?user_ID=3"
span User Tab endSpan end href
[/code]

Comment by KAB, August 8th, 2007 at 3:52 pm
[...] Klaus Hartl – Stilbüro : Accessible, unobtrusive JavaScript tabs with jQuery (tags: jquery javascript tabs navigation ui ajax) [...]

Pingback by David’s Thoughts » Blog Archive » links for 2007-08-09, August 9th, 2007 at 5:27 am
hi..!! Stumbled upon this fine piece of code ….what a relief!!!! Thanks a lot…!!
just a small query ….how can i set the default tab to none???
This is what i am trying to implement……
$(document).ready(function() {
$(’#container’).tabs(NONE, {
fxFade: true,
fxSlide: true,
fxSpeed: ‘fast’,
onClick: function() {},
onHide: function() { $(’#d_acad’).hide(); $(’#dapply’).hide();},
onShow: function() {}
});

});
It will be a great help…..!!! thanks

Comment by samarth, August 9th, 2007 at 6:22 pm
is there a way to mix normal fragment-tabs with one ajax tabs ?
{ remote:true } always apply to all the tabs ?

Comment by dom, August 10th, 2007 at 6:02 pm
Author Comment

Default tab none is not supported yet, sames as mixed tabs. Both features will be in Tabs 3, i.e. the Tabs widget of the jQuery UI project.

Comment by Klaus, August 11th, 2007 at 9:38 am
For one website design I needed to have the content of the tabs somewhere else than just under the tags. I think it would be interesting to have a setting to set an ID of a target div where the content should be displayed.

I checked the code, and I did these changes:
(settings – line 199)
targetId: null
(line 225) changed
$('').appendTo(container);
to
if (settings.targetId /*should also check if targetId exists*/) { $('').appendTo($('#'+settings.targetId)); } else { $('').appendTo(container); }

Will you add these feature in the plugin? I don’t mind if you change my code to something that match better your code.

By the way, have you already an idea when the V3 will be ready (approximately)?

Comment by Marco, August 14th, 2007 at 9:44 am
In the previous post, the code was truncated, but the main modification is still there: appendTo($(’#'+settings.targetId))

Comment by Marco, August 14th, 2007 at 9:46 am
It is a wonderful plugin! Very special indeed!

There is only a small problem: iframes (jquery.history_remote.js) gives problems of unsecure objects in an https-Environment within IE6. It is not so important – but maybe it is good to know? And maybe maybe there is a different solution for this problem?

Whatever – if you are using stilbuero.tabs within IE6 and and https -connection – and are wondering about strange warnings about insecure objects: now you know: Its the tabs.

You can use the tabs – but without the history-function.

regards Christian

Comment by Christian Zange, August 16th, 2007 at 1:15 pm
It’s a great script but I have a question. I have a page with a links like that:
index.php?var1=something&var2=somethingelse. Is it possible to modify code: “Section 1” to point to add a onclick event to handle the link and leave “href=”oldlink”" for browsers without JS?

Comment by Swieczkos, August 23rd, 2007 at 9:25 am
About Christian Zange comment: I’m using it in IE with HTTPS connection and without this problem now. Check my comment on the page about the bookmarkable tabs to fix it -> http://stilbuero.de/2006/07/13/bookmarkable-tabs/#comment-76237

I hope Klaus will include it in a new version
/Marco

Comment by Marc-Aurèle Brothier, August 23rd, 2007 at 10:56 am
Klaus, I am getting this weird IE7 effect for this site: http://www.epispider.net. I am using jquery 1.1.4 and tabs 2.7.4. Everything on the front page is shifted to the right. Could you help me out?

Thanks,
Herman

Comment by Herman Tolentino, August 25th, 2007 at 11:11 pm
The newest release of jQuery (1.1.4), is incompatible with the plugin.
It works perfectly with the previous version, (1.1.3) but when the library is updated the plugin breaks.

Looking forward to a fixed version, this is a great plugin. :)

Comment by Alex, September 2nd, 2007 at 7:37 am
Author Comment

Very soon Tabs 3 is going to be released… compatible to jQuery 1.1.4 of course. That’s why I decided to not adapt the current tabs. Stay tuned!

Comment by Klaus, September 2nd, 2007 at 12:42 pm
Any chance of support for two rows of tabs, one above and one below the box, in version 3? I’ve been working on hacking this in via changes to the html and css but I’m not that great with css and I’m having a helluva time. The main thing I’m tuck on now is the selected tab changes for the top row, and changes for the bottom row, but you end up with one on each row that appear as the selected tab. The actual content of the box changes correctly, just the tab isn’t getting updated to it’s not selected state when a tab in the opposite row gets selected.

Comment by Gary, September 2nd, 2007 at 8:30 pm
When can we expect the release of the long awaited Tabs 3? :)
In time for the proposed September release of jQuery 1.2? I’m just very eager to get you plugin included in my current project!

Comment by Alex, September 3rd, 2007 at 2:34 pm
Author Comment

Alex, I’m currently working hard on Tabs 3. It’s most probably going to be released very, very soon as part of the jQuery UI project, which will be released together with jQuery 1.2.

Comment by Klaus, September 3rd, 2007 at 2:52 pm
Just suggest.
Why playing with regular expressions at all to get # portion of the href?
Use just $(this).attr(’href’). You’ll got the href attribute without any server name.

Comment by Alex, September 5th, 2007 at 3:37 pm
Author Comment

Alex, I don’t use any regular expressions, I’m using the hash property of the anchor element. That’s even easier and faster than $(this).attr(’href’). Don’t know why you think I would use regular expressions.

Comment by Klaus, September 6th, 2007 at 10:02 am
When refreshing the page (F5), the content of the other tabs is shown, too. When the page is fully loaded, other content disappears.

Thanks for sharing this script!

Comment by Michael, September 8th, 2007 at 7:51 pm
Klaus,

I appreciate your work and your helpfulness. For that reason, I’ve read these comments several times looking for the answer, before bothering you on this issue.

I have several tabs in a single container. In tab 4, I have a form that posts back to the program and have appended the #tab4 to the url. The program updates the db correctly and tab4 is active (I’ve checked .activeTab()) The tab has the correct label, the I see the contents from tab3. If I select another tab, then tab4, all displays correctly. Any ideas what I’ve done wrong or should be checking? This problem is present in FF and IE

Comment by Rogers, September 10th, 2007 at 9:28 pm
Author Comment

Rogers, I can’t tell from that description alone. Do you have a demo to look at?

Comment by Klaus, September 11th, 2007 at 10:04 am
Klaus,

I debugged for hours before contacting you. But of course, shortly after posting, I figured it out.

The problem was:
container definition
ul def tab1
ul def tab2
ul def tab3
ul def tab4
div def tab1
div def tab2
div def tab4

Comment by rogers, September 11th, 2007 at 7:13 pm
In order to add the tab dynamically Roberto commented as follows on November 7th, 2006

here’s an example of adding a tab dynamically.
1: Create your new tab:

anchor = document.getElementById(”EntirePageTabber_anchor”);
newLi = document.createElement(”li”);
newLink = document.createElement(”a”);
newText = document.createTextNode(name);
newImg = document.createElement(”img”);

set whatever attributes you need,
append each to each other until you append the newLi to the anchor.

Then call
$(’#your-tabs>ul>li>a’).unclick();

and then reinitialize tabs.
that’s it,
still having some trouble reinitializing on a remove, but that’s how I’ve
been adding them.

But what I did not understand is, what is meant by “and then reinitialize tabs”.
Is it calling tabs function as $(’#container’).tabs();.
Here is my code.

var tabLabel = $(’Tab 4‘);
var tabContent = $(’content of tab’);
var container = $(’#container-1′);
var myUl = $(”ul”,’#container-1′);
tabLabel.appendTo(myUl);
tabContent.appendTo(container);
container.tabs();
$(’#container’).triggerTab(’#fragment-4′)

It is adding the tab properly but once a tab is added I am not able to click other tabs.
Could someone post some sample working snippet.

Comment by kali das sharma, September 11th, 2007 at 7:51 pm
I apologize, I forgot to escape the html. My code is as follows

var tabLabel = $(’< li >< a href=”#fragment-4″><span>Tab 4</span></a></li>’);
var tabContent = $(’<div id=”fragment-4″><span>content of tab</span></div>’);
var container = $(’#container-1′);
var myUl = $(”ul”,’#container-1′);
tabLabel.appendTo(myUl);
tabContent.appendTo(container);
container.tabs();
$(’#container’).triggerTab(’#fragment-4′)

Comment by kali das sharma, September 11th, 2007 at 7:56 pm
Klaus, you have an awesome plugin!!

I wanted to know if the following is possible:

I want to make a two step form. Tab 1 is the login info with Tab 2 disbled. Clicking on the continue button does some validation and enables/switches to Tab 2 which has the the personal information. At the end of Tab2, on submission I want to send the information via AJAX to be stored in a database and return to a 3rd Tab with success or failure.

I guess what I’m looking to do is selectively enable “remote: true” for a single tab and not all of them. Does this make sense to you? And… is it even possible:P ?

Thanks,
Christopher.

Comment by Christopher Vrooman, September 11th, 2007 at 11:33 pm
Author Comment
Here’s an idea: Initialise with tabs 2 and 3 disabled:

$('#wizard').tabs({ disabled: [2, 3] });
Clicking continue enables and triggers the second tab if valid: if (valid) { $('#wizard').enableTab(2).triggerTab(2); } Then I recommend to use the form plugin to submit the form easily via ajax and load the response into the third tab container (the target can be specified). In a callback for that Ajax request you would trigger the third tab...
Another idea is to use the onClick callback. If that function returns false (validation!), the click on a tab is cancelled, e.g. if the fields in the first tab are not valid you're not able to switch to the second tab.
Comment by Klaus, September 11th, 2007 at 11:47 pm
I just updated to jQuery 1.2 and tabs version 2.7.4 seems to be broken due to the removal of the eq function fropm jQuery 1.2

Comment by Ryno, September 12th, 2007 at 5:12 am
There is a problem with the lastest version of jQuery (1.2) .eq() is not supported.

Thanks!

Comment by AuSer, September 12th, 2007 at 7:40 am
Author Comment

I do not plan to update the Tabs 2 branch for compatibility with jQuery 1.2. Either use the compatibility plugin or even better – and that’s the reason why – start to use UI Tabs aka Tabs 3 ;-)

UI Tabs documentation (all available options not complete yet)

Download

Comment by Klaus, September 12th, 2007 at 10:29 am
I found that the script crashes the latest available safari for OSX.3.x version 1.3.2. IS there a way that this could be fixed?

Comment by Petros, September 12th, 2007 at 2:32 pm
Author Comment

Unfortunately I don’t have the chance to test on a Safari 1.3.2. Even a version from Multi-Safari doesn’t work with my OS X 10.4. And I don’t know if it’s a general problem with jQuery or with the plugin.

Which script are you referring to by the way, Tabs 2 or Tabs 3?

Comment by Klaus, September 12th, 2007 at 2:47 pm
Thanks for pointing me in the direction of the jQuery UI project, very interesting!

Couple of things though, the Demos and examples link currently goes to http://stilbuero.de/jquery/tabs/ which uses jQuery 1.1.3.1 and tabs 2.7.4, not jQuery 1.2 and UI.tabs.

I did download jQuery 1.2 and UI.tabs but my tabs usage code which worked in 2.7.4 is completely broken in your latest version. Are you planning on releasing an upgrade guide or can you offer any tips off the top of your head?

Also, thank you for your awesome work on the tabs plugin, it powers several websites I’ve developed and I’d be lost without it.

Comment by Ryno, September 13th, 2007 at 2:17 am
Hi Klaus, Thanks for responding

It seems that the problem is with the JQuery version

I tested by initially deleting one by one of your scripts in the Demo package you offer. Eventually it was the particular version (1.1.3.1) of JQuery which is causing the crash, both when testing locally and when opening the current page of your site.

I downloaded the latest release (1.2) which did not crash Safari but – unfortunately – the jquery.tabs.pack.js did not work with it.

Do you have plans in updating your plugin to support JQuery 1.2?

Many thanks again

Comment by Petros, September 13th, 2007 at 7:42 am
Author Comment

Ryno, an upgrade guide is a good idea – I don’t have the time to do it right now. For now the documentation must be sufficient.

Petros, the Tabs Version 2 branch is not going to be updated to work with jQuery 1.1.2. But that’s only because UI Tabs aka Tabs 3 is going to be released on Sunday, which will work fine with jQuery 1.1.2 (but not with older versions!). You’ll have to use the compatibility plugin if you need to run Tabs 2 with jQuery 1.1.2.

Comment by Klaus, September 13th, 2007 at 11:42 am
Klaus, Thanks again for your response.

Klaus wrote: You’ll have to use the compatibility plugin if you need to run Tabs 2 with jQuery 1.1.2.

So does this mean that your Tabs 3 will not be compatible with JQuery 1.2?

Also Can you point us towards the “compatibility plugin”?

Comment by Petros, September 13th, 2007 at 2:49 pm
Author Comment

Petros, I don’t know where you get that from. As I said: …run Tabs 2(!) with jQuery 1.1.2…. Tabs 3 will of course run with jQuery 1.1.2, but only with jQuery 1.1.2 or later.

jQuery 1.1 compatibility plugin

Comment by Klaus, September 13th, 2007 at 7:48 pm
Hallo Klaus,

i have tryed to add a font-familiy tag to the css (.tabs-nav2 a). But using the “Trebuchet MS” font causes a strange behavior. The background picture of the tab makes a misalignment between the left and the right cell (left curved image & right curved image). The background picture in the left tab has a 1 or 2 pixel less hight than the right one so that there is no continuous bottom line. Maybe it has something to do with the used quotation in “Trebuchet MS”.

Any suggestions ??

Thanx Daniel

Comment by Daniel, September 14th, 2007 at 10:34 am
Hi Klaus!

First of all, amazing work. I use these tabs all the time and they’re just genius :)

I ran into a small issue though. I want to use the fade functionality, very simple, just like in the demo..

But it’s only doing the fadeOut, and then there is no fadeIn animation, it just appears. I was wondering if htere’s something I’m forgetting. i tried hiding the fragments originally with CSS (like I usually do with jquery animations) so that they’ll be able to fade in, but then they don’t show at all. Same thing with the slide.

I was wondering if you had any idea what’s wrong. I can show you if that’d help

Comment by Anand, September 16th, 2007 at 1:04 am
Hi, thanks for the wonderful plugin. I’m using Tabs 2 with jQuery 1.2 and jQuery 1.1 Compatibility, and having trouble getting the remote loading to fire the onShow event when the page is loaded.

The onShow event only works if the page has been loaded and that I click another tab. Is this a normal thing is because of jQuery 1.2? Any help in getting the event firing on the initial load is much appreciated.

Comment by Aaron, September 17th, 2007 at 6:50 am
Hi Klaus

I was wondering if you released your tabs 3 plugin and – if you did – where we can find it.

Comment by Petros, September 17th, 2007 at 8:40 am
I’ve downloaded at least a half dozen tab scrpts and this is be far the best. I like how easy it is to configure affects and to add tabs. What I can’ seem to do is run a *.php page in the AJAX tab window.

Comment by Randy, September 17th, 2007 at 3:57 pm
I’m feeling pretty dumb, but all I want to do is have the tabs act as a navigation through a wizard ( a series of pages using the same tabs as navigation ). So I want the first tab to link to page1.cfm, the second to page2.cfm, and so on. Yet I cannot seem to make this work? Can you point me in the right direction?

Comment by Christian Ready, September 19th, 2007 at 7:18 pm
Is there a limitation for using tabs with flash embeded in the tab. I am using remote:true for some tabs that re-direct to a page. That page contains a flash component. But when I click that tab to switch over, the page will not load, it just freezes. Am I missing something here. If I run the page independent of the tabs it opens fine.

Thanks

Comment by Justin, September 20th, 2007 at 10:42 pm
Hi,

Have a quick question, I am writing some Rails app with AJAX calls through prototype helpers a’la “link_to_remote” one of the partials I am getting back contains tabbed pane, however I can not see it under the correct ‘updated’ div
as it seems that JSs are disliking each other :((
Could anyone give me some clue how to resolve it ?

Thanks in advance for all answers
Luki

Comment by Luki, September 22nd, 2007 at 12:46 am
Thank you for your tab.
i want to ask you a problem about radio button in IE7.
i had added a group of radio button in every tabs.
when the radio button had not been checked(by default) ,there are no problems.
but when a radio button had been checked(by default),thera are some problems.
when a tab where a radio button had been checked(by default) is shown, the radio button’s checked flag would lose!!

Comment by chenshian, September 26th, 2007 at 9:30 am
Hi Klaus!

Thanks a lot for this great plugin, but i have a question
How to make an ajax tabs load into some other div? Not each tab for each div, but one div with particular id for all tabs. This sounds easy, but I cannot find a place where i should add this inside tabs code.
I only managed doing copy&empty – but there is side effect – that default div appears for a second in IE.

Besides onShow doesn’t execute at the first time – when default ajax tab is loaded.

Comment by Arnold, September 27th, 2007 at 2:42 pm
how can i find what tab is clicked? I wan to select that after form ir submited and page is reloaded

Comment by jurciks, September 27th, 2007 at 3:55 pm
Sorry for the ultra newbie question, but I’m still rather green on css. My page displays fine in Firefox (big surprise) but the positioning in other browsers is off. What is happening is that the contents of the tabs are being shifted way to the right when a tab is clicked on. Ive tried adjusting the padding, margins and positionings on various elements, but im not getting much love. If someone could point me in the right direction here, I would be most appreciative. Working model can be seen at http://www.hinsdaleunitarian.org/kctest/kcmockup.html . I’m not sure if the css file will download, so if not, email me off forum and I can send that as well. Thanks in advance for any help.

Comment by Shiloh Madsen, September 28th, 2007 at 7:51 pm
to Aaron
Yes, I think that’s not really correct too. But read Sean’s comment (May 23rd, 2007 at 3:17 pm). As I guess the initial behavior of the script was the very that you and me assume, but was ‘fixed’ in next versions.

Anyway that’s a great job, thanx guys.

Comment by Max, October 2nd, 2007 at 9:28 am
Hey, great plugin! I’m using it for a current project right now. But i’m having an issue in Opera. The last tab goes below all the rest. and when i navigate through the tabs, it also moves around as i click. Would anyone know what’s causing this?

Thanks!

Comment by john, October 2nd, 2007 at 4:06 pm
How would you create a link that triggers a tab from the outside of the main tab container? I’m not sure how to use the JS code you provided above. And simply linking to the #anchor doesn’t work.

Comment by Andy, October 2nd, 2007 at 7:10 pm
Great plug in! I am going to attempt to implement this on my business site. Thanks for your work; I will post my results.

Comment by Sulman Bhatti, October 11th, 2007 at 4:54 pm
[...] Implementation: (Intermediate) Tab Tutorial [...]

Pingback by Useful Web 2.0 Designs and Techniques, October 21st, 2007 at 8:48 pm

Klaus Hartl – Stilbüro - Klaus Hartl

Accessible, unobtrusive JavaScript tabs with jQuery

274 Comments

Search

Additional Information

Calendar

Most Recent Posts

May 2006
M	T	W	T	F	S	S
Apr				Jun
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31