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

Jump to: Search, Additional Information.

Tabs Plugin: More flexibility

May 14th, 2007

Category:
CSS,
JavaScript,
Web Development,
jQuery

Just a short note, I’ve updated the CSS for the Tabs plugin – because people did not stop asking – and tabs have a flexible width and height again. They still maintain a minimal width as well, so that tabs with short titles, as in the demo, will have the same width. Otherwise it would look a little cluttered (well, at least to me). I’m using a sprite technique for the different parts of the tab of course, thus only one image needs to be downloaded.

Important to know is that this required an additional span element nested in the anchor element of a tab.

Comments disabled · Trackbacks disabled · Permalink

81 Comments

Comments feed

  1. I’m glad you’ve changed the css. I haven’t had a chance to look at it yet, but you shouldn’t need to add in an extra span. There are many examples, but one good one is at http://www.cssplay.co.uk/menus/sliding_doors.html … an extra span should only be necessary to get the image change on hover working with ie5/6.

    Comment by Patrick, May 15th, 2007 at 2:10 pm

  2. Author Comment

    an extra span should only be necessary to get the image change on hover working with ie5/6

    Yes, and I’m far away from not supporting IE 6 any longer. I could have put that as a behaviour into the plugin itself, but I chose a pure CSS solution in this case.

    Comment by Klaus, May 15th, 2007 at 3:11 pm

  3. The tabs plugin doesn’t work anymore with this latest jquery pre-release (http://jquery.com/blog/).
    You can click on any tabs once, but subsequent clicks fail.

    Got any clue about that ?

    Comment by Laurent Chardin, May 21st, 2007 at 6:37 pm

  4. Hi Klaus. Great package you’ve put together!!

    I’m trying to create a set of tabs, within a tab.. but I’m having troubles styling them seperately. Is there any quick/easy way to append a different style to it so they’re not both using .tabs-*

    Thanks in advance

    Comment by Kristin, May 21st, 2007 at 9:12 pm

  5. hi
    first of all thank you for your plugin!
    i m working with the sound disabled most of the time so i took some time to hear the double click sound when opening a tab in IE … :(
    is there a way to avoid that???
    thank you

    Comment by alex, May 26th, 2007 at 10:50 am

  6. I can’t seem to figure out how to use this plugin :(

    I’ve included the necessary files and produced the correct div structure but it doesnt work :(

    Can anyone be so kind to give me a little guide on how to set it up??

    Thanks a ton!
    Scotty

    Comment by Scotty, May 29th, 2007 at 8:42 pm

  7. Got it working :) Awesome package my friend!

    Is there a way of getting the slide effect working with ajax??

    Comment by Scotty, May 30th, 2007 at 1:55 pm

  8. Wondering if there is and easy way that I can set this up where the tab actually directs the browser to another page (like a standard anchor)?
    I don’t really have any need for the content areas, just want to redirect.

    Comment by Cam, June 4th, 2007 at 8:45 pm

  9. Ok nevermind, just needed to add reference to jquery.history_remote.pack.js

    Comment by Cam, June 4th, 2007 at 9:44 pm

  10. Hi, great plugin, but for some reason the tabs are not expanding to accomodate for the long name. Please see this screen fragment.

    I have added the :

    Customer Data
    Bank Account
    Prize

    //etc...

    Any idea?
    Many Thanks.

    Comment by Alex, June 5th, 2007 at 3:59 pm

  11. Author Comment

    Scotty, all effects should as well work with Ajax tabs.

    Alex, do you use the latest CSS, e.g. with the updates posted here? Which browser this glitch occurs in? Maybe it is an older one I didn’t test in and eventually won’t support?

    Comment by Klaus, June 6th, 2007 at 10:01 am

  12. Klaus, thanks for the response.
    Actually, I’m using FF 2.0.4, and I tested it under Windows and Ubuntu, and it’s the same. In IE6 is incorrect as well.

    I just downloaded the package again to compare the .css I’m using, and it seems to be the right one, is the one that contains this: 

    
.tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    height: 18px; /* IE 6 treats height as min-width */
    min-width: 64px;
    min-height: 18px;
    padding-top: 6px;
    padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6*/
    width: auto;
    height: auto;
}
.tabs-nav .tabs-selected a span {
    padding-top: 7px;
}

    Comment by Alex, June 6th, 2007 at 12:02 pm

  13. Author Comment

    I can only assume that some other styles of yours interfere here, especially because the bug occurs in IE as well. In the demo everything works fine in Firefox and IE.

    Comment by Klaus, June 6th, 2007 at 12:34 pm

  14. Silly me. I found the problem, I was using an old tab.png, I’ve been using the previous version and I didn’t realize I have to update the png as well.
    Thanks for your help and for this great plugin.

    Comment by Alex, June 6th, 2007 at 1:21 pm

  15. Hi Klaus, Great work on the tab plugin (am upgrading to your code from WebFX and am liking it alot so far)

    One problem however:

    The CSS styling within the containers appears to be broken.
    The font-family attribute appears to be being lost some how.
    On IE6 its right from page load. However on IE7 the initial active tab is styled correctly and only becomes broken once hidden and reactivated.

    I have tested this with my pages and the example index.html provided.

    Any help is greatly appreciated.

    Alex

    PS. Think someone above asked about custom CSS on a per tab basis and I have this working well by simply overiding the CSS.

    e.g.

    Default Tab CSS
    Red Colour Tab

    …and the same thing for the container divs. “tabs-red” just points to a different png image. HTH

    Comment by Alex B (UK), June 7th, 2007 at 11:01 am

  16. On further testing it doesnt actually lose its CSS styling it just looks really blocky, as if its lost its anti-aliasing.

    Any ideas on why that might be?

    Cheers

    Alex

    Comment by Alex B (UK), June 7th, 2007 at 11:49 am

  17. I think I have fixed this issue, however I am no CSS / JS expert (let alone your code :P ) so I dont know what the impact is on other browsers.

    I had to go to the unpacked version so I could edit the code easily, “jquery.tabs.js” line 480 & 482, remove “, opacity: ”” from both lines.

    I only have access to IE6 & 7 at the moment so havent tested this thoroughly however on IE this does cause a sort of flicker so I guess another fix is needed somewhere.

    Alex

    Comment by Alex B (UK), June 7th, 2007 at 1:34 pm

  18. Author Comment

    Alex, this is the infamous ClearType issue in IE. ClearType gets completely deactivated under certain circumstances (by design) – in this case using a filter (opacity) on an element – causing the font to change. I always thought there is no fix for that, because I was resetting opacity to an empty string, but it seems that jQuery internally causes that issue to occur. Thanks! I’ll integrate that into the plugin. Please note, that as soon as you use the fade effect for Tabs the glitch will occur again (I still don’t know of a fix for that).

    Comment by Klaus, June 7th, 2007 at 8:30 pm

  19. I first wanted to say this is a great plugin for jquery and I have found it extremely useful.

    I have read in previous post that some people have been able to display the tabs vertically. How exactly do you do this? I have messed around with the CSS and for some reason I can’t get my head around this one.

    Thanks in advance!

    Comment by Jason, June 11th, 2007 at 11:30 pm

  20. Klause,
    Thanks for your improvement on 2.7.3 (flexible width/height)! Eventually I can use longer tab names!

    Unfortunately, your requirement of additional SPAN forces me to go back to my myriad projects and change PHP output here and there. -_-

    Correct me if I am wrong, but I believe it should be the tab plugin’s responsibility to create the SPAN element by using jQuery’s .wrap(”<span></span>”) method. This way, developers don’t have to change the UL and LI codes. I think this is an unobtrusive and compatible solution.

    Still, thanks for your great job!

    Comment by Henry Jin, June 12th, 2007 at 6:32 pm

  21. Author Comment

    The next one will complain that the plugin adds an unneccessary span. Another one uses completely different styles and doesn’t need the span at all anyway… So, no, it is not the responsibility of the plugin to add such a presentational element. The plugin’s functionality itself does not rely on that span, I didn’t change any plugin code for this CSS change, thus the plugin shouldn’t add it in the first place. Again, that element is purely presentational and I only added it because people didn’t stop asking for flexible tabs, which could of course be done before by simple CSS.

    Comment by Klaus, June 12th, 2007 at 7:02 pm

  22. Author Comment

    The wrap method wouldn’t work by the way, because the span needs to be inside the anchor (to be able to use simple :focus and :hover pseudo class selectors for background positioning), though I believe an innerWrap plugin exists. Maybe you can use that instead of changing the PHP. You’d just need to chain that before the tabs initialization somehow.

    Comment by Klaus, June 12th, 2007 at 7:08 pm

  23. Just a quick note to say your tabs are super neato. I wouldn’t have thought to use a CSS background image that way.

    I’d also like to mention how you inspired me to solve a problem for the company I work for. We’re starting to get real big on semantic markup and (more importantly) being able to function when JavaScript is disabled, so I whipped together this implementation: http://piasecki.name/tabs/.

    It uses a definition list, so if the user has JS disabled they see a nicely formatted dl. Otherwise, the correct CSS styles get applied and the JavaScript magic runs. (They wanted the tabs to switch on a mouseover, which I find a little annoying, but what can you do.)

    Thanks for the inspiration!

    Comment by Nicholas Piasecki, June 18th, 2007 at 12:10 am

  24. Hi!

    Great plugins for Jquery! One hint: I add a problem with IE. It didn’t want to go through the loop “return this.each(…)” at the end of the tabs function, if the JS line to create the tabs were before the . I fixed it by putting the $(function() {…tabs()}) at the end of the tabs code. I dont’ know why it behave like this. Pb in jquery with the ready function???

    Otherwise another point: it would be nice to be able to desactive the history tab for certain tabs. If you have a tab navigation, it make sense to have the history. But if you use it for small tabs to show different pictures in a text, you don’t want it. Since it’s an auto-detection if the history JS is included, and you might want to use it on the page for other tabs or another jquery interaction, it would be nice to have a property “history” to desactivate it if needed per tabs id. By default it would be set to true of course and will work if the history plugin is added.

    Cheers
    /Marco

    Comment by Marco B, June 19th, 2007 at 4:57 pm

  25. Author Comment

    Marco, this is already supported: set the bookmarkable option to false to turn off history: $('#whatever').tabs({ bookmarkable: false });. Yeah, I know, it’s not the best name for this option, but that is because I started with bookmarking before actually supporting history.

    Comment by Klaus, June 19th, 2007 at 5:20 pm

  26. The bookmarkable setting could have a 3rd option: overwrite the history with the current tab (use document.location.replace).

    Emilio

    Comment by Emilio, June 21st, 2007 at 9:48 am

  27. Hi Klaus,

    Maybe a cleaner clearing method like the one explained in Simple Clearing of Floats could be in place of the current clear method for tabs.

    The only problem I have found with the above proposed method is the impossibility of making the active tab overlaps the tabs-container border to create the “tab effect”.

    Hope you find out how to do it.

    Comment by Maniquí, June 22nd, 2007 at 10:01 pm

  28. I was noticing that the tabs don’t play well with non-white backgrounds. The corners don’t seem to be transparent and end up looking kind of blocky. I wonder if there’s an easy way to fix this in the css, or if it has something to do with the way JS renders the corners?

    Comment by Brett, June 25th, 2007 at 3:29 pm

  29. I am trying to figure out how to center the tabs on the page. I am hoping someone else has already figured this one out, because it seems to be a pain in the neck.

    I have tried adding the margin: 0 auto; attribute to the #container, ul .tabs-nav, ..etc elements. No success.

    One jenky solution would be to put the list inside a fixed with div that is centered.

    Has anyone else figured this one out?

    Comment by Martin McWhorter, June 26th, 2007 at 5:33 pm

  30. Author Comment

    margin: 0 auto; only works if you declare a width for that same element. In consequence you need to make the tabs themselves have a fixed width and add their width together, otherwise the left floating counteracts the centering.

    Comment by Klaus, June 26th, 2007 at 6:44 pm

  31. Is it possible to make the tabs load different iframes? Could you add such an example to the docs?

    Comment by Kia Niskavaara, July 3rd, 2007 at 10:58 am

  32. Bug: onShow() doesn’t trigger for the first tab, when loaded.

    Comment by Kia Niskavaara, July 4th, 2007 at 8:53 am

  33. Hi Klaus. Great package you’ve put together!! I love it.

    However, I don’t know if it is jQuery problem or what. I add the following fragment into a html file.

    default

    blah blah blah

    Then, I add extra >lidiv

    Comment by Robonoob, July 4th, 2007 at 9:31 am

  34. When sending someone to a direct link say: http://www.example.org/about#tab3
    and tab2 is activated, it redirects to tab2. Is there a way to only redirect if no tab declaration is given? If I could check for it via php I would, but I can’t since it’s a page anchor.

    Comment by Beeker, July 9th, 2007 at 6:26 pm

  35. Author Comment

    Beeker, I don’t understand what you mean with “redirected”? If the fragment identifier in the URL matches a tab id, than that tab is active, always, even if you specify another tab when initializing the tabs.

    Comment by Klaus, July 9th, 2007 at 9:20 pm

  36. Is there someway to check if a tab identifier (page anchor) is given? If none is given than it would use the default. I am using this to display multiple bandwidth embedded video. For internal links to the content we may direct users to a larger bandwidth version, but most other people will just want the medium bandwidth version so that would necessitate the default. Of course I can just direct most people to the medium bandwidth, but it seems like especially for direct links to content, you should be able to direct link to any tab and still set a default tab if no tab is already given. Just an idea.

    Comment by Beeker, July 12th, 2007 at 8:36 pm

  37. I’ve been using jquery.tabs for some time now – great stuff. Recently I stumbled across a problem. If I attempt to use sifr to replace text within a tab, and that tab is hidden, the text never gets converted and the element is hidden.

    Does the tab functionality prevent the sifr replacement from executing? I’m not a great coder, so I apologize if the explanation is poor.

    Thanks?

    Comment by Chris, July 24th, 2007 at 9:06 am

  38. I am having trouble using the history plugin in IE6/7 with your tabs plugin. Was wondering if anyone else gets ‘Operation Aborted’ as soon as the page opens… When I remove the history script, no more error, but my tabs don’t work.

    Comment by Josh, July 29th, 2007 at 2:04 am

  39. Author Comment

    Josh, maybe that is because you’re using some other scripts that change the body before it is completely loaded, via document.write for example. The tabs should of course work without the history plugin, make sure you don’t have any JavaScript errors on the page.

    Comment by Klaus, July 29th, 2007 at 12:02 pm

  40. Thanks for the help – I found out that my sifr plugin is causing the conflict somehow, not sure how, or what to do about it…

    Comment by Josh, July 31st, 2007 at 7:42 am

  41. Author Comment

    sifr does change elements of course. You could try to delay the sifr call or even add it to jQuery’s DOM ready event handler.

    Comment by Klaus, July 31st, 2007 at 12:17 pm

  42. I tried to move the sifr call into the ready event handler, but tabs still arent working for me. As soon as I comment out the sifr.setup() line, the sifr goes away and tabs work beautifully. This seems like it should be pretty simple, am I missing something?


    $(document).ready(function() {
    // initialize tabs
    $('#weeklys').tabs();

    if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
    sIFR.setup();
    };

    });

    Comment by Josh, August 1st, 2007 at 3:31 am

  43. Hi Klaus. Great work, so useful.

    I’m using the Ajax Tabs – which are working great but I would like the content container to have rounded corners. I’m currently using JQ Curvy Corners (http://www.aspcode.net/JQuery-Curvy-Corners.aspx). Thanks in advance.

    Comment by John, August 2nd, 2007 at 10:59 am

  44. Hi from Tokyo,

    Thanks for the great script but I’m having a problem.
    The tabs are working just fine in FF but it is breaking my stylesheet in IE. I’ve placed the conditional comments for IE but … with my limited knowledge in all this I am lost.
    Would be able to help me out please.
    Cheers.

    Comment by yoichi, August 8th, 2007 at 9:39 am

  45. I’m trying to use the Tabs plugin on my Drupal site. jquery.tabs.js states that I need version 1.0.3(or greater?), but the tabs plugin doesn’t seem to work unless I upgrade from the version on my site(Jquery 1.0.4) to the latest version of Jquery.

    I would really like to create a module for easy Drupal integration. Is there any way I can get a version of tabs that is compatable with Jquery 1.0.4?

    Comment by Mike O., August 8th, 2007 at 7:26 pm

  46. I am running into a small problem under IE if I include a table inside one of the DIV.
    Basically, the .tabs-container padding style display grear in Firefoy but under IE I need to remove all right/left padding otherwise the text inside the TD of the table does not wrap properly. However doing this means that the text is glued to the right and left border of the tabs and it does not look good.

    I have set up an example of these pages (user: test / password: test)
    http://www.eboutik.net/development/v2/test.php Original style
    &
    http://www.eboutik.net/development/v2/test2.php padding fix for IE included

    Any hints on what I can do to fix this under IE ?

    Comment by Greg, August 10th, 2007 at 2:11 pm

  47. [...] made easier to write thanks to jQuery. The tabs in the footer are powered by Klaus Hartl’s jQuery Tabs script, which saved me a boat load of trouble since it does everything one could ask from a tab [...]

    Pingback by Astheria » Blog Archive » Coliphonics of the Redesign, August 10th, 2007 at 6:36 pm

  48. Hi Karl,

    Did you notice that when each “tabs-container” is a form, the plug-in doesn’t work as expected? You can’t switch between tabs. To get it working, you have to wrap the form in a div (and that div becomes the “tabs-container”).

    I hope there is a fix for this bug.

    Thanks!

    Comment by Maniquí, August 14th, 2007 at 7:48 pm

  49. First off, love the tabs. Great, great component.

    I’m having a problem in both IE and Firefox, when the screen is scrolled down to see some tabs further down on page, if I click a tab the page autoscrolls all the way back up to the top and then changes the tab, causing me to have to scroll back down again.

    I notice this does not happen on your test/demo page, but I’m stumped. I’m not using the remote_history, just the straight jquery.tabs.pack.js

    Thanks for any advice,
    Frank

    Comment by Frank, August 15th, 2007 at 11:32 pm

  50. Great work!

    I like this tabs so i implement it in new project but,
    i have button on page that need to call th 4th tab always but it doesn’t work in safari and IE.

    http://enockdesign.com/newyears/081307/party.html

    so this is the link and button BUYNOW doesn’t work, help please!

    Comment by Rade, August 20th, 2007 at 9:59 pm

  51. Hi Karl,

    it seems there is a little bug when combining jquery.tabs with the history_remote JS: the unfocus functionality isn’t working as expected.
    I mean, when I load the page, if I switch to a second tab, it works fine (ie. the page doesn’t scroll) but then, when I go back to the first tab, the page is scrolled like it usually happens with anchors.

    Maybe I’m missing something…

    Thanks.

    Comment by Maniquí, August 24th, 2007 at 3:39 pm

  52. Looks like your tabs plugin uses .eq(), which is deprecated 1.1.4 and will be gone in 1.2

    http://jquery.com/blog/2007/08/24/jquery-114-faster-more-tests-ready-for-12/

    Are you planning to release an update for it?

    Comment by Jim Spath, August 24th, 2007 at 4:20 pm

  53. Author Comment

    Jim, eq() is deprecated but not removed yet. That said, Tabs should work fine with 1.1.4.

    Tabs 3 will be released with jQuery 1.2.

    Comment by Klaus, August 25th, 2007 at 10:46 am

  54. Klaus… great! I understood that it would still work with 1.1.4… I just wanted to make sure you were aware that Tabs would need an update with the release of 1.2, since there (probably) won’t be a 1.1.5.

    Anyways, thanks for the great plugin!

    Comment by Jim Spath, August 27th, 2007 at 4:32 pm

  55. when i use ajax tabs and content has form in it. its giving error “unknown error”. it only when happens when i access file using http://

    Comment by Mohsin, August 28th, 2007 at 6:06 pm

  56. I love this plugin, but I’m having one problem. I have a multi-page form that works very well, but when you go back and forth from tab to tab the text fields in the forms do not slide and fade properly but just stay where they are until the next tab’s content pops into view. Is this a known issue, or perhaps something I can correct in my CSS, or just the usual frustratingly wacky problem that only happens to me?

    Comment by ZAP, August 30th, 2007 at 5:58 am

  57. I’m using it on a form that posts back. Would you know how I can “remember” the last tab selected and show it after the postback?

    Comment by Kiko, August 31st, 2007 at 4:25 am

  58. Awsome plugin! :D :D

    It would be nice to have an option to not to load any tabs on initialization. For example using the following settings option:

    // trigger load of initial tab
    if (settings.loadInitial){
    tabs.eq(settings.initial).trigger(’loadRemoteTab’).end();
    }

    Especially good option when using remote tabs so that you would not have to do two consecutive request. Maybe it could be included in the next version? ;)

    Comment by Taro, August 31st, 2007 at 12:46 pm

  59. I was experimenting with your excellent and most recent jQuery tabs plugin yesterday. My page utilitizes two (2) tabs, whereon are multiple option selection lists. As I moved tab focus back and forth, I observed significant control flashing. It almost appears that the static lists are being reloaded(?). Is this a normal thing? Or, perhaps, is there a way to minimize the flashing?

    Comment by Tom Stewart, August 31st, 2007 at 4:59 pm

  60. Just wanted to say this is a great plugin.
    If I’d want to be the devil’s advocate, I would say it probably misses a callback function that would fire once the remote content has loaded, you can use onShow but that won’t trigger for the initial tab.

    I had that issue when I wanted to load in each tab a bunch of thumbnails that would enlarge using the Thickbox plugin.

    If you happen to have the same issue, you can easily fix it with the help of the livequery plugin. Supposing the ‘a’ element wrapping your thumbnails have a ‘livethickbox’ class, that would look like:


    $('a.livethickbox').livequery(function() {
    tb_init('#' + $(this).attr("id").toString())
    });

    Here you go!

    Comment by Renaud Drousies, August 31st, 2007 at 9:05 pm

  61. How does one integrate this into Wordpress? No matter what, it breaks for me. I am using WP 2.3 Beta 1

    Comment by Nick, September 1st, 2007 at 3:54 am

  62. Hi Klaus,

    Looks like your tabs plugin is not working with jquery’s new version 1.2

    Comment by John, September 12th, 2007 at 3:14 pm

  63. oh yeah, not working with 1.2

    Comment by Flo, September 13th, 2007 at 3:16 pm

  64. [...] are made easier to write thanks to jQuery. The tabs in the footer are powered by Klaus Hartl’s jQuery Tabs script, which saved me a boat load of trouble since it does everything one could ask from a tab [...]

    Pingback by Astheria » Blog Archive » Colophonics of the Redesign, September 13th, 2007 at 6:24 pm

  65. Author Comment

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

    If you want to run Tabs 2 with jQuery 1.1.2 you’ll need to include the jQuery 1.1 compatibility plugin.

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

  66. Thanks for the great tab plugin.

    I am trying to do some basic layout within a given tab, just a div floating left and another div to the right (so I can have two sections on the tab). When I have a div within the tab with css:
    float: left;
    width: 50%;
    …it seems to break the dynamic height sizing of the tab, so the content breaks out beyond the tab. Here is an example of the problem, where I colored the tab body grey to help visualize. Thanks!

    Comment by Check, September 14th, 2007 at 6:01 am

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

    I think you wanted to say jQuery 1.2 ;)

    Comment by Maniquí, September 17th, 2007 at 9:16 pm

  68. Check: …it seems to break the dynamic height sizing of the tab, so the content breaks out beyond the tab

    The problem you’re seeing is nothing to do with the tabs plugin but a CSS issue. That’s the default browser behaviour for floated elements in a container (except in IE

    Comment by Rob O'Rourke, September 20th, 2007 at 12:04 pm

  69. 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 28th, 2007 at 9:36 am

  70. real nice plugin!

    is there any way to dynamically add tabs?
    I need tabs added by user’s action, containing an iframe.
    I played around today with the latest versions, but couldn’t do both tasks (add,iframe). is there any possibility?

    Cheers.

    Comment by oori, September 30th, 2007 at 3:34 am

  71. With Safari, the two followings lines (Line 393&394)

    var tempForm = $('').get(0); // no need to append it to the body
    tempForm.submit(); // does not trigger the form's submit event...

    make the browser loosing the page in case of the initial url had a query string (my.domain.com/myscript.php?id_page=23).
    In this case, any click makes safary jumping to my.domain.com/myscript.php#xxx

    In my case i have commented the two lines and it works fine (Safari 2.04, jQuery jQuery 1.1.3.1)

    Comment by Cedric, October 3rd, 2007 at 11:16 pm

  72. I’ve been looking through the tabs for a few days and playing around with a few things. Is it possible to put an unordered list inside a tab? Every time I try to do it, it changes that unordered list into a similar tab menu.

    Comment by David, October 10th, 2007 at 7:54 pm

  73. Great to see that the tabs 3 is out and working with jQuery 1.2

    I have been testing how to upgrade a site which uses tabs 2.7 and jQuery 1.1.4. All went perfect, but the History/Remote is not working. Has it been removed from tabs 3 (or I’m missing something…)

    Thanks

    Comment by Andreas Kaiser, October 11th, 2007 at 12:19 am

  74. Author Comment

    David, that is possible of course, here’s a test case. Note that you need to apply the tabs to the ul element with Tabs 3: $('#container > ul').tabs();

    Andreas, History support has been removed for now. That plugin does not support Safari 3 right now and needs a major overhaul. Thus I decided to remove it, besides that such history in tabs is not what I call expected behavior.

    I will work on bringing that back when I find the time for it.

    Comment by Klaus, October 11th, 2007 at 1:04 pm

  75. Love the plugin, but I’m having a bit of a hard time modifying to theme.

    Basically, I’m trying to set a black background with white text. And once a tab get selected or hovered on, the background changed to gray. I can get the first part easily. But when I change the values for the hover and selected, it only changes the background within the right side.

    Any ideas?

    Comment by Mike, October 11th, 2007 at 8:12 pm

  76. i have a quick question…i don’t want the page to refresh when u switch tabs…how do i stop the refresh? i have a yahoo map on one of the tabs and whenever i switch over to another tab and then switch back, i lose my place on the yahoo map…any ideas?

    Comment by adil, October 17th, 2007 at 9:23 pm

  77. How to call tabsClick function inside add: method

    tabsClick is not defined
    [Break on this error] tabsClick(3);

    How to tabsClick by ID (not number) tabsClick(’#new-tab’);

    Thank you.

    Comment by blama, October 18th, 2007 at 2:23 pm

  78. … and tabsSelected function

    Comment by blama, October 18th, 2007 at 3:28 pm

  79. Help me please please please

    Comment by blama, October 19th, 2007 at 2:59 pm

  80. Klaus, I saw this elsewhere in the groups in regard to the tabs
    migration into the jQuery UI:

    * removed autoheight option (it was ugly) – I think that can easily be
    achieved with CSS alone and this option was often mistaken as being a
    CSS substitute anyway.

    I apologize, I’ve dug around trying to figure this out before posting,
    but I can’t get a CSS solution to work (changing “display: none” to “visibility: hidden”). Could you offer a few pointers?

    Thanks!

    Comment by Chris G, October 22nd, 2007 at 5:12 am

  81. Author Comment

    Chris, I replied to this on the jQuery mailing list…

    Comment by Klaus, October 22nd, 2007 at 3:23 pm

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