JavaScript tabbifier v1.7 new features
I just released a new version of my JavaScript tab interface software.
New Features
- Can automatically set a unique id for each tab navigation link, which allows you to individually style each tab.
- Includes a “minimized” version of the code (with comments and whitespace removed, for extra-fast loading).
April 12th, 2006 at 2:48 pm
sir,
nice interface. Question (and I’m a newbie so humor me) is there a way around the constraint that when someone does a search on the page, that it won’t find results if they are not visible on the active tab?
e.g. I get to my site, b/c I’m lazy I do a search on the page (that has tabber) for “widget” which is nested in the content of information on a tab that is not active at the moment.
- christopher
April 12th, 2006 at 2:57 pm
Good question - unfortunately the answer is no. The browser doesn’t search hidden content. You could provide some kind of “expand all” function, but it wouldnt’ really solve the problem in all cases.
May 7th, 2006 at 11:24 am
Thanks, this is a great little script. One question: can you suggest a way to have runtime code change the currently selected tab?
May 7th, 2006 at 12:01 pm
Yes, you can do that as described in the forum. I’ll try to add this to the tabber page when I get a moment.
May 26th, 2006 at 8:42 am
I want to reload several tabs through one Ajax call. How do I make that together with rebuilding the tabberlive and tabbernav divs?
TIA
/Göran
June 29th, 2006 at 2:06 am
Would there be an easier way to style the tab colors for mouseover, hover, and active? Id like to have muliple pages with these tabs… just would like diffferent colors of tabs without going to the css file all the time.
February 6th, 2007 at 6:48 am
great nifty script. Just came across today and I loved it. I’m running some test with it trying different type of content. I’m having issues with & sign showing in its code form (& amp;) in the h2 headers (tabs names). I tried both iutf8 and iso charsets but it doesn’t help. Anyway in the content itself & or any other accentuated characters doesn’t pose problems. Any pointer on what might cause that.
Sorry to bring up this old ticket but couldn’t find any better place to post this.
TIA
February 6th, 2007 at 8:11 am
@Firewolf:
Thanks for your comment - it looks like this occurs because document.createTextNode() does not convert entities. However, it looks like innerHTML does convert entities, so to fix your problem find the following line:
DOM_a.appendChild(document.createTextNode(t.headingText));
and replace with the following:
DOM_a.innerHTML = t.headingText;
I’ll give this more thought and if I can’t think of any bad side effects I’ll roll this change into the code.
April 11th, 2007 at 10:04 am
Your script was a lifesaver! I’m a BA designing the web front end for an asset management co and needed to demo the difference between a tabbed and scrolling interface for policy application capture.
I don’t know j script, my html is shaky and yet I was able to convert 6 of my scrolling capture forms to tabs in less than an hour. Everyone thought I was some kinda undercover genius.
Thanks!
August 29th, 2007 at 6:55 am
Hi,
This code helped me a lot in my Project. I need a small help. Is thr any way to use a Form inside a particular tab, so that on Submitting, the target of the form will be loaded into the same tab. If possible plz let me know.
Regards,
Prasad.
September 6th, 2007 at 10:33 am
Hi Pat - Great script, I love it. I just have one question for you. How do you set a unique ID for the tabs in the navigation? I’d like to hide the text in the nav and replace it with an image instead.
eg. ul.tabbernav li#tab1, ul.tabbernav li#tab2 etc. etc.
Your help would be much appreciated.
Thanks,
Curtis
September 11th, 2007 at 10:12 pm
This is absolutely PERFECT! I love this script. It works wonders, and more.
The only question I have is: How to I change the tab using a link in the same page, while snapping to where the tab opened.
For example, If I click on Link A, it should change the tabs from Tab A to Tab B, only Tabs A + B are at the bottom of the page, so the page needs to scroll down to see it.
I was going to try some type of URL#tab link, but it doesn’t work when you put a link inside the closed tab.
Any suggestions?
September 16th, 2007 at 3:40 am
Hi pat,
great work, thanks a lot!
Also a question from my side. When i add new “raw” HTML Tab code to my page dynamically via AJAX, how can i convert it into active content? Calling tabberAutomatic(); at the runtime is not the way to go and not the supposed way to go i guess?
Best and Thanks Kai
September 29th, 2007 at 4:22 am
Using the zoom function in IE makes the text in the tabs misalign. It works fine in firefox. Any chance this can be fixed?
December 3rd, 2007 at 6:15 am
Is it possible to specify which tab you wish to be displayed via the query string? For example, if I wanted to directly link someone to a page and specify that tab 3, and not tab 1 or 2 should be shown.
December 6th, 2007 at 3:24 pm
Excellent interface. It was exactly what I was looking for! Thanks!
One thing I’m battling with is that would like to have a new set of tabs inside the main tab set. The problem is that I would like to set the sizes of the tabs differently for the outter and inner set of tabs, so making a simple change to the CSS isn’t working since that will apply to both of them.
Short of making two copies of the control and using different CSS classes for the two sets of tabs, how can I set the size, color, etc. of the tabs independently when having a set of tabs inside a parent tab?
Thanks a million!
January 21st, 2008 at 12:17 am
The sample was really freat & it is easy to understand. But my usage is of Multiline Tabbar. Is there any way we can convert this single line tabbar to Multi-line tabbar.
Thanks in Advance
Vicky
January 27th, 2008 at 8:51 pm
Hi, don’t know if you’ve covered this or not (I didn’t see this in the example demos):
Well, I’m wondering if you can auto-start the view of the tab like a slide show or not? Or is there other script that I can use (I prefer to use your kick @ss script for its flexibility and *ability to add any code inside the tab =).
*I have seen this in Joomla but not in WordPress, so your script I assume can work for any CMS or system.
Thank you again for the work!
~World Wise Web Design ~
*We’ll definitely make good ‘wise’ uses of this one =P.
January 29th, 2008 at 12:08 am
Hello, again. Would you mind emailing me the notice if you had an example of the auto-load tabber (just like a slide play)… I think it’s also good to have a customizable duration and/or let the user pause the auto-play of the tab?
Anyway, hope you can send me a notice.
Thank you.
~World Wise Web Design~
Wise Design for the World(TM)
January 31st, 2008 at 12:21 am
This little script was great. Thr a question i need to ask….
When running on mozila firefox, this script wont work and came out with this error:
[HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable. Please review the following URL and make sure that it is spelled correctly.]
Any help for this?
Thank in advance..
February 2nd, 2008 at 8:56 am
Hello, Patrick!
How to use tabber title in multiline mode?
How to setting tab count per line if using more tab out the div width ?
I using @Firewolf modified version:
http://www.barelyfitz.com/blog/archives/2006/04/10/314/#comment-6688
Thank you!
Elit
February 27th, 2008 at 2:18 am
Sir,
Is it possible to position tabs in two rows one below other?
I used this script to create tabs but i was not able to put tabs in two rows onw below another. could you please tell me if it is possible with your script?
April 10th, 2008 at 1:38 pm
“Can automatically set a unique id for each tab navigation link, which allows you to individually style each tab.”
How is this done? That would be great to use with my ‘color coded theme.’ Thanks in advance!
May 2nd, 2008 at 5:00 am
here’s the link sorry
http://student58.tangostudents.com/tab.html