http://stilbuero.de Klaus Hartl – Stilbüro - Klaus Hartl

Jump to: Search, Additional Information.

Tabs 2.7: Flexibility

April 7th, 2007

Category:
JavaScript,
Web Development,
jQuery

I’ve added a few requested features and fixed some quirks for the Tabs plugin recently.

Increased flexibility

For a much increased flexibility regarding the HTML structure required for a tab interface you can now add particular classes to the unordered list and the tab containers. If no classes are present, the elements are queried relying on the default structure. The tabStruct option still works but is deprecated and will go away with the next release (Tabs 3).

Say you need a div wrapped around each the unordered list and the containers. Provide the following HTML:

<div id="container">
     <div>
         <ul class="tabs-nav">
             …
         </ul>
     </div>
     <div>
         <div id="fragment-1" class="tabs-container">
             …
         </div>
         <div id="fragment-2" class="tabs-container">
             …
         </div>
         <div id="fragment-3" class="tabs-container">
             …
         </div>
     </div>
</div>

That also means that you can easily switch the order of containers and the list:

<div id="container">
     <div id="fragment-1">
         …
     </div>
     <div id="fragment-2">
         …
     </div>
     <div id="fragment-3">
         …
     </div>
     <ul class="tabs-nav">
          …
     </ul>
</div>

As long as you attach these classes to the proper elements, you can go crazy with your HTML. The class names are even configurable via option. If the default structure is used, adding the class names does no harm but it is not required. They are of course required for the look of the tabs, but they are attached by the plugin if not present. The underlying (default) HTML becomes even more unobtrusive that way and it also becomes much easier to add fallback styles for the case of JavaScript being disabled.

Specify active tab by class

Instead of specifying the active tab when initializing tabs you can now also simply add the class to the list element representing the desired tab, like:

<li class="tabs-selected">

Please note that a given fragment identifier/hash in the URL will take precedence and the class will be removed if the active tab doesn’t match. Here’s how the active tab gets computed: fragment identifier overrules class overrules active tab given as parameter in the initialization.

onClick enhanced

Switching tabs is now canceled if the onClick callback returns false. This is useful for instance if proceeding to the next tab requires form validation before.

Some more changes

  • Triggering/Enabling/Disabling tabs can also be done via id instead of an index:

    $('#tabs').triggerTab(1);

    is the same as

    $('#tabs').triggerTab('#tab-1');
  • Fixed a bug (duplicate ids) occuring when multiple Ajax tabs containers are included in the same page. Remote tabs are now numbered consecutively.
  • There’s a new option hashPrefix to define a string that is used as base for constructing the id of a remote tab, such as “#remote-tab-1″.
  • Finally tabs are looking better…
  • I’ve fixed a few little quirks in IE introduced with the Ajax support. Along with that goes an update for the History plugin where I’ve fixed a minor bug that occured both in IE and Safari.

I consider this the last maintenance release for the Tabs plugin. After I’ve tackled Thickbox Reloaded I’m going to rewrite Tabs for Tabs 3, which will allow mixed static/Ajax tabs, easy creating and removing tabs, mouseover tabs…

Comments disabled · Trackbacks disabled · Permalink

73 Comments

Comments feed

  1. Nice updates :D

    Comment by Rikard, April 10th, 2007 at 3:36 pm

  2. Thanks. You made it easy for a noob like me.

    Comment by Noel, April 14th, 2007 at 11:18 am

  3. Hi Klaus,

    I did not find a page for your history_remote plug-in so I will post here…

    One question and one comment:

    1. With FF2 the history_remote plug-in sends two AJAX requests for any link used with the plug-in…I have tracked the problem down to the line


    $.browser.mozilla || $.browser.opera

    _observeHistory function

    if (_currentHash != location.hash) {
    _currentHash = location.hash;
    $('a[@href$="' + _currentHash + '"]').click();
    }

    the click() adds another eventhandler to the existing event handler defined in the $.fn.remote() function used to load the links into the link hash. When this line is removed only one AJAX request is sent but the history function is broken.

    2. When loading AJAX information into a div with the history_remote plug-in and the new info also has links within it, the history_remote plugin-breaks when trying to reload the DOM with the new links…the new links work but the previously loaded links are then broken…I fixed this as follows:

    I added a RexExp search for existing hashed links and when a match is found, the old link is left alone…only new links that are found using the .remote() function are added to the link hash. If you have a better solution,let me know.


    return this.each(function(i) {
    var remoteURL = this.href;
    var hash = '#' + settings.hashPrefix + (i + 1);
    var containshash = new RegExp("^.*#" + settings.hashPrefix);
    if (this.href.search(containshash) == -1) {
    this.href = hash;
    $(this).unbind("click").click(function(e) {
    var trueClick = e.clientX;
    target.load(remoteURL, function() {
    if (trueClick) {
    $.ajaxHistory.update(hash);
    }
    typeof callback == 'function' && callback();
    });
    });
    }
    });

    Cheers from Nürnberg,

    Mark

    Comment by Mark, April 14th, 2007 at 4:15 pm

  4. Hi Again,

    With regards to my earlier post regarding the history_remote plug-in, I have discovered that when using the $.ajaxSetup({async:true}) parameter, FF2 loads the link twice (2 AJAX calls)…if the async parameter is set to false, FF2 only initiates one AJAX call and the plug-in works as it should…

    My question is since AJAX is supposed to be Asynchronous, why is this the case?

    Cheers,

    Mark

    Comment by Mark, April 15th, 2007 at 8:16 pm

  5. Thanks for the wonderful job Klaus…a great job indeed!!

    Comment by James, April 16th, 2007 at 9:50 pm

  6. Author Comment

    Thanks Mark for investigating. I couldn’t always reproduce that behavior you’re describing, just sometimes, which makes it even stranger. That said, I think it has nothing to do with setting the async option to true, instead it just happened by chance maybe while you were testing. Unfortunately I don’t have the time right now to have a deeper look into this.

    Comment by Klaus, April 17th, 2007 at 7:07 am

  7. Hi Klaus,

    Thanks for the input…I have tracked down the problem to a “Timing Issue”…when async:trueis configured the browser and scripts are “non-blocking” and all scheduled functions continue to run… due to the setTimout call in .initialize, the _observeHistory function is called before the actual trueClick in the .remote function. By modifying the .initialize function to look like this:


    // start observer
    if (_observeHistory && _intervalId == null) {
    if ($.browser.safari) {
    _intervalId = setInterval(_observeHistory, 200); // Safari needs at least 200 ms
    } else if ($.browser.mozilla){
    _intervalId = setInterval(_observeHistory, 700); // FF needs at least 700 ms to make sure trueClick is called before setTimout
    } else {
    _intervalId = setInterval(_observeHistory, 100); // The rest
    }
    }

    I hope this is the resolution to the problem…

    Cheers,
    Mark

    Comment by Mark, April 17th, 2007 at 12:31 pm

  8. Hi again,

    disregard my last post….that wasn’t the solution either…by lengthening the _observeHistory Listener interval, the bookmark function didn’t work any more…after some heavy debugging and hair-pulling, I think I have finally found a working solution (works in on IE7 and FF2, safari and opera I have not tested).

    I added the following to each browser part of the the .ajaxHistory main function :

    this.pause = function(millis) {
    var date = new Date();
    var curDate = null;
    do { curDate = new Date(); }
    while(curDate-date

    Modified the .initialize function to look as follows:


    // start observer
    if (_observeHistory && _intervalId == null) {
    if ($.browser.safari) {
    _intervalId = setInterval(_observeHistory, 200); // Safari needs at least 200 ms
    } else if($.browser.mozilla) {
    _intervalId = _observeHistory; //Do not start _observeHistory Listener or bookmark function will cause double ajax loading later
    }
    else {
    _intervalId = setInterval(_observeHistory, 100); // The rest

    }
    }

    And finally modified the .remote function to look as follows:


    $(this).click(function(e) {
    $.ajaxHistory.block(); //Stop the _observeHistory Listener if exists.
    $.ajaxHistory.pause(200);//Wait so the Listener is fully stopped
    var trueClick = e.clientX; // add to history only if true click occured, not a triggered click
    target.load(remoteURL,function() {
    if (trueClick) {
    $.ajaxHistory.update(hash); // setting hash in callback is required to make it work in Safari
    }
    $.ajaxHistory.release(); //Restart the _observeHistory Listener
    typeof callback == 'function' && callback();
    });
    });

    Cheers,
    Mark

    Comment by Mark, April 17th, 2007 at 1:53 pm

  9. sorry, I had some errors in the previous post:

    the three new functions are as follows::

    
this.pause = function(millis) {
            var date = new Date();
            var curDate = null;

            do { curDate = new Date(); }
            while(curDate-date < millis);
        } 

        this.block = function() {
                clearInterval(_intervalId);
        }

        this.release = function () {
            _intervalId = setInterval(_observeHistory, 100);
        }

        this.update = function(hash) {
            _currentHash = hash;
        };

    Cheers,
    Mark

    Comment by Mark, April 17th, 2007 at 1:55 pm

  10. Nice work. I’m a js noob (mostly PHP) and got this working quickly. I do have a noob question though:

    I want to have a tab where my users can submit a search form and view results in a fairly traditional php way. I may ‘ajax-ify’ it if I can figure it out. So this results in a table of results. Each entry will look like this:
    ________________________________________________________________________
    1. first name | last name | Some data | [view][update][delete]
    ________________________________________________________________________

    I was wondering if it is possible to:

    1) trigger the ‘details’ tab using the [view][update][delete] links in the table entries

    and

    2) to change the url of the tabs on the fly. I’m using code igniter and I pass some of the data to the controllers via url i.e. “/mysite.com/application/controller/function/data1/data2/” so I want to be able to change the last 3 or 4 segments of the url depending on which record the user requests.

    Thanks again for the great job on the tabs!

    Comment by Dave, April 20th, 2007 at 12:16 am

  11. Hi Klaus –

    Your tabs plugin is fantastic. I am having a little difficulty with the history/remote plugin in IE, though. On tab #3 I have links back to tab #2 using:

    <a href="#phase-2">Incomplete</a>

    In FF this works well – if you click on the link it takes you to tab 2. In IE it does not. I know I can use the activate method to switch tabs, but if this has a simple solution it would be nice to make it work out of principle :)

    Comment by Daemach, April 20th, 2007 at 7:26 pm

  12. Author Comment

    Dave,

    I’m sorry, changing the URL of a tab isn’t supported. Triggering a tab is done via the triggerTab method. Here’s an eample of how to trigger the first tab by clicking a particular link:

    $(function() {
    $('#trigger').bind('click', function() {
        $('#tabs').triggerTab(1);
        return false;
    });
});

    There’s also an example in the demo. And maybe interesting for you, Phillip Oldham posted a patch that enables triggering a tab while also changing the URL of a tab.

    Daemach,

    thanks for reporting. As soon as I have time again I will have a look into this!

    Comment by Klaus, April 21st, 2007 at 10:00 am

  13. Thank you for this, it saved me a lot of headaches. I was using dynarch’s Rollbar. It worked up to a point till i had a lot of data to show. Your’s works like champ.

    Comment by Ross, April 24th, 2007 at 3:42 am

  14. Hey Klaus,
    First of all, nice work on the script. My question is: how would I integrate cookies with this script? I want my user to go back the last tab they selected while on the site. Any help is greatly appreciated. Thanks!!

    Comment by Jeremy, April 26th, 2007 at 3:33 pm

  15. Even with the flexibility that has been added, is it still a requirement to use div as the tab-container? For example, is there a way I’m just not seeing that would allow me to use dd for the container (hiding the dt with css)? I thought perhaps tabStruct: dl>dd but it didn’t seem to work.

    Anyone know if that’s possible, or am I doomed to have to use div containers.

    Detailed html code example:

    Tab 1
    Tab 2
    Tab 3

    Container 1 Title
    This is what shows up under tab 1
    Container 2 Title
    This is what shows up under tab 2
    Container 3 Title
    This is what shows up under tab 3

    Comment by hyrcan, April 27th, 2007 at 5:37 pm

  16. I fail. lol.

    Lets try that again shall we…

    the code:


    <div id="container">
    <div>
    <ul class="tabs-nav">
    …
    </ul>
    </div>
    <dl>
    <dt>The title not shown</dt>
    <dd id="fragment-1" class="tabs-container">
    …
    </dd>
    <dt>The title not shown</dt>
    <dd id="fragment-2" class="tabs-container">
    …
    </dd>
    <dt>The title not shown</dt>
    <dd id="fragment-3" class="tabs-container">

    …
    </dd>
    </dl>
    </div>

    Comment by hyrcan, April 27th, 2007 at 5:41 pm

  17. Hi, I have a small suggestion – I am dynamically creating tabs on-the-fly, so I have to call $(’#element’).tabs() on every change. So I had to slightly modify the code and add tabs.unbind(’click’) and so on with every other event.

    Are you planning support for changing tabs in version 3?

    Comment by Láďa, April 29th, 2007 at 10:55 am

  18. Author Comment

    Jeremy, cookie support is not build right into the plugin, but its quite easy to integrate that. You’d need to set the cookie in the onClick callback for tabs, and read the value from the cookie to pass the active tab to the tabs initialization method. I have already outlined code that does that in this comment.

    Hyrcan, the code in your example should work, as long as they have the class “tabs-container” attached. You don’t need the tabScruct option which is deprecated, but if you want to use it, it had to look like: tabStruct: '>dl>dd'.

    Láďa, creation and removal of tabs will be part of Tabs 3.

    Comment by Klaus, April 29th, 2007 at 12:24 pm

  19. Nice to hear this and many thanks for this plugin, it truly rocks.

    Comment by Láďa, May 1st, 2007 at 3:13 pm

  20. Btw. I think you should consider putting “Donate via PayPal” somewhere, I am pretty sure that you already saved many hours of work to all users of Tabs ;-)

    Comment by Láďa, May 1st, 2007 at 4:24 pm

  21. when using the ajax tabs:
    $('#container-9').tabs({ remote: true });

    it seems as if it loads the 1e tab two times.

    this gives a very ugly flashing effect, anyone know how to overcome this?

    Comment by wolvman, May 2nd, 2007 at 2:25 pm

  22. I’ve been trying to upgrade my website from a homegrown tabs/history setup to a jlibrary one. I’ve pretty much given up on the tabs plugin for my implementation, but I’ve been really banging my head against the wall trying to get the history plugin to work. I didn’t realize that it only works on anchor tags (all of my navigation is in image maps. I managed to get it working by finding every occurance of a[@href$= and duplicating it for area as well, for example :


    if (_currentHash != location.hash) {
    _currentHash = location.hash;
    $('a[@href$="' + _currentHash + '"]').click();
    }

    becomes:

    if (_currentHash != location.hash) {
    _currentHash = location.hash;
    $('area[@href$="' + _currentHash + '"]').click();
    $('a[@href$="' + _currentHash + '"]').click();
    }

    It all seems to work now, you just have to make sure that your areas and anchors have different prefixes, or in this case the anchor link will be the one that displays when loading the history.

    Now to make it generate meaningful hashes so that reordering the navigation won't break bookmarks...

    Comment by extent, May 4th, 2007 at 4:27 am

  23. I really love your tabs, you did a really GREAT job with them. I didn’t use them in the past because the fact they are fixed width tabs. With that said I rewrote the CSS and some of the code to now look like EXTJS as well as dynamic width’s.

    Only uses 2 images. Left corner, and right corner (which is also used for bg of the center). Both images are used 2 times, selected and not selected. So bassicly each image is really two. On hover or selected it just changes the position down the second image.

    The only code that needs changed is an added <span> after the <a>.

    I will email you the code after I add a few more features to it.

    Again, GREAT plugin!

    Sincerely,
    Dave Schlaegel

    Comment by Dave Schlaegel, May 4th, 2007 at 5:33 pm

  24. Sorry seems your page accepts html, I was trying to say it only needs an added <span> after the <a> as well as all the css of course.

    Comment by Dave Schlaegel, May 4th, 2007 at 5:36 pm

  25. That was easier than I thought.

    Find:

    var hash = '#' + settings.hashPrefix + (i + 1);

    if (this.alt) {
    var hash = ‘#’ + this.alt;
    }
    else {
    var hash = ‘#’ + settings.hashPrefix + (i + 1);
    }

    Takes the alt tag and makes it the hash for the link. If there is none it falls back to auto numbering.

    Comment by extent, May 5th, 2007 at 12:50 am

  26. Oops, I screwed up the markup, should still be obvious tho, find the first line and replace with the if else

    Comment by extent, May 5th, 2007 at 12:52 am

  27. Hi Klaus,
    zu deinem schönen Remote Plugin sind mir ein paar Sachen aufgefallen (Ich habe da aber nicht so richtig den Überblick):
    1. Doppelte Calls
    zu dem – von Mark genannten – Bug im Remote Plugin ist mir gestern bei der Arbeit folgendes aufgefallen:

    Du machst das History Update erst, wenn das XHR erfolgreich abgearbeitet ist. Was, wenn ein XHR länger dauert als die Intervall-Überprüfung einsetzt, dazu führt, dass neben einem “TrueClick” noch ein weiterer “FalseClick” nachgelegt wird. Spricht was dagegen die Anweisung:
    if (trueClick)
    jQuery.ajaxHistory.update(hash);

    bereits beim Klicken auszuführen statt erst im Ajax-Callback?

    2. Triggern des FalseClicks
    Da ich noch überlege meine Hash-Werte selbst aus der URL zu bilden und es daher auf einer Seite mehrere URLs mit dem selben Ziel geben kann, wäre es BulletProof, wenn du zum Selektor noch ein :first dazu packen würdest (Beispiel für IE-Trigger: $(’a[@href$="' + iframeHash + '"]:first’).click();)

    3. Browser-Detection (Eigentlich total nebensächlich)
    a) Konqueror
    Kann es sein, dass Konqueror sich was das RemotePlugin angeht, genauso verhält wie Safari und wäre es dann nicht gut, wenn man die Anweisung ebenfalls dem Konqueror zukommen lässt? (Die Unterstützung von jQuery für Konqueror ist ja dafür, dass Konqueror nicht getestet wird, recht gut.)
    b) FF/Opera
    Das Verhalten von Opera und FF entspricht ja dem, was man grundsätzlich von jedem Browser erwarten darf. Man könnte das ja eigentlich am Schluss mit else oder else if(typeof window.location.hash) als Default erklären, ohne extra auf Mozilla oder Opera zu testen. (Es ist natürlich klar, dass es letztendlich nur mit den beiden Browsern funktionieren wird und daher im Ergebnis keinen Unterschied macht.)

    Comment by alexander farkas, May 5th, 2007 at 10:40 am

  28. Author Comment

    Alexander, danke für dein Feedback. Das Timing Problem ist jetzt offensichtlich, danke für den Hinweis! Leider gab es einen Grund, die History erst im Callback upzudaten, anders hat es im Safari nicht funktioniert… scheint etwas komplexer zu sein das ganze, momentan habe ich keine Zeit, aber ich werde mich dem Plugin mal wieder etwas ausführlicher widmen. Ich muss das nochmal testen, ansonsten hat Mark ja schon einen etwas aufwendigeren Fix gefunden.

    Hinsichtlich Browser Sniffing, ich bin da auch kein grosser Freund von, vielleicht kann ich auf den letzten Branch verzichten. Der YUI history manager hat das – wie zu erwarten – intelligent gelöst und berücksichtigt bereits, dass sich die nächste Safari Version wie Opera/Firefox verhält…

    Also wie gesagt, hier ist nochmal Arbeit reinzustecken.

    Comment by Klaus, May 5th, 2007 at 11:09 am

  29. Ok question, looking at Mark’s timing changes, when he releases the block on the listener he setInterval at 100ms for all browsers, but during initialization for Safari it’s set to 200. Should reissuing the listener at 100 for all platforms work or should there be some additional browser detection logic in there?

    Comment by extent, May 5th, 2007 at 6:13 pm

  30. Hi Klaus,

    mit dem Browser Sniffing sehe ich das nicht so eng, wenn es nen Grund dafür gibt. Ist halt ein notwendiges Übel. Man kann halt nie in die Zukunft gucken.

    Interessant zu wissen, dass der nächste Safari das gut macht. Ich wette sogar, dass der nächste IE das auch packen wird.

    Warte gespannt auf deine neue Version, bis dahin benutze ich nen Workaround.

    Comment by alexander farkas, May 6th, 2007 at 9:57 am

  31. much thanks for this.

    i’m noticing some odd behavior– sometimes when you click tabs that are not the first tab it briefly (less than one second) shows the content of that tab, and then switches back to the first tab again.

    Comment by tom, May 6th, 2007 at 6:40 pm

  32. GDay Klaus,
    First of all, I think its great you do this stuff in your spare time, and what a great job you do!
    I’m actually trying to trigger multiple tabs with one click – I know this must sound strange, but if you see the context I’m doing this in you’ll understand why.
    Initially, I simply added in all the IDs of the fragments I wanted to open in a comma separated format into the href attribute of my list item, this worked perfect in everything except IE6 and IE7.
    So now I’m trying to use triggerTab().
    I’ve set up the following code:

    So basically I’ve just looped through, put the actual id’s into a variable and tried to trigger those tabs in the loop.

    It still isn’t working for me yet though, and firebug in firefox tells me the error is actually in JQUERY itself, not your tabs js or anything.. so my question is.. “SHOULD” this approach be working? or am I way off? If the latter, do you have any suggestions off the top of your head?

    Thanks a ton
    Rolley, Qld Australia

    Comment by Rolley, May 7th, 2007 at 12:31 am

  33. haha that’s funny, it left the code out:

    $(function() {

    $(’#colwide’).tabs({});

    var tab;
    $(’#trigger’).bind(’click’, function() {
    for (var x = 1; x

    Comment by Rolley, May 7th, 2007 at 12:32 am

  34. The page is located here.

    As you can see, the external content is loaded but the tabs themselves don’t work or switch between the content. The tabs work if the javascript is merely:

    $(document).ready(function() {
    $(”#tabcontainer”).tabs( { remote: true});
    });

    Comment by Michelle, May 7th, 2007 at 7:32 pm

  35. Great work! For the tabs-container, I use border 1px to create a box, and then apply images in the corners to create a rounded effect. To stop a quick flash between the square box and then rounded corners every time a tab is clicked, I applied the css to a div, preceding the tabs-container (so now is there is no flicker).

    My question is, this doesn’t work with ajax tabs, because the tabs-container is inserted straight after the ul. How would I keep my extra div after the ul, and before tabs-container when using ajax tabs???

    Oh – I also altered the css so that the tabs now use a ’sliding doors’ technique. This is a big improvement, and you should consider incorporating it into the next release.

    Thanks for any help.

    Comment by Patrick Harris, May 10th, 2007 at 12:04 am

  36. Hi, I love the tabs – great work.

    However, I’m having a problem in Safari when some of a tab’s contents has overflow:hidden applied to it — when you switch to that tab the content disappears completely! It works fine in Firefox.

    I have a simplified test page here if you have any ideas. Many, many thanks in advance.

    (I need to use overflow:hidden as one of the tabs in my site lists user comments which may contain very long URLs.)

    Comment by Phil Gyford, May 11th, 2007 at 8:27 pm

  37. I made some modifications to your great script to suit my needs, but I wonder what packer you use to compress the code? Thanks!

    Comment by Ian, May 13th, 2007 at 9:28 am

  38. Is it possible to do something like this:

    Sub1
    Sub2
    Page
    Other page

    (first 2 are tabs, other 2 are normal links)
    ?

    Comment by Teamon, May 13th, 2007 at 3:43 pm

  39. Is it possible to do something like this:

    Sub1
    Sub2
    Page
    Other page


    (first 2 are tabs, other 2 are normal links)
    ?

    Comment by Teamon, May 13th, 2007 at 3:44 pm

  40. Hi, I’m trying to integrate this with an existing layout design but it won’t work…

    If I remove all my design codes, it works.

    Here’s the code:
    [html]

    Home
    About
    Affiliate
    FAQ
    Press Release

     

    Home

    About

    cafe

    FAQ

    PR

     

     

    [/html]

    Any help?

    Thanks!!

    Comment by Newbie to Tabs 2.x, May 15th, 2007 at 9:10 am

  41. Hi, I’m trying to integrate this with an existing layout design but it won’t work…

    If I remove all my design codes, it works.

    Here’s the code:

    Home
    About
    Affiliate
    FAQ
    Press Release

     

    Home

    About

    cafe

    FAQ

    PR

     

     

    Any help?

    Thanks!!

    Comment by Newbie to Tabs 2.x, May 15th, 2007 at 9:11 am

  42. Karl,
    Thanks for the wonderful plugin and thank you for the auto-rotate demo, its just what I need. But there is one small issue with it.

    Whenever the tabs rotate it changes the URL in the address bar and if someone is trying to type in another URL, when the tab changes it overwrites what the user had entered.

    That leads me to the question, is there a way to use something other than anchor tags in the list? Something like:

    Tab 1
    ....


    rather than:

    Tab 1
    ....

    Thanks in andvance.

    Comment by Michael, May 17th, 2007 at 9:38 pm

  43. Oops, it left out the code :^(

    <ul class='tabs-nav'>
    <li><span link='tabID'>Tab 1</span></li>
    ....
    </ul>

    rather than:

    <ul class='tabs-nav'>
    <li><a href='tabID'>Tab 1</a></li>
    ....
    </ul>

    Comment by Michael, May 17th, 2007 at 9:41 pm

  44. Hi,

    Tabs = awesome.

    A few comments up Tom said:

    much thanks for this.

    i’m noticing some odd behavior– sometimes when you click tabs that are not the first tab it briefly (less than one second) shows the content of that tab, and then switches back to the first tab again.

    I’m having the same problem and was wondering if anyone had come up with a fix.

    I’m really looking forward to Tabs 3 – creation/removal of tabs will be a big plus. I was also wondering if changing the link of a tab will be part of Tabs 3. I have a select box to allow a user to choose a field, and then I would like to use tabs to display different sets of properties about the selected item. But I would need to change the link of each tab in order to get the data about the newly selected item.

    Much thanks for a great plugin.

    Comment by Ed, May 24th, 2007 at 5:49 pm

  45. I made some more small tweaks to Marks .remote delayed function to eliminate the pause function so it doesn’t sit and rape your processor while waiting for the listener to die

    Here’s my modified function. $.ajaxHistory._detectedInterval is a variable I set during init with either 100 or 200 depending on the browser.

    
$.fn.remote = function(output, settings, callback) {

    if (typeof settings == 'function') { // shift arguments
        callback = settings;
        settings = {};
    }
    settings = $.extend({
        hashPrefix: 'remote-'
    }, settings || {});

    return this.each(function(i) {
        var remoteURL = this.href;
        if (this.alt) {
			var hash = '#' + this.alt;
		}
		else {
			var hash = '#' + settings.hashPrefix + (i + 1);
		}
        this.href = hash;
		$(this).click(function(e) {
			$.ajaxHistory.block(); //Stop the _observeHistory Listener if exists.
			var trueClick = '';
			if (e.clientX) { trueClick = '1';} // add to history only if true click occured, not a triggered click
			setTimeout("updatePage('"+trueClick+"','"+remoteURL+"','"+hash+"','"+output+"');",$.ajaxHistory._detectedInterval);
		});
    });

};

updatePage = function(trueClick,remoteURL,hash,output){
	    var target = $(output).size() && $(output) || $('').appendTo('body');
		target.addClass('remote-output');

		target.load(remoteURL,function() {
		if (trueClick) {
					$.ajaxHistory.update(hash); // setting hash in callback is required to make it work in Safari
		}
		$.ajaxHistory.release(); //Restart the _observeHistory Listener
		typeof callback == 'function' && callback();
		});

};

    Comment by extent, May 25th, 2007 at 10:54 am

  46. Hello,

    I’m trying to change the layout of the tabs so I can have the tab menu to the right but without any luck.

    html, body { height: 100%; margin: 0; padding: 0; }
    #wrapper { width: 100%; height: 100%; overflow: auto; }
    .left { height: 100%; background-color: #c00;}
    .right { float: right; width: 150px; height: 100%; background-color: #00c;}

    TAB MENU HERE
    TABS HERE

    How can that be done?

    - Lars

    Comment by Lars Nørgaard, May 26th, 2007 at 8:11 pm


  47. html, body { height: 100%; margin: 0; padding: 0; }
    #wrapper { width: 100%; height: 100%; overflow: auto; }
    .left { height: 100%; background-color: #c00;}
    .right { float: right; width: 150px; height: 100%; background-color: #00c;}

    Tab menu here
    Tabs changing here

    – Lars Nørgaard

    Comment by Lars Nørgaard, May 26th, 2007 at 8:12 pm

  48. hmm… I can’t post the html :(

    This is the div/css code I’m using to so I can have the menu on the left http://www.webmasterworld.com/css/3314013.htm

    Comment by Lars Nørgaard, May 26th, 2007 at 8:14 pm

  49. hi, first of all great work on the updates, these have been very useful to me on some projects i have been working on. One thing i which i wanted to do which i couldnt get working was to use the tabs inside an (inline content) thickbox window. The anchors were firing properly (in the url) and the “current” tab is changing to reflect the clicks but the corresponding content doesn’t appear/switch.

    i tried including class=”thickbox” on all the tab links incase it was thickbox not recognising that i wanted to load it within the thickbox window but still no luck.

    i know its not a direct conflict between the 2 scripts because they work fine together on the same page, just not when i want the tabbed content to open in the thickbox.

    anyone got any idea why this would be happening?

    Comment by bw, June 4th, 2007 at 3:54 pm

  50. bw, make sure you dont include thickbox’s jquery file as tabs already has jquery-1.1.2.pack.js, that worked for me.

    Comment by Ever, June 8th, 2007 at 7:29 am

  51. still no luck. I only have one cor jquery file included 1.1.2 (packed). Both functionalities work fine independantly so i know theres nothing broken as such. But i cant get the tab functionality to work *within* the thickbox window, the tabs visually change and appear to have been selected but the corresponding content does not load in.

    its a head scratcher

    Comment by bw, June 11th, 2007 at 11:20 am

  52. Hallo Klaus,

    heute habe ich wieder etwas Zeit, so dass ich Dir zu deinem History Plugin etwas schreiben kann. Das Doppel-Feuer hast Du ja inzwischen gelöst (gab ja plötzlich einen extremen Sturm von Anfragen dazu :-))

    Ich habe Dein Plugin für diese Seite verwendet: http://www.kantpraxis.de

    Hierbei sind mir folgende Sachen aufgefallen, die ich geändert hab.

    1. trueClick zu ungenau
    Deine Abfrage If(trueClick) ist zu ungenau. Bei Tastaturnutzern (Stichwort: Accessibility) ist trueClick == 0, was also oben ungewünschterweise false zurückliefert.

    2. “HistoryTrigger” kann bei komplexeren Webseiten ins leere gehen
    Bei Webseiten, bei denen die “remote-Links” innerhalb des sich ändernden Bereichs liegen, kann das triggern ins leere gehen. Da ich das triggern eigentlich ganz cool finde und ich die daraus entstehenden Informationen auch für einige Animationen nutze, habe ich das komplett beibehalten. Allerdings bildet sich der hash-Wert bei mir aus dem href-Wert (und kann wieder in einen richtigen Link zurückübersetzt werden) und ich habe parallel zu der “RESET_EVENT” Methode eine “LinkNotFound” Event Methode geschrieben.

    Vielleicht hilft Dir das ja. Vielen Dank für dein geniales Plugin. hat mir sehr viel zeit und nerven erspart.

    bis denne
    alex

    Comment by alexander farkas, June 14th, 2007 at 1:59 pm

  53. Hi all,
    I’m working on ajax tabs + enabling / disabling / triggering tabs.

    Thanks to Klaus tips I wrote this:

    $(’#mycontainer’).tabs({ remote: true, disabled: [3,4,5,6,7], onShow: handleOnShow });

    and

    function handleOnShow(clicked, show, hide) {
    $(’#link1′).bind(’click’, function() {
    $(’#mycontainer’).disableTab(1);
    $(’#mycontainer’).enableTab(2);
    $(’#mycontainer’).triggerTab(2);
    });

    and in the first page loaded via ajax I have a:

    test

    I have a similar link in each page loaded via ajax and of course relative function in handleOnShow.

    It works perfectly (hmm.. there’s a problem with browser buttons forward and back, but I may solve it easily) but only for tabs 2,3,4… not for the link in the first page, it doesn’t work at all.

    If i go to tab 2, then I come back to the first, then the link works as expected…

    Does anyone have an idea on why this happens and how to solve?

    Thanks

    Comment by Paolo, June 19th, 2007 at 12:37 pm

  54. Klaus,

    I love the new Tabs jQuery you have created, however, I am having one issue I could use some help on. My problem occurs on the loading my website. I am currently running on WordPress and because there are a couple of other elements (other JavaScript, content, AdSense) it causes the tabs to appear broken until the page fully loads and the script runs.

    You can see my problem on: http://www.MyRetirementProject.com

    Is there a way to control what is loaded to let the Tabs script run prior to the load completing? Any suggestion would be really helpful.

    Thanks

    Corey Stroeder

    Comment by Corey Stroeder, June 20th, 2007 at 9:34 pm

  55. It it possible to reload the tab via triggerTab() if the tab is already active?

    Comment by Paul, June 28th, 2007 at 8:51 pm

  56. I am having a problem with tabs at the moment. For one, I can’t get the seperate divs to be specific to each tab (all the text just shows below tabs one, two, and three). And two, the code I have seems to be stuck in a loop and keeps loading and loading inside the page.

    $(document).ready(function(){
    $('#container').tabs({ remote: true });
    });

    One
    Two
    Three

    Testing jQuery Tabs Functionality

    Can't figure out images yet.

    Hopefully will have it soon.

    So wtf is wrong with my brain?

    Comment by Marc, June 29th, 2007 at 5:16 pm

  57. woops, here is the pastecode link http://pastecode.net/?action=viewpost&tag=1878

    p.s. I’m a total noob.

    Comment by Marc, June 29th, 2007 at 5:21 pm

  58. Author Comment

    Marc, the remote option for tabs only works with links pointing to a ressource other than a fragment identifier/hash – the content gets loaded from the ressource a link points to. That way it’ll degrade gracefully with JavaScript turned off. Read more about how it works.

    Comment by Klaus, June 29th, 2007 at 7:24 pm

  59. This is great! Thanks so much, simple and easy to use code for something that is rather complex.

    I have noticed however that the remote / history js works perfect in IE, Mozilla FF, and Safari. However in Opera 9.20 on OSX the history does not work properly, it shows the link change on the link bar but does not refresh in the page. I obviously don’t know why this is happening. But I just thought that you might want to know.

    Thanks so much again….simply amazing!
    Case

    Comment by Case, July 2nd, 2007 at 10:10 am

  60. Thank you for providing such a great application.

    I have a few suggestions for your next release, if your interested.

    They are…

    -Integrate or use your cookie plug-in along with tabs. Why? Well instead of using the history plug-in, which is great by the way, for some instances this can be more of a usability issue and an end-user should still be able to select a tab and have it remembered, for example if the end-user refreshes the page the last tab selected should still be selected. I would recommend setting a cookie every time a tab is selected, always changing the current value to the current tab id, and setting the life of the cookie to expire once the end-user leaves the site or closes the browser window. In addition, the cookie should be available for testing so that other logic can be used. For example, if the cookie is empty or not set then show my flash movie within the first fragment block else show the fragment block that equals to the value of the cookie and also show the “show flash” link in the upper right corner.

    -Integrate the corners plug-in (more information at http://methvin.com/jquery/jq-corner.html) so that developers don’t have to rely on the sliding doors technique and the use of an image. Though a web developer should have the option to use either.

    -The ability to make all the tabs the same height (not the fragment/content areas — the actual tabs themselves).

    -The ability to apply a minimum and maximum height and width for the fragment/content areas. For example, if I had multiple tabs, I would want the height to have a minimum size of a 100 pixels and the maximum of 500 pixels. Thus, if one of the content areas is 250 pixels high I would want it to auto size to 250 pixels. Then if another content area is 75 pixels high, I would want it to expand to 100 pixels. Likewise, if I had a content area of 1000 pixels high, I would want it to shrink to 500 pixels and apply an overflow:auto. I know that this can be set in the css but it would be neat to have it set with a passed variable in the javascript.

    -The ability to show/hide a tab depending on when other tabs are selected. For example, referring to my first suggestion with “show flash”, I would like this tab to hide on page load or when viewing the flash, but show when one of the other tabs are selected thus allowing the end-user the option to go back to the flash. This might also be good for multi-section forms (e.g., a loan application). As an end-user completes each section the next tab appears — this example would also work great with the history plug-in.

    -Lastly, you might want to check out DOMTABS (http://onlinetools.org/tools/domtabdata/) for any additional features — such as graceful “fall-back” features.

    Thanks,
    Having fun with jquery — it’s rocks.

    Comment by Matthew Moore, July 25th, 2007 at 5:23 pm

  61. i also am having trouble with tabs flashing briefly, and then going back to the tab that had already been selected.

    is there any fix for this?

    Comment by chris Corwin, August 9th, 2007 at 3:19 am

  62. Hi,
    Its fentastic and thank you.
    I am using ajax tabs. Everything works perfect.
    But I am wondering if I can load the first(default) ajax before the page load?
    So that I can avoid flickering
    Now after the DOM loaing first tab is calling ajax page and showing loading which is not right. Hwne they click other tabs loading image is fine but not for first time page load.
    Please give me tip to do this.

    Comment by Nagesh, August 13th, 2007 at 4:44 pm

  63. I am curious if you have thought about multiple rows of tabs.
    I am running into a situation where two rows of tabs would be useful. I can do it but if I select a tab in the first row and then select a tab in the second row it leaves the last tab in the first row as selected. An example of what I am talking about can be found at: http://overhere.net/multiTabs/.

    Any suggestions?

    -Sean

    Comment by SeanJuan, August 23rd, 2007 at 6:19 am

  64. Awesome plugin thanks for sharing it. I’m experiencingn one oddity though, when I link to the a specific tab from a seperate page I get the content that’s in the next tab. For example:

    I link to tab#2 from the home page but when clicked on it, the page loads and the tab displayed is tab#2 with tab#3’s content. When I click around the tabs appear correctly once on the page. If I link to #3 I’ll get #4 with #3 tab. But, if I link to #1, I get #1 with the right content. Am I linking wrong? Have you come across this before? I hope this makes sense.

    Comment by Ryan, August 31st, 2007 at 4:28 pm

  65. This is a great piece of work. On your demo page your tabs maintain their state when the page is refreshed; if a tab is active it comes up active on the refreshed page. How do you do that? Would it work the same way with a contact form on the second tab, say, so that the user could see error or success messages?

    kind regards

    Joe Baich

    Comment by Joe, September 5th, 2007 at 10:15 pm

  66. Author Comment

    Joe, this is because I’m also using my history plugin on the demo page together with the tabs. This enables the back button but a nice side effect is the bookmarkability of a tab as you have described. The key is that if you click on a tab ,the hash portion, technically correct the fragment identifier of the url changes, for example #fragment-11. If you then reload the page the plugin knows that it should activate the tab accordingly. Hope this makes sense.

    Comment by Klaus, September 6th, 2007 at 10:08 am

  67. Is there a way to add <div> tags to the content containers themselves?

    I would like to create some tabs with sub-divisions (i.e., div’s within the div’s).

    For example:

    Products
    Service

    content here
    content here
    content here

    content here
    content here
    content here

    Thanks in advance,

    Matthew

    Comment by Matthew Moore, September 10th, 2007 at 10:55 pm

  68. Is there a way to add <div> tags to the content containers themselves?

    I would like to create some tabs with sub-divisions (i.e., div’s within the div’s).

    For example:

    <ul id=”tabs”>
    <li><a href=”#products”>Products</a></li>
    <li><a href=”#services”>Service</a></li>
    </ul>
    <div id=”tab-sections”>
    <div id=”products”>
    <div id=”product-a”>content here</div>
    <div id=”product-b”>content here</div>
    <div id=”product-c”>content here</div>
    </div>
    <div id=”services”>
    <div id=”service-a”>content here</div>
    <div id=”service-b”>content here</div>
    <div id=”service-c”>content here</div>
    </div>
    </div>

    Thanks in advance,

    Matthew

    Comment by Matthew Moore, September 10th, 2007 at 10:57 pm

  69. Author Comment

    Matthew, as described already in this post, just add the proper class to the containers:

    <div id="products" class="tabs-container"> and so on.

    Or give Tabs 3 a try ;-) – it will do everything automatically.

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

  70. I apologise in advance for having to ask because I’m sure this is very simple to achieve, but I’ve been struggling for the last couple days on it.

    I’m trying to get “tabs within tabs” working … i.e. I have 3 main tabs, and within the 1st tab I want to have another independent group of tabs.

    If at all possible, would you mind showing an example of how this should be done using tabs 2.7 ??

    Thanks,
    Philip

    Comment by Philip Hunt, September 11th, 2007 at 8:48 pm

  71. Author Comment

    Philip, here’s an example.

    Comment by Klaus, September 11th, 2007 at 8:59 pm

  72. Do you have an example page using tabs3 or any documentaion?

    Thanks and this is some great work!!!!!

    Comment by Aaron, September 26th, 2007 at 5:35 pm

  73. wolvman and chris,

    I was having the same flash problem with my tabs and how I fixed it was by removing the history_remote javascript. I just don’t include it in my page and it works fine.

    Comment by Greg, October 12th, 2007 at 10:06 pm

Klaus Hartl – Stilbüro is powered by WordPress, jQuery, XHTML, CSS and me.