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

Jump to: Search, Additional Information.

Bookmarkable Tabs

July 13th, 2006

Category:
JavaScript,
Web Development,
jQuery

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

The URL for a page with tabs on it must simply contain a fragment identifier (#hash) which refers to a fragment representing the content of one tab. This makes the belonging tab active and the tab bookmarkable. Try this out on the demo page (look at the tabs on top: without the hash portion in the URL the first tab is active):

http://stilbuero.de/jquery/tabs/#section-3

The tab which link refers to the fragment with the id section-3 becomes active:

<!-- tab -->
<li><a href="#section-3">Section 3</a></li>
<!-- tab content -->
<div id="section-3">
    …
</div>

Some notes:

URL takes precedence over option to compute the active tab in the beginning. Any value that is passed as option to the plugin, like {on: 3}, will be ignored if the URL’s fragment identifier matches a tab content holder’s id. If not the active tab is computed as usual (with or without options).

The browser’s scrollbar stays in place. It will not be scrolled to the specified fragment (if that belongs to a tab that is). This would happen especially if a page has a lot of content and the fragment is nearer to the bottom of the viewport or even below.

Comments disabled · Trackbacks disabled · Permalink

23 Comments

Comments feed

  1. Hi,
    Very nice effects with tabs
    But it’s not working fine with firefox
    Checkout the sliding effects in firefox

    Comment by vivek, August 10th, 2006 at 6:34 am

  2. Author Comment

    The effects don’t work currently because of the heavy development jQuery is under at the moment. I’m waiting for the stable version 1.0…

    Comment by Klaus, August 18th, 2006 at 10:36 am

  3. jQuery 1.0.1 is out!

    Is the plugin working with this version?!

    Comment by Hansa, August 31st, 2006 at 11:02 am

  4. Author Comment

    Unfortunately not. In 1.01 a major bug was introduced, the ‘>’ selector is broken, which is used by the plugin.

    We have to wait for jQuery 1.02. The plugin works with version 1.0 though.

    Comment by Klaus, August 31st, 2006 at 3:45 pm

  5. Author Comment

    I have uploaded a patched Version of jQuery 1.01 with which the tabs plugin works again. Feel free to use it, but I strongly recommend to wait for an official bugfix.

    Comment by Klaus, August 31st, 2006 at 4:54 pm

  6. Where the “patched” plug-in located? Thanks! :-)

    Comment by David Lewis, September 1st, 2006 at 1:52 am

  7. Author Comment

    David, no need for the patch anymore. The bugs in 1.01 are fixed and I uploaded a current version. Effects are now working properly as well.

    Comment by Klaus, September 1st, 2006 at 5:48 pm

  8. Is there an easy way to make all tabs hidden on initial load, and then make an open tab collapse if you click on it’s anchor again?

    Comment by Cliff, September 12th, 2006 at 11:24 pm

  9. Author Comment

    Cliff, that’ll be not to difficult and has been requested quite a few times… I will have a look into it soon.

    Comment by Klaus, September 13th, 2006 at 7:55 am

  10. Hi Klaus, I asked the same question on the jquery mailing list too. I do have it working now, and am happy to share my code additions with you if you want. It’s pretty simple though, so you may want to just do it yourself. The sample I have up is at http://langdata.potowski.org

    Comment by Cliff, September 14th, 2006 at 4:12 am

  11. Cliff, I can’t access your sample… http://langdata.potowski.org has a login screen

    Comment by Walts, September 20th, 2006 at 3:38 pm

  12. Thanks for this! Bookmarkable is great, but the way it is now, clicking on tabs doesn’t change the URL in the address bar, so when you bookmark it, you still bookmark the initial page. I made a small change so changing tabs changes the address (without reloading the page). Patch follows.

    –Erik


    69c69,70
    < var tabToShow = $('#' + re.exec(this.href)[1]);
    ---
    > var newHash = '#' + re.exec(this.href)[1];
    > var tabToShow = $(newHash);
    70a72
    > location.hash = newHash;

    Comment by Erik, September 26th, 2006 at 10:08 pm

  13. Author Comment

    Erik, you are right of course. The tabs are bookmarkable only to a certain extend the way they are.

    But there’s one problem with your solution. If you click on a tab the page will scroll to the element with the refering id. This is not notable if the tabs are on top of the page and the scrollbar is on top as well, but try it with tabs that are somewhere in the middle or the bottom of the page.

    This is annoying and I haven’t found a solution for this yet.

    Comment by Klaus, September 27th, 2006 at 7:41 am

  14. Author Comment

    I have worked on the plugin – the tabs are now bookmarkable without the annoying scrollbar behaviour. Check it out.

    Comment by Klaus, September 27th, 2006 at 5:41 pm

  15. Preved! Nice resourse! Kagdila? I’m medved

    Comment by Artioma, October 19th, 2006 at 11:20 am

  16. I’m currently working on a new design for my main page, and I’m using your jQuery Tabs plugin to make page navigation a bit smoother. Anyway, I’ve got this one problem that I’m trying to fix” when clicking on the various tabs, the adress bar changes the URL, but if I hit the back or forward button, it doesn’t navigate through them. Is there a way to get the browser navigation buttons working. If not, is there a way to disable the nav buttons like in your original jQuery tab plugin?

    Thanks

    Comment by Shimoroka Kemryu Gotax, October 27th, 2006 at 3:27 am

  17. Author Comment

    I’m workin on a history plugin that fixes the back button. It is actually working already but with some quirks in IE. I hope I’m going to release it this weekend.

    Comment by Klaus, October 27th, 2006 at 9:27 am

  18. [...] Update: Bookmarkable Tabs [...]

    Pingback by Klaus Hartl - Stilbüro : Accessible, unobtrusive JavaScript tabs with jQuery, November 5th, 2006 at 10:48 pm

  19. [...] 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:41 am

  20. I have a problem with the bookmarking function, when i have the tabs in a div, the hash changes, but when i press the back button or try to go to the hash manually in the browser, nothing changes. Is it not possible to bookmark Tabs that are inside of a div?..

    Comment by Mikael, February 16th, 2007 at 11:31 pm

  21. Im sorry, i found out the reason why. Didn´t notice that it had to be activated first. You can remove the pre-post to.

    Comment by Mikael, February 16th, 2007 at 11:38 pm

  22. Hi!
    I discovered a problem with the history plugin. If you’re using it in a page over HTTPS, IE6 (not 7) seems to create with the tag a src attribute by default with a HTTP ressource. The browser pops up a warning about the page containing both secured and unsecured data.

    First I did some testing myself and I changed the code to put some dummy src attribute (src=”/”) in the creation and the browser doesn’t show any more the warning. The dash “#” doesn’t work, neither an empty string…

    With some googling if found this link with 2 solutions that work for me:
    – src=”javascript:void();”
    – src=”.”

    Check the link: http://gemal.dk/blog/2005/01/27/iframe_without_src_attribute_on_https_in_internet_explorer/

    Can you add this “trick” in a new version of the plugin?

    Comment by Marco, August 14th, 2007 at 4:23 pm

  23. I like very much your solution …

    I’m missing cookies …
    in order to remeber tab state …

    Comment by feha, October 22nd, 2007 at 8:10 pm

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