Klaus Hartl – Stilbüro : Tabs plugin update: Support for (unobtrusive) Ajax

Tabs plugin update: Support for (unobtrusive) Ajax

February 5th, 2007

Category:: JavaScript,; Web Development,; jQuery

I have updated the Tabs plugin the other day. It now supports loading tab
content via Ajax. As one could have expected I did that in an unobtrusive manner.

The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing ressources (from where the content gets loaded) and no additional containers at all (unobtrusive!). They’re going to be created on the fly:

<div id="container">
     <ul>
         <li><a href="ahah_1.html">Content 1</a></li>
         <li><a href="ahah_2.html">Content 2</a></li>
         <li><a href="ahah_3.html">Content 3</a></li>
     </ul>
</div>

Initialize the tabs interface with the remote option set to true:

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

Obviously this will degrade gracefully – the links, e.g. the content, will still be accessible with JavaScript disabled.

All other options and history support should be totally unaffected by that.

There’s another option: While the tab content is being loaded a little spinner left to the tab title text is shown (which you will hardly see on the demo, because it’s loading too fast). Just like in Firefox for example. This is controlled by a CSS class, which you can change:

$('#container').tabs({remote: true, loadingClass: 'progress'});

If you don’t want to show a spinner at all just remove the rule

.anchors .tabs-selected .tabs-loading {
     ...
}

from the style sheet.

Comments disabled · Trackbacks disabled · Permalink

148 Comments

Comments feed

wow. your tabs are really working great. again, nice work.

Comment by Stylemo, February 6th, 2007 at 7:40 am
hi

I’ve been using the tabs plugin for a while, I just updated to use the
new ajax support. Works nice.

Now I want to add a callback whenever a tab is updated:

$(”.tabs”).tabs( { remote: true,
loadingClass: ‘progress’,
callback: function () { alert( ‘done’); }
} );

but the callback function is never actually called.

any ideas why?

thanks

Daniel

Comment by Daniel, February 11th, 2007 at 9:15 am
Hi Again!

As I get further into the code I guess I need to ask…can AJAX tabs be nested? If so what’s the syntax since there are no more sub-containers to nest into?

Thx!
Mike

Comment by Mike, February 13th, 2007 at 11:45 pm
Also, will AJAX loaded pages’ scripts be accessible/executable or do they somehow have to be evaluated after loading?

Thx Again!

Comment by Mike, February 13th, 2007 at 11:55 pm
Author Comment

You could load the nested tabs and initialize them via onShow callback. Eventually loaded scripts will be evaluated.

Comment by Klaus, February 14th, 2007 at 9:11 am
Good work. But I have a note: Cookies. Could you implement support for cookies? It would be good if Tabs plugin remember last displayed tab after refreshing a page.

Comment by Cifro, February 18th, 2007 at 2:27 pm
Author Comment
Cifro, if you use my cookies plugin you can easily add cookies support like this:

var TABS_COOKIE = 'tabs_cookie'; $('#container').tabs($.cookie(TABS_COOKIE) || 1, { onClick: function(clicked) { var lastTab = $(clicked).parents('ul').find('li').index(clicked.parentNode) + 1; $.cookie(TABS_COOKIE, lastTab); } });

Apart from that, if you turn on bookmarking by using the history plugin the last tab is remembered anyway when refreshing the page.
Comment by Klaus, February 18th, 2007 at 3:17 pm
Klaus, can you provide a CSS which can mimic some pretty default behaviour? I can’t get it to work. What i want to accomplish is that there is a border around the “content” part, but the active tab overlaps that border, so it actually looks like a tab. Take a look at any tabpage in Windows, that is what i want to mimic.

Comment by Gilles, February 20th, 2007 at 9:36 pm
I integrated jquery.tabs to my jQWebExt framework, thank you very much.

http://code.google.com/p/jqwebext/

Comment by Rack Lin, March 8th, 2007 at 3:19 am
I can’t load php pages :(

with the tabs… :(

i am using AJAX…

is a bug os something?

Comment by hugo, March 23rd, 2007 at 8:50 pm
Is there any way to get a script to run on a page that you load with your tabs / ajax on ie?

Comment by forrest lyman, March 24th, 2007 at 6:45 pm
Author Comment

Forrest, I’m using jQuery’s load() for the Ajax tabs, thus included scripts should be evaluated automatically. If not, it’s a bug in jQuery. Which version do you use?

Comment by Klaus, March 24th, 2007 at 6:54 pm
It would be helpful if you had a link where all the required scripts could be downloaded as a single file.

Comment by Justin, March 26th, 2007 at 10:22 pm
Author Comment

Justin, if you’d read the initial or some follow-up post regarding the tabs, you would know that there is such link. My fault I didn’t add that to the demo page and missed that here as well. I have added a link to the demo. You can also check everything out from jQuery’s SVN repository.

Comment by Klaus, March 27th, 2007 at 10:00 am
First off I would like to preface this comment with the fact that this plugin is very cool, and very easy to use*.

* I spent over an hour of time trying to get the tabs to work because I failed to realize that there was specific, obtrusive, CSS that I needed to set first.

If the ~~documentation (if you can call it that)~~ demo had simply stated that I needed to set .nav-* styles, this plugin would definately have gotten a 10 out of 10 rating from me. Because it lacked very key documentation, and I wasted a lot of time on getting it to just work out of the box, I have to lower my rating to a 7 out of 10.

This is by no means a bashing comment. I just felt that there may be some other person out there who is just not understanding why their tabs aren’t working like the demo. :)

Comment by Ken, March 27th, 2007 at 5:37 pm
Author Comment

Ken, I don’t think that a proper separation of presentation and behavior could be called obtrusive. The CSS that is provided serves solely as an example to start with and is by no means required for the plugin to work (except for one single class that is required to maintain accessibility in IE). You seem to be the first person in over a year not getting it to work and complaining about the style sheets separated from the script, thus I don’t really consider that a downside of the plugin. The second thing I do if something doesn’t work as expected is having a look at the source code of the example I was provided.

In addition, if you’d downloaded the package and would have had a look into the JavaScript source file, you would have noticed that there is a comprehensive documentation inline. Which is also used by Visual jQuery for example.

I’m glad if people like the plugin and find it useful, but I don’t really care about any fictional or non-fictional rating. People sometimes like to forget that I’m doing all this for free and in my spare time.

Comment by Klaus, March 27th, 2007 at 10:01 pm
Love it, Klaus, love it…

gotta small issue, I have 6 tabs I want to create, no problem.

If I create all these in a 250×400 box I get roughly
tab1_|_tab2
_____|_tab4
tab3_|_tab6
tab5_|

When I click on tab1 or tab 3 I get that empty tab underneath the tab that I clicked. The rest of the tabs work fine though. Wondered if this was a known issue ?

Comment by Eric Fehrenbacher, March 29th, 2007 at 7:19 am
Hi Klaus, congrats on an excellent plugin….

Just wanted to know if its possible to start with the tabs all closed and have the possibility to close/open tab on click.

Best regards.

Sérgio Pinto

Comment by Sérgio Pinto, March 29th, 2007 at 1:02 pm
Hi!
how do i make the space under the line of the tabs dissepear ???

Comment by Rikard, March 29th, 2007 at 1:24 pm
How do i get the white space to go away under the tabs ???

Comment by Rikard, March 29th, 2007 at 3:12 pm
Author Comment

Sérgio, the tabs were never designed to work like that, but it’s already on my list for Tabs 3 as this feature is frequently requested.

Rikard, that’s simply a matter of changing the provided example style sheet. Search for the selector .tabs-container and change the padding declaration in that rule to padding: 0 8px;. The first value sets both top and bottom padding, the second value right and left padding.

Comment by Klaus, March 29th, 2007 at 4:10 pm
Author Comment

Eric, I don’t know if thats a known issue or if it is an issue of the script at all and instead a matter of the CSS. Unfortunatly I don’t know how to have the tabs degrade well if the space they have gets to small. For the next version I’m considering to have little arrows (like in Firefox) if the tabs exceed the available space.

Comment by Klaus, March 29th, 2007 at 4:14 pm
Hi Klaus that’s great, thanks.

I found something similar to what i actually would like to do with your plugin at the following link, only thing is that it lacks the support for loading content via Ajax :( I’m a designer and an awful coder so i can’t really figure it out my self. Guess I’ll wait for tab3.

Best regard and thanks.

Sérgio Pinto

Comment by Sérgio Pinto, March 29th, 2007 at 4:25 pm
Hi. Great plugin.
How can I set different color/CSS on each tab (for example based on ID) ?
This should happen onMouseOver.

Thanks!

Comment by Bodi, March 29th, 2007 at 5:22 pm
I had a comment on the use of “#id_of_target” in the hrefs of the tabs themselves.

In your code there are a few lines that have been added in to prevent the browser from scrolling to that fragment. Would it make more sense to have the javascript remove the href completely once the node information has been extracted from it? Or replace it with “javascript:void(0)” or something similar. Or change the href attribute to a more passive attribute, like “ref”.

It would still work correctly without javascript for accessibility. It seems like that would save you the trouble of nullifying the browser behavior later.

You would know better having thought about this for hours and hours, but I figured I’d mention it.

Comment by Andrew Clarke, March 29th, 2007 at 10:21 pm
Author Comment

Andrew, the href attribute pointing to a hash is essential to make back button support and bookmarkability happen. If one doesn’t need that, the link’s default action is prevented anyway and the hack you’re mentioning would’nt be required. I don’t like that at all too, but after a day of trying I couldn’t find no other solution.

Comment by Klaus, March 30th, 2007 at 7:29 am
I’m really impressed by your plugin! Congratulations!

But, there is something that I would like to be changed. It is about giving a different ID for each Tab fragment.

Wouldn’t it be a better idea if all sibling elements would be by default fragments? This is because, when using multiple tabs per page, there is a probability that the same id for fragment will be choosed?

Thank you!

Comment by Alex Objelean, March 31st, 2007 at 10:11 pm
Author Comment

Alex, the fragments need to have an id, because the tabs will degrade graceful without JavaScript with the links refering to these ids. An id has to be unique in a document anyway.

Comment by Klaus, April 1st, 2007 at 9:47 pm
Hi Klaus! this tab script is the greatest! i started to use it now whit every ting i almost do. but i got a problem.. i use several functions on a page to happen on a click on the tabs. i really want to use your tabs on this page but i can not use it if i can’t take away the <a> link tag.

[stripped unescaped HTML - Klaus]

I need a sullotion to use every tab to work with a submenu. Check..

http://www.propolis.se/justnu/nya%20justnu/untitled.asp

this one is messy just because it’s in big progress but hope u get the idéa.
I can’t use the href to load the page just because it have to load 2 pages in different div tags. (frame + submenu)

Thanx alot for a great script.
Best regard’s from a newbie
Rikard

Comment by Rikard, April 3rd, 2007 at 9:36 am
Author Comment

I really don’t know how often I will have to repeat this, but I think everyone here should be familiar with HTML, right? So if you want to paste code you have to escape certain HTML entities. Thanks for listening.

If anyone knows of a WordPress plugin that can do such things automatically please let me know.

Comment by Klaus, April 3rd, 2007 at 10:14 am

Hi Klaus! sorry for not use the code tag, i missed it.

I use several functions on a page to happen on a click on the tabs. i really want to use your tabs on this page but i can not use it if i can’t take away the<a> link tag.


        $("#main").click(function(){
		$("#frame").load("global_list.asp");
		$("#submenu").load("submenu/submenu_global.asp");
		return false;
	  });
        $("#gb").click(function(){
		$("#frame").load("gastbok/guestbookview.asp");
		$("#submenu").load("submenu/submenu_guestbook.asp");
		return false;
	  });
	  $("#lada").click(function(){
		$("#frame").html("");
		$("#submenu").load("submenu/submenu_forslagslada.asp");
		return false;
	  });
	  $("#hantera").click(function(){
		$("#frame").html("");
		$("#submenu").load("submenu/submenu_hanteramera.asp");
		return false;
	  });
	  $("#admin").click(function(){
		//$("#frame").load("#");
		$("#submenu").load("submenu/submenu_admin.asp");
		return false;
	  });
$(function() {
$('#container').tabs({ remote: true });
return false;
	  });

div id="container"
            ul
                li a id="main" Justnu /a /li
                li a id="gb" Gästbok /a /li
                li a id="lada" Förslagslådan /a /li
                li a id="hantera" Hanteramera

Comment by Rikard, April 3rd, 2007 at 10:27 am

Here u got a code snippet plugin for wordpress..

http://blog.hackerforhire.org/2007/03/16/code-snippet-20/

best regards Rikard

Comment by Rikard, April 3rd, 2007 at 11:11 am
Author Comment

Rikard, thanks for the plugin. I’m really sorry, but the anchors are an essential part of the plugin so I can’t see a solution to avoid that. Maybe you can do something by hiding the default navigation and by then utilizing triggerTab. I’ve posted a solution somewhere in the comments of one of the tabs posts.

Comment by Klaus, April 3rd, 2007 at 12:24 pm
Problem Solved: CHECK Code:
http://www.propolis.se/justnu/nya%20justnu/meny.asp

Comment by Rikard, April 3rd, 2007 at 1:26 pm
I’ve download the tabs zip from this page. the jquery.tabs.pack.js – infected by Trojan-Downloader.JS.Agent.ea !! (At least this is what http://www.kaspersky.com/scanforvirus reports!)

Is this a false warning due to ajax calls used for remote tab loadings?

Comment by VIRUS in pack.js file?, April 3rd, 2007 at 8:04 pm
Author Comment

The remote tabs loading has nothing to do with the download of the zip file. I’ve packed the files on my Mac and Kaspersky’s online scanner says the files are clean.

Comment by Klaus, April 3rd, 2007 at 10:13 pm
I’ve checked again, and indeed, the Kaspersky’s online scaner says the files are clean.
But yesterday (for the same files!) it reported to be infected with Trojan-Downloader.JS.Agent.ea. Maybe it was a glitch in their scanning engine.

Comment by Dan, April 4th, 2007 at 8:45 am
Great job!

Is there a way to call a server side function that load the content of the fragment paragraph? Really don’t know how to do it.

Thanks a lot.

I’m trying to integrate your plugin into my website.

Comment by astucale, April 5th, 2007 at 2:54 pm
Author Comment

Well, you already read the right post about that. Just let your links in the tabs point to a PHP (or any other server side language), that executes a function and delivers the content.

Comment by Klaus, April 5th, 2007 at 3:55 pm
is there anyway to enable tabs via ancor links like file.html#enableTab(3)

Comment by Rikard, April 5th, 2007 at 6:21 pm
Author Comment

No, I’m sorry. Do you mean enable or just show?

Comment by Klaus, April 5th, 2007 at 8:45 pm
to enable the disabled tab. thats what im am trying to do since yesterday. the ting you helped me with on Nabble(google forums) i’m new to ajax and this thing of programming java. last time i programmed java was in -96 and at the time it was java applets to control tings like banners and stuff.. otherwise if it’s not possible i have to learn more ajax just learned Jquery in 2 weeks now.

Comment by Rikard, April 5th, 2007 at 9:51 pm
I have a question regarding your tab interface and it’s AJAX support. Some background to set the stage: I’ve been using openrico’s accordian widget (as an alterative tab set) with classic ASP. Recently, I started experimenting with jQuery and your tab plugin, which BTW, is most elegant, lightweight and easy to code. Rather than use openrico’s AJAX engine, I use Prototype’s Ajax.Updater to fetch/load an html (div) container, which may contain a selection box or a table. Okay, the question.

Is it possible/doable to load an individual tab fragment at a particular time via the AJAX support provided by the tab plugin?

Perhaps I’m somewhat confused. As I look at this snippet: $(’#container’).tabs({remote: true}); it says to me that the entire tab container (of N fragments) are to be refreshed at the same time. Is this a correct understanding of the remote: true clause?

Comment by Tom Stewart, April 6th, 2007 at 11:57 pm
Author Comment

No, remote: true just loads the content of each tab via Ajax (on clicking a tab) as opposed to static content in the page. The content is loaded from the URL the tabs links href attribute points to (this ensures graceful degradation).

Comment by Klaus, April 7th, 2007 at 12:07 am
Hi Klause,

I Love your tabs. I have a question though, is it possible to have both remote and non remote tabs on? Basically if it has ‘#’ link to an div, if not then load it and create the div.

What I mean is this. I have some tabs that don’t need to be loaded externally (these are search boxes that load their own data), while I have some that do need the ajax. Is there a way to have them both in one set of tabs? Some tabs that load remotely and some that merely show content?

Thanx in advance :)

Comment by Frank Thompson, April 7th, 2007 at 1:09 am
Author Comment

Frank, mixed tabs are currently not supported and will be available in Tabs 3 (which may take a while as I am pretty busy right now).

Comment by Klaus, April 7th, 2007 at 12:23 pm
Hi Klaus,

Your jQuery Tab solution is fantastic…but I have a question…

Within a tab (that is remotely loaded with AJAX), I have a table that has a pagination function (DB tables where only 30 records are displayed at a time)..is there a way to keep the the tabs loaded and paginate within the “tabs-container” via $(”div.tabs-container”).load(href) call?

For some reason I cannot get this to work..any help would be greatly appreciated.

Cheers,

Mark

Comment by Mark, April 12th, 2007 at 12:00 pm
Author Comment
Mark, you need to use the onShow callback to attach the desired behaviour to the links loaded within the tab content. Example code (untested):

$('#tabs').tabs({ remote: true, onShow: function(clicked, shown, hidden) { $('a.pager', shown).click(function() { $(this).parents('div.tabs-container:eq(0)').load(this.href); }); } });

The only drawback is that with switching the tab and coming back the page is lost. Caching remote tabs is not yet supported but will go into Tabs 3.
Comment by Klaus, April 12th, 2007 at 1:41 pm
Hi Klaus,

Thanks for the quick answer…

Unfortunately your solution does not seem to work…I think there is a conflict with the history plug-in I am using (Ajax History by Taku Sano)…I saw you have a history plug-in as well but due to the size and complexity of my site, migrating to your history plug-in would be a major undertaking…

Cheers,

Mark

Comment by Mark, April 12th, 2007 at 7:19 pm
[...] this: Klaus Hartl – Stilbüro : Tabs plugin update: Support for (unobtrusive) Ajax __________________ stillwater, oklahoma web design | blog | web design and development [...]

Pingback by Show-Hide JS - DesignersTalk, April 13th, 2007 at 10:57 pm
[...] this: Klaus Hartl – StilbÃ¼ro : Tabs plugin update: Support for (unobtrusive) Ajax EDIT: Actually, it looks like the one they’ve used on the ExpressionEngine website. [...]

Pingback by Show-Hide JS - DesignersTalk, April 13th, 2007 at 11:36 pm
Is it possible to show the tabs centered ?

thanks

Comment by jose, April 18th, 2007 at 5:28 pm
Awesome plugin – One little question though. In firefox when you change tabs the font stays the same, but in IE7, as soon as you change a tab the font changes…Any solutions to this? It does the same on your demo page. :) Fanx

Comment by KaBaDaBrA, April 19th, 2007 at 1:35 pm
Author Comment

This is the infamous ClearType issue in IE 7 (ClearType gets completely deactivated under certain circumstances, causing the font to change) – no fix known for that yet. I believe there is no fix.

Comment by Klaus, April 19th, 2007 at 3:15 pm
Author Comment

Jose, centering the tabs is a matter of CSS.

Comment by Klaus, April 21st, 2007 at 9:59 am
Hi,

Just wandering how can fit a text like: ADVANCE SEARCH in a tab avoiding the the two lines display. Any idea of where I can change the width size of the tabs?

Thanks!

Q

Comment by Gonzalo, April 21st, 2007 at 10:10 pm
In a project I was working on, the ul and the tab containers where in different divs.

I changed line 229 of jquery.tabs.js from:

var containers = $('div.' + settings.containerClass, container);

to

var containers = $('div.' + settings.containerClass);

It works ok for me, but YMMV.

Best regards, and thanks for a lovely plugin.

Comment by Pedro Melo, April 27th, 2007 at 5:09 pm
Hi
I am using the plugin in ‘ajax mode’, and everything works fine except for pages with forms. Whenever I submit a form the browser replaces the whole ‘tab page’ with the form script output. I guess this is expected behavior, but I wonder if there is a workaround to make the ‘form page’ to live within the corresponding tab even upon submit. Probably using iframes to load the tab content can do the trick. Any ideas?
Thank you
Andres

Comment by Andres, April 30th, 2007 at 8:57 pm
Hi
Here is a possible solution using iframes but I had to disable the ‘ajax’ mode. Any ideas to accomplish this keeping ‘ajax’ {remote: true}?
Thank you, Andres.

Index
Add new

$(’#container’).tabs();

Comment by Andres, May 1st, 2007 at 11:57 am
Hi,

I did not understand the “installation” of script.
I believe that the form as I am creating my HTML (PHP + Smarty Template) is causing errors in the use of tabs with AJAX.

I need:

- Active / Inactive Tab
- AJAX Load for links
My current HTML (default page [admin.php])

The others pages have the same structure, changing omly the main content and the sidebar menu items.

Sorry if my English is very bad, but I need help ti use this system and I don’t know how I do.

Thanks

Comment by Bruno, May 2nd, 2007 at 9:45 pm
For those using cookies to remember the active tab (sample above), you need to modify make a modification to convert the string returned by the cookie plugin to a number required by the tab plugin. Use parseInt, as below:

$('#container').tabs( parseInt($.cookie(TABS_COOKIE)) || 1, {

~ ~ Dave

Comment by DaveG, May 7th, 2007 at 2:30 am
Hi Klaus,

wir hatten vor längerer Zeit schon einmal miteinander gesprochen.
Das Problem TabDrupal ließ sich durch einige Patches lösen, die unoffiziell im Drupal-Forum zu bekommen sind.

Die Frage wie ich den Inhalt eines Tabs ersetzen lassen kann, indem ich IN diesem Tab auf einen Link klicke, konnte ich bis jetzt noch nicht beantworten.
Ich habe Probleme das entsprechende Element anzusprechen, ich vermute, dass die per tabs:remote geladenen Inhalte nicht richtig in DOM eingehängt werden, bin mir aber nicht sicher.

MfG

soc

Comment by soc, May 8th, 2007 at 4:49 pm
I was wondering if its possible to do subnavigation from your ajax tabs… I need a second level rollover or onclick

Comment by Adam C., May 8th, 2007 at 6:56 pm
Hi, Klaus.

Thanks for your great work, I eventually can get rid of DOJO from my project with your Tabs-plugin!

Question about caching: My project requires real-time data displaying. It means every time I switch between Ajax-tabs, an new Ajax request must be called. It is OK for Firefox, but annoyingly, IE always gives me unrefreshed old content!

Finally, I managed to solve this problem by adding into remote tab content page (*.php) like:

<?php
//force to be no cache
header(’Expires: Mon, 26 Jul 1997 05:00:00 GMT’);
header(’Cache-Control: no-store, no-cache, must-revalidate’);
header(’Cache-Control: post-check=0, pre-check=0′, FALSE);
header(’Pragma: no-cache’);
?>

That way, every time I switch back to an ajax, I see latest data.

In your next generation, I wonder whether it possible to have an attribute like: {cacheExpiresSeconds: 1000}. Thus, I can set it to be 0 for no-cache, or huge number for long-term cache.

Comment by Henry Jin, May 8th, 2007 at 7:21 pm
I have used your ajax tabs its owesome but i cant use it with asp.net inside the page it works if i dont use tag but without form tag its not possible to use asp.net page so please suggest me thanks

Comment by Harinder, May 10th, 2007 at 9:09 am
Hi!

First of all respect for doing this for free and for being so helpful. If you take donations, please post link.

I try to setup tabs within tabs. It works great in FF but not in IE.
I have a set of main tabs which are ajax tabs. In those tabs are another sets of tabs which are just simple tabs.
Is that OK or is there better way?

$(function() {
$(’#container-1′).tabs({ remote: true });
});

And the code for included tabs is:

$(function() {
$(’#container-2′).tabs();
});

,which lays in the included page.

As I said it works great in FF IE screws it up.

Hm, hope you understand any of this.

If anyone else knows whats the best way to do tabs within tabs I’d appreciate it if you share.

Take care all!

Comment by Marjan, May 10th, 2007 at 6:23 pm
Hi Klaus,

I know you’re busy so I apologize if this is a stupid question. :)

I’m loading content from the server via the a tag as usual. This content consists of a the prototype Ajax script Ajax.PeriodicalUpdate so I can have a “real-time” update of the tab content.

The problem is that PeriodicalUpdate needs the element id of the container that is going to receive the new content update from the server. What would be the correct element id to write new content to? I have tried using “remote-tab-1″ etc but Firebug keeps telling me it’s an invalid property id.

Any clues, anyone?

Thanks,
Lars

Comment by Lars Brenna, May 11th, 2007 at 8:12 am
Hi again, I now tried doing the same thing with Control.Tabs for prototype and I’m getting the exact same error. Element.update(’id’, ‘add this text’) works fine, but new Ajax.PeriodicalUpdater(’id’, ‘/updateTab’, {…}) tells me that there is an invalid propery id. However, Firebug does not tell me exactly which property id this is.

I am obviously led to the assumption that I must be doing something wrong that is not directly related to the Tabs plugin.

Any clues?

Thanks

Comment by Lars Brenna, May 13th, 2007 at 10:35 pm
[...] Architect) is launching their flagship product and public site this week. Uses a bunch of jQuery, Tabs Plugin, Validation Plugin and Scrolling Promo Effect. Design was done by Sean Zimmerman. HTML [...]

Pingback by commadot.com » Blog Archive » Marketo.com Launched, May 21st, 2007 at 4:31 am
I love this plugin but for those who don’t want it to look like the default version it’s a pain to edit the CSS. Don’t get me wrong, the design doesn’t look bad but I think you should seperate the stylesheets: one with the things needed for the script to work and one with all the additional styling.

Comment by Dominik Hahn, May 22nd, 2007 at 1:44 pm
Author Comment

Well, except for one class nothing from the CSS is required for the plugin. Just keep the rule with the .tabs-hide selector and make your own. I was just kind enough to provide a thoroughly tested style sheet to start with. I guess I can’t satisfy everyone.

Comment by Klaus, May 22nd, 2007 at 2:38 pm
Klaus Hartl – Stilbüro : Tabs plugin update: Support for (unobtrusive) Ajax…

I have updated the Tabs plugin the other day. It now supports loading tab
content via Ajax. As one could have expected I did that in an unobtrusive manner.

The HTML you need is slightly different from the one that is used for static tabs: A list of li…

Trackback by mychoice.snehah.com, May 23rd, 2007 at 5:45 am
First of all, great script!

A question: I have a problem with your tabs plug-in in IE. A site I am working on (Connected-Women.com) uses a CSS hover menu, and I use a csshover.htc fix for IE to make it work. Now, when I have your tabs in the content area (below the menu) and I hover over the menu (in IE) your tabs jump down a nudge.

Do you know of this problem and have a fix or can you suggest a solution for me?

Comment by Magnus, May 29th, 2007 at 7:22 pm
Klaus, great plugin, and thanks for supporting it so well. I hacked a bit today on your tabs and made it so you can have ajax along with static tabs. The changes are minimal and with a few minutes could be put out in a minor release I believe rather than waiting for version 3. If you can, please contact me and I can show you the changes.

Comment by Trent Miskin, May 31st, 2007 at 11:04 pm
[...] Tabs by Klaus Hartl – This is one of the best. I love this plugin and use it all the time. [...]

Pingback by commadot.com » Blog Archive » Plugins, June 1st, 2007 at 6:47 pm
First of all, great script!

And i have no questions, you answered all ;-)

Comment by Holger, June 13th, 2007 at 11:08 am
Author Comment

Thanks Holger, now that’s nice :-)

Comment by Klaus, June 13th, 2007 at 12:55 pm
Klaus, I’m trying to implement your tab plug in and find a problem with the positioning of the image behind the tab, is offset and cut in half, I don’t know if there is something wrong here or if is something that am doing.

I’m trying to use the simple tabs, nothing fancy but need to be able to edit the css.

Can you please give me some tips on how to control the background image?

Thanks!

Cheers,

Jay

Comment by Jay, June 14th, 2007 at 9:39 pm
Can anyone point me to a working example of these great tabs, NESTED?
Cutterscrossing mentions that he does it, but with no demo. I am about to build his model, and hope it works. Just thought I would see if there were other models around.

http://blog.cutterscrossing.com/index.cfm/2007/3/16/Nested-Tab-Sets-with-JQuery-and-the-Tabs-Plugin

Comment by wheezer, June 15th, 2007 at 5:44 am
Awesome plugin, thanks !

I’m don’t understand this part of the doc :
“In addition if a fragment identifier/hash in the URL of the page refers to the id of a tab container of a tab interface the corresponding tab will be activated and both the initial argument as well as an eventually declared class attribute will be overruled.”

Could you please give a little example to show how to use this feature ?

Sorry for my bad english

Comment by vin100, June 15th, 2007 at 12:59 pm
Author Comment

@Wheezer, there’s a nested tabs demo online:
http://stilbuero.de/jquery/tabs/nested.html

@Vin100, it just means that if you have a hash in the URl that belongs to a tab, like “http://stilbuero.de/jquery/tabs/#fragment-3″, it will take precedence for determining which tab is active, e.g. even if you do $('#container').tabs(1); on the page and call it with the URL above the third tab will be active.

Comment by Klaus, June 16th, 2007 at 8:34 pm
Tabs 2.7 had a small issue with Safari. Line 372-ish of the tabs.js file. The error occurs when the is submitted to load a tab. If you already have some GET variables in the URL, they don’t get sent with the form request.

Here is my fix:

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

Comment by Craig, June 18th, 2007 at 5:06 pm
I finally figured out and what could be important for some people to know, is that the span tag within the li list is mandatory in order to closed the background image.

For example:

/* This will properly close the bkg image behind the tab name */

Documentation
Tools
Components

Documentation section 1….

While this example:
/* Without the span tags inside the anchor tag closes only the right side of the bkg and not the left */

Documentation
Tools
Components

Documentation section 1….

Comment by Jay, June 18th, 2007 at 9:19 pm
Author Comment

Please, please, if you don’t start to encode HTML entities properly, I’m going to close down comments. Both comments before this one are completely unusable.

And yes, I wrote about that there is an additional span element required.

Comment by Klaus, June 18th, 2007 at 11:26 pm
I’m very sorry Klaus, but you must understand that information is scattered everywhere.

Perhaps an implementation of Frequent Questions & Answers will prevent people from duplicating postings and allow your visitor to access the information you post more effectively.

Once again thank you for such great plug in.

Comment by Jay, June 19th, 2007 at 1:58 pm
>>Please, please, if you don’t start to encode HTML entities properly,

Thanks. The question were in plain text and you could have understood them by just reading, even without “adjusting” the code I put between the code blocks. If your comment script is too stupid to parse comments correctly, you should write that down somewhere … Back to my questions, which I could hardly remember:

1. Please make a faq or documentation. It’s really useless to search the comments for solutions.

2. I need to update tabs on request. So if e.g. on tab one a form is submitted, the data which is shown in tab two also has to be reloaded when switching to tab two (using static tabs). The same would be nice to have for ajax tabs in v3.

thanks anyway

djot
-

Comment by djot, July 9th, 2007 at 1:38 pm
Is it possible to use hashes with parameters?

For example, is it possible to emulate this url with hashes:

index.html?file=test&id=10

Can the history plugin make it work like this:

index.html#file=test#id=10

I’d like to do something like this so people can bookmark the results they are looking for. Any ideas?

Comment by Graeme D, July 9th, 2007 at 2:00 pm
Author Comment

Djot, firstly I don’t like your aggressive tone here. As far as I can remember, I’m providing the whole thing for free, in my spare time that is. You seem to be one of the people that like to forget such things. Feel free to code your own solution. As I already stated, you’ll find an exhaustive documentation in the source.

Secondly, I’m using WordPress out of the box here, so you may head to wordpress.org and complain to them about the stupidness of their blog software.

I suggest that before blaming someone else, you should go and learn how to encode HTML entities, which is one of the most basic HTML tasks ever.

Apart from that, I don’t understand what you want to achieve and how you want to update static tabs. Most probably you can already achieve this with the provided onClick callback.

Comment by Klaus, July 9th, 2007 at 3:18 pm
Author Comment

And thirdly, I can’t remember adjusting any of your posts, Djot, assuming that you do not post using different names here.

Comment by Klaus, July 9th, 2007 at 9:49 pm
Hm your tabs are great but i found today they dont work well with hover menus. THe tabs seem to always overlap the hover menu. I tired messing with the z-index but to no avail. any ideas on why this is happening? The menu in question is made at cssplay.co.uk final drop down v2 found here

any help would be great, thanks.

Comment by Ali, July 11th, 2007 at 8:35 pm
-
Dear Klaus,

private message … to be deleted afterwards!!!

no, i don’t post with different names …

>>I’m providing the whole thing for free, in my spare time that is.
>>You seem to be one of the people that like to forget such things.

No, I am in the same situation. Don’t care about people like me … there are enough people that might be more polite and thankful than me … I am also thankful for the tabs plugin. Anyway I am able to tell my opinion which seemed to be “too hard” for you, sorry for that.

Back to my idea/suggestion:
I want to have static tabs that are only loaded once (at least at the first time the website is called, to save bandwidth and server calls), when the webpage is loaded. Later, there might be a sitution like there is a form in tab one submitted, and the data of that form on tab one is used/shown on tab two. So tab two has to be updated (via ajax) when the form of tab one is submitted.
For sure I could realize that with an onclick event, but it would be nicer if the plugin (the special tab) would have some kind of “reload me” indicator with an optional ajax url.
In short: Initialize a static tab with optional ajax operations – a mixture of a static and ajax tab.

kind regards

djot
-

Comment by djot, July 12th, 2007 at 9:46 pm
Nice Tabs!!

How can I make a tab clickable even it is activated? For example, now if I click “TAB1″ to go to tab1.html, “TAB1″ is not clickable after go to tab1.html

Comment by Frank Chau, July 13th, 2007 at 9:42 am
Author Comment

Frank, this is not supported unfortunately as I never saw the need for it. Maybe you can tell me what you want to achieve and we find a solution!

Comment by Klaus, July 13th, 2007 at 9:47 am
Great work! If only you could dynamicly ADD and CLOSE tabs… maybe a red “x” close button in the right top corner, like in the Windows XP GUI.

Comment by Steven K., July 17th, 2007 at 6:58 pm
[...] not letting innerfade and tab jquery work I have a site which combines the jquery tabs and innerfade scripts. however when viewing in IE the tabs don’t work due to some conflict in the [...]

Pingback by IE not letting innerfade and tab jquery work - DesignersTalk, July 18th, 2007 at 9:23 pm
[...] links not working in IE seem that the the jquery tabs and innerfade scripts are conflicting but i’m stumpt on how to get around it. the scripts are in a [...]

Pingback by links not working in IE, July 18th, 2007 at 9:55 pm
The AJAX tabs from the example page seem to be broken in Safari 3 (windows).

Try clicking the AJAX tabs in order from left to right pausing a moment in between… that seems to give unpredictable results. Sometimes a different tab than the one you selected will pop up a moment after you click.

Once it has messed up, say showing tab “three” when you click tab “one”, you will notice that further repeated clicks on tab “one” will consistently bring up tab “three”. That seems to indicate that it is not just some asynchronous loading issue.

Comment by Loren, July 19th, 2007 at 2:50 am
I’m getting a large gap between the tabs and the line that should cross the page right below the tabs themselves. Anyone know how to handle this?

Comment by Matt, July 19th, 2007 at 4:11 am
Author Comment

Loren, that is an issue with the history plugin. I didn’t have time yet to fix that and for now I can only say history isn’t supported in Safari 3 (beta!).

Comment by Klaus, July 19th, 2007 at 2:01 pm
Hello Klaus,
I’ve got one problem, if you are interested :)

I messed around with the CSS of the tabs script and I use it for a website of mine, Connected-Women.com (Click here!). I use the script on a directory (Click here!) and I have to hide the tabs until page ready and show them with jQuery because other wise it shows the whole content of the tabs, without CSS, and then puts the CSS on them (witch looks really ugly).

Do you possibly know why this is happening?

Comment by Magnus, July 20th, 2007 at 12:38 pm
And yes, I forgot! In IE6, when you click a tab, the page scrolls down to the bottom really quickly, and then back up again. You know why? :)

Comment by Magnus, July 20th, 2007 at 12:46 pm
Author Comment

Magnus, the flash of content occurs if the DOM ready event is delayed, usually it isn’t visible. I assume that some other scripts interfere here. As far as I know scripts that use document.write may cause that, but I’d need to confirm that by another test.

As for your second problem, that shouldn’t occur at all, I have fixed that a while ago. Do you use the latest version of Tabs? If you don’t need history support for your tabs, you can remove the reference to the history plugin and the scrolling won’t happen (if it is what I suspect).

Comment by Klaus, July 20th, 2007 at 10:53 pm
Thanks for the reply, Klaus, and for the heads up on the Safari 3 / history plugin issue. Much appreciated.

Comment by Loren, July 22nd, 2007 at 1:13 am
@Forrest and @Klaus,
I have been trying to get the Ajax tabs working on IE. My situation was everything was fine with Firefox (as expected ?), but the scripts in the ‘loaded tab’ page did not work in IE. After referring the definition for,

load(url, params, callback) on
Link to the reference page

my problem was clear. I just placed the scripts at the bottom of the ‘loaded page’ and things worked in IE :-). IE hack again?

Anyways, I guess someone is having/had this problem and it is worth noticing.

Klaus, thanks for this great script again.

Comment by Karthik, July 25th, 2007 at 3:13 pm
Thank you for the reply, much appreciated!

Regarding my first problem; I tried removing my “On-Page-Ready” code and it seems to work like it should. Don’t know if it had something to do with an old script I was using or bad code some where, but at least it works now :)

And my second problem; I removed the history plugin and it works fine now. No flickering in IE 6. I don’t need it that much so I’m not going to put any thought into why it didn’t work, but you are probably right, it has something to do with another script.

Thank you for the response!

Sincerely,
Magnus

Comment by Magnus, July 25th, 2007 at 3:18 pm
Hi Klaus. Very nice script!

Here’s a question regarding the Ajax-tabs (or maybe a nice feature for tabs3?): Is there a way to give each Ajax-tab a unique name instead of one preset hashPrefix?

Sincerely,
Lars

Comment by Lars, August 2nd, 2007 at 9:26 am
Hi Klaus, I sort of have the same question as Lars right above me.

We are using tabs in Ajax mode and would like to add SEO functionality, specifically, using one unique URL to access the content in both JS and non-JS environments. A spider will see the links (to full page scripts, not fragments) in the ul and follow and index them, no prob. (We will link to full page scripts because we want the spider indexing the content that way.) On the JS side, we are planning to mod the loading of the remote tabs URL to pass an additional parameter telling it to only load the tab portion of the page… that way the whole page is not regenerated in the tab. (Hope this will work?) The problem is then that the URL of the tabs is dynamically rewritten to the hash format, and users may bookmark, link, share those URLs, when we want them to actually use the original URLs that are in the source code. How would you recommend we tackle this problem? I realize that the hash identifier is important to the whole functionality. Can it be pushed over to the rel attribute of the a tag instead?

Also. In the ajax version, can we write one default tab-container server-side (as if we were using the static version) and then init the tabs with remote:true, and have it still function properly? Basically, we need the active tab content on the page to be accessible by the SE spider.

It might be nice for the next version, that it be as search engine optimized as possible, which would mean support for unique URLs (and not using the href attribute to pass important ids/params). (hashed/anchored URLs don’t count as unique.)

Thanks for your time and effort! I apologize in advance if these are simplistic questions, I can read the source and understand basically what it does, but can’t write hacks for it yet.

This is for a major entertainment site, and I think you would be proud to see it working in the end.

Comment by mari, August 3rd, 2007 at 7:25 pm
I am indebted to jquery team. Its great that you guys did this library.

Comment by Webcrawler Sam, August 3rd, 2007 at 10:39 pm
Author Comment

Mari, there is no need to add an aditional parameter. jQuery adds a custom request header to each Ajax request, by which you can distinguish between a standard and an Ajax request and deliver a complete page or a portion respectively. The header is: X-Requested-With: XMLHttpRequest, with Rails for example this works out of the box: request.xml_http_request?; I assume other frameworks have that as well.

That said, if used as described above, the tabs are pretty well SEO optimized. A spider would just follow the standard links and index the pages correctly. The Tabs plugin does only progressively enhance the page but it’ll still work fine without.

I don’t know of a solution to your bookmarking problem. Although if a user bookmarks a page with the generated hash, the corresponding tab will load if the user follows the bookmark, thus I don’t understand the need for alternate bookmarks. Using a fragment identifier (hash) is absolutely essential for 1. graceful degradation and 2. history and bookmarking support. You could use the rel attribute, but that is simply wrong to me and besides it would disable bookmarkability anyway.

Comment by Klaus, August 4th, 2007 at 1:37 pm
Hi Klaus, thanks so much for your quick response. I didn’t know about the extra header. That should work perfectly.

As for the bookmarking, I was wondering if we could have the same URL (the one that is linking the HTML) as the URL of the tab href, instead of having the hashed URL, and then squirreling away the hash identifier in rel and reading it back from there. (I wasn’t suggesting getting rid of the href in the tab altogether.) It’s not really an issue of vanity URLs in the bookmarking so much as it is an issue of having the hash url propagated over the internet by people sharing it, because it’s the URL they will see in the browser window. We only want one URL used, that way, as inbound links are accumulated, they will all point (and give credit to boost the PageRank) to the same URL. Thanks again.

Comment by mari, August 6th, 2007 at 2:36 pm
Hi,

I have a problem… I am not a javascript programmer so maybe I am not setting something correctly.

whenever i have a form/link that is submitted/clicked in the second tab, the first tab gets enabled again. How can I avoid this?

I have two links on the second tab. Clicking on those links should fetch data from different htmls in the second tab itself (i am doing this by calling javascript function that loads data via jquery load call), but the first tab gets enabled again.

Any help/suggestion would be greatly appreciated.

Much thanks

Comment by skc, August 6th, 2007 at 4:52 pm
Author Comment

Mari, again, without having the hash changed there is no way of bookmarking at all. You would have one single URL for all the tabs on the page. You cannot change the URL without reloading the page except for when changing the hash. All the history/bookmarking managers you’ll find rely on that. Storing the hash somewhere else, be it a misused attribute or a JavaScript variable, won’t help. But without changing the URL “they will see in the browser window” you won’t ever get a proper bookmark at all. I’m sorry, it will just not work.

Comment by Klaus, August 7th, 2007 at 1:32 pm
Klaus,
I tried your ajax-tab plugin and I am having problems accomplishing a behavior I want. How do I preselect/load and display a tab from the tab-container.

I tried
$('#tabContainer').triggerTab(2);
for selecting the 2nd tab as I used to do with the non-ajax tabs, but it does not seem to work. Please advise me if there is a way to do this.

Thanks a lot for this nice plugin.

Comment by Karthik, August 11th, 2007 at 3:59 pm
Author Comment

Try this: $('#tabContainer').tabs(2, { /* options... */ });

Comment by Klaus, August 11th, 2007 at 7:08 pm
Hi just stumbled on your wonderful plugin. I am using this to combine user actions like registration, login and retrieving lost password. I have succesfully installed it and is working perfect in ff and opera. it is distorted in ie7 and safari 3.0. in ie7 the borderline goes up the tabs. in safari and when a tab is clicked it loads the page and resets to the tab before it.

Any help??

Thanks

Comment by Diin, August 15th, 2007 at 4:10 am
Author Comment

Diin, I’m not aware of any CSS issues. Maybe it’s a problem with your own CSS?

Regarding the Safari 3 problem, that is most probably a problem with the history plugin. It simply doesn’t support Safari 3 right now, I’m sorry. You shouldn’t use it if you want to support Safari 3 (after all it’s still a beta version).

Comment by Klaus, August 15th, 2007 at 12:07 pm
I have been trying to get your tabs to work, I even copied your examples directly, yet nothing happened. I’m kind of lost which js files I need to link to. I need the …pack.js file and the tabs.js file but do I need other files from the pack as well? I try to keep the files I use to a minimum so it’s all a bit confusing to me. I’m also very new to jquery so forgive me if I ask a stupid question. I’ve been scourging your demo for hours trying to figure out why there is no tabbing going on.

I got it to work with idTabs though. But I’m going for ajax handling, so I’d prefer to use your plugin. Maybe you can help me out here. Basically my questions are: what files do I need to put in my js folder and which do I need to add in my section?

Comment by Korijn, August 17th, 2007 at 9:22 am
[...] tabs 플러그인을 이용하여 탭 메뉴를 동적으로 구현했습니다. 플러그인에서 지원하는 [...]

Pingback by 겸손한 탭 메뉴 구현 - Hooney.net, August 20th, 2007 at 6:19 am
If I am correct then Line 227 of the latest jquery.tabs plugin did not work with JQuery 1.1.3.1 (IE7 and FF2)

var $$ = $(this).addClass(settings.loadingClass), span = $('span', this)[0], tabTitle = span.innerHTML;

Had to remove the [0]

var $$ = $(this).addClass(settings.loadingClass), span = $('span', this), tabTitle = span.innerHTML;

The latter one works.

Comment by Dirk Paessler, August 21st, 2007 at 4:18 pm
Hi,

Have been using your tab for a while. It works perfectly. Recently I am trying to enable the history plugin by placing the jquery.history_remote.js in place. Anyway, it seems to have a flow/bug when I tried to select a tab and do something in the tab and submit the tab’s content. The tab doesn’t select my current selected tab but my previous selected tab.

What I did in order to let the tab remain is to click the current tab and refresh first(so that it will keep the current tab in history) then only do a form submit in the tab’s container.

Anyway to fix this ? Cheers !

Comment by Roland, August 23rd, 2007 at 7:14 am
Hi,

I left out one more thing. Let’s say I have a tab within a tab. Can the history actually keep track of that ? Meaning that keeping the parent tab and child’s tab at the same time in history. Is this possible ? If no, can this be fixed and how ?

Thanks in advance.

Comment by Roland, August 23rd, 2007 at 7:52 am
Wouldnt it be nice to have a callback when the page is (re)loaded eg. onLoad.

I use just one of the a Tab-set to load content via Ajax while using the onShow Callback.

That works great untill I reload the page. Then of course the Callback isnt executed.

perhaps theremight be an easy workaround without changing the codeofthe jquery.tabs.js lib.

Thanks in Advance

Comment by Ravenel, August 23rd, 2007 at 7:54 am
Is it possible to replace

“One”

with a href=”somelink” ? I would like to redirect a visitor after click to an other page if his/her browser has Javascript disable. Is it possible?

Comment by Swieczkos, August 24th, 2007 at 6:02 pm
Is it possible to replace:
One

with a href=”somelink” ? I would like to redirect a visitor after click to an other page if his/her browser has Javascript disable. Is it possible?

Comment by Swieczkos, August 24th, 2007 at 6:03 pm
It should be
(…)li href=”#fragment-1″ (…) /li
where link appeared

Comment by Swieczkos, August 24th, 2007 at 6:05 pm
I am a newbie with jquery and your tabs plugin. I am very impressed so far. I just have one quick question. When using the ajax tabs, is there a way so that the page is not re-loaded each time you switch to another tab, so that the page is cached on the client side? I have entry fields loaded on a page that I dont want to loose when I switch to another page. I know I can store this in the session, I wasnt sure if there was an easier way.

Also, I can’t get a JSF page to load in one of the tabs. It just makes it hang.

Thanks

Comment by JC, August 27th, 2007 at 4:59 pm
How display tabs on bottom , after a container ?

Comment by alf, August 28th, 2007 at 5:49 am
Just want to say thanks for your great job.
A lot of people dont so I do it for them.

Comment by losted, September 6th, 2007 at 9:54 pm
Author Comment

Thank you, I appreciate it!

Comment by Klaus, September 7th, 2007 at 6:05 pm
Great plugin, very useful to me. Will the next version have features comparable to yahoos tabview? I use jquery a lot but at work we are movign toward extjs and yahoo components. Anyways keep up the great work.

Comment by Quincy Glenn, September 8th, 2007 at 8:59 pm
when you pressure on a border the text inside of it you go down 1px for low, as you make to leave the static text, without it if moves the click after? :b

Comment by Amy, September 11th, 2007 at 3:37 am
Author Comment

Quincy, I haven’t looked at the yahoos tabview for quite a while, thus I don’t know which features there are. All I know is that I’m done with Tabs 3 and it has a lot of frequently requested features been added, like adding and removing tabs… I will post something as soon as I find some time for it.

Amy, I’m sorry, I really don’t understand what you mean?

Comment by Klaus, September 11th, 2007 at 10:00 am
A very nicely designed plugin.
I could get it working within minutes.
We were actually already using tabs in one of our project and I cant tell you what a mess it was. It had all sorts of css/js/java/jsp code scattered all over the place.
I’m really excited to replace all of that junk with this cool plugin.
Excellent work!!!

Comment by Amit, September 11th, 2007 at 10:46 pm
Version 2.7.4 seems to be broken when used with jQuery 1.2 as the .eq() function has been removed and replaced by .slice()

Comment by Ryno, September 12th, 2007 at 5:14 am
Did jQuery 1.2 just break your code ?

Comment by Roland, September 12th, 2007 at 9: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:31 am
Do you have the pack version ? :p either way I can use packer to do the job ;) Thanks for your reply, anyway. Have a nice day !

Comment by Roland, September 12th, 2007 at 10:53 am
Hi Klaus,

I’ve tried to replace the current version 2.7.4 with the download link that you gave me previously but the tabs are not working properly, no errors though. It can’t even initialize the tabs. What do I need to do ? Did I miss out any files ?

My current tabs are being initialize as follow :-

$(”#myTabs”).tabs();

Is it still using the same initialization ?

Thanks.

Comment by Roland, September 12th, 2007 at 11:38 am
Author Comment

Tabs 3 do not longer require a container, thus you need to initialize with the ul or ol element.

For you most probably $('#myTabs ul').tabs(); will work.

See section “Sample Code” on top here.

The reason is that this will give you maximum freedom with your HTML…

Comment by Klaus, September 12th, 2007 at 11:58 am
$(”#myTabs”).triggerTab(index);

The triggerTab no longer supported in Tab 3 ?

Comment by Roland, September 16th, 2007 at 4:47 pm
Sorry, didn’t read your documentation properly. It’s now tabsClick(index).

Comment by Roland, September 16th, 2007 at 4:50 pm
[...] 另外還有這個Tab看起來也是滿簡單好用的，對於我這種懶人而言實在是相當方便:D [...]

Pingback by jQuery Plugins | Cyberpunk網際叛客, September 17th, 2007 at 7:26 am
you had me suicidal, suicida. Essa Morty.

Comment by Essa Morty, September 20th, 2007 at 1:58 am
I’ve added an onLoad event to your plugin, because I needed to initialize some coontrols after the Ajax call was made. I’ve just made a few fast code additions and worked, perhaps you could implement it in a more elegant way, it would be great.

Comment by Soflete, October 3rd, 2007 at 3:33 pm
Hello.
I will use the tab plug-in.
Could you help though it is thought that UTF-8 is good to display 2bite character with AJAX though it doesn’t correspond with Shift-jis because of the server and it doesn’t disregard it?

Please teach if there is a method.

Thx ;-)

Comment by KAIE, October 5th, 2007 at 6:53 pm
Hi,

I am just starting with jquery and also found your awesome tab-solution. I think it will work great for me. I have only one more question. Is it possible to combine static tabs with ajax tabs (i.e. two static tabs and two ajax tabs in one container)?

Thanks for the script anyway it´s a really great piece of code,

Frank

Comment by Frank, October 16th, 2007 at 12:58 pm
Author Comment

Starting with Tabs 3 mixed tabs are possible, just throw them all in…

Comment by Klaus, October 16th, 2007 at 4:43 pm
Hello Klaus,
I am sorry to bother you, but I am having a small problem implementing the tabs to work with cookies so that on a page refresh the tab being open is remembered.

Tried to follow the comment http://www.stilbuero.de/2007/02/05/tabs-plugin-update-support-for-unobtrusive-ajax/#comment-25582

but with no luck, perhaps it is outdated?

I have 3 tabs and within each tab I have a batch that lists the next 5 items on the list, but everytime I click on the next 5, then the first tab is shown. If I pass the #fragment-x to the URI this works, but then I would have to change my batch control for each tab. Maybe there is a slicker way to do this.

Can you please do a demo utilising this.

Here is the code I am working from:

var TABS_COOKIE = 'tabs_cookie'; $("#container-1 ul").tabs((parseInt($.cookie(TABS_COOKIE)) || 1,{ onClick: function(clicked){ var lastTab = $ (clicked).parents("ul").find("li").index( clicked.parentNode) + 1; $.cookie(TABS_COOKIE, lastTab);}, fxSlide: true, fxFade: true, fxSpeed: "normal" }); News Jobs Branches {news} ${jobs} ${branches}

Many thanks

Norman

Comment by Norman Khine, October 17th, 2007 at 8:59 pm

Klaus Hartl – Stilbüro - Klaus Hartl

Tabs plugin update: Support for (unobtrusive) Ajax

148 Comments

Search

Additional Information

Calendar

Most Recent Posts

February 2007
M	T	W	T	F	S	S
Jan				Apr
			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