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?
March 24th, 2008 at 4:48 am
Is it possible to add a tab dynamicly?
I wanna reload a form with ajax and the form have different count of entrys, depending what the user choose before.
April 3rd, 2008 at 4:07 am
Working great. Would love to turn off the “title” popup when you mouseover the tabs. Can’t find anything in the js to turn it off though, it seems to want to create a title for the tab no matter what
Thanks for a very useful bit of work.
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!
April 21st, 2008 at 3:37 pm
Hi Patrick & thanks for your efforts!
Q: any suggestions on modifying your scripts to use images as the tabs instead of text?
May 2nd, 2008 at 5:00 am
here’s the link sorry
http://student58.tangostudents.com/tab.html
June 11th, 2008 at 11:33 am
Hi, this script is fantastic - it does what it says on the tin and I’m well chuffed with it.
I have a question - can I rig up something to ‘print the active tab’? when a webpage is printed it (correctly) strips out the JS and dumps everything on the page. What I would like is to have a link/button just below the tab title to print the active tab.
I’ve been thinking about it, but it seems like it might be a bit of a job… any thoughts would be greatly appreciated.
Thanks again for a nifty script!
Clive
July 23rd, 2008 at 1:59 am
Don’t quote me, but I believe there is a printing script out there in which you can tell it to print a certain “section” such as a particular DIV/Table or whatever.
I don’t know, that’s the only thing I could think of at the moment.
July 28th, 2008 at 4:40 pm
I see a few questions on here about how to dynamically add tabs. Here is a prototype addtab() function that will allow for the programmatic creation of additional tabs within Javascript along with a calling function
I basically ripped this off from the init() function
tabberObj.prototype.addtab = function ( obj )
{
if(obj.className &&
obj.className.match(this.REclassTab)) {
t = new Object();
t.div = obj;
this.tabs[this.tabs.length] = t;
if (obj.className.match(this.REclassTabDefault)) {
defaultTab = this.tabs.length-1;
}
}
t.headingText = t.div.title;
if (this.removeTitle) { t.div.title = ”; }
for (i2=0; i2<this.titleElements.length; i2++) {
headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
if (headingElement) {
t.headingText = headingElement.innerHTML;
if (this.titleElementsStripHTML) {
t.headingText.replace(//gi,” “);
t.headingText = t.headingText.replace(/]+>/g,”");
}
break;
}
}
DOM_li = document.createElement(”li”);
t.li = DOM_li;
DOM_a = document.createElement(”a”);
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = “javascript:void(null);”;
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
DOM_a.tabber = this;
DOM_a.tabberIndex = this.tabs.length - 1;
if (this.addLinkId && this.linkIdFormat) {
aId = this.linkIdFormat;
aId = aId.replace(//gi, this.id);
aId = aId.replace(//gi, i);
aId = aId.replace(//gi, i+1);
aId = aId.replace(//gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ”));
DOM_a.id = aId;
}
DOM_li.appendChild(DOM_a);
var DOM_ul = this.ul;
DOM_ul.appendChild(DOM_li);
DOM_a = document.createElement(”a”);
DOM_a.appendChild(document.createTextNode(t.headingText));
DOM_a.href = “javascript:void(null);”;
DOM_a.title = t.headingText;
DOM_a.onclick = this.navClick;
}
//Calling function
var divid = 4;
function addtab() {
// Get ahold of the tabber we’re trying to add to
var ni = document.getElementById(’mainnav’);
// Create a new div
var newdiv = document.createElement(’div’);
// SEt the ID
newdiv.setAttribute(’id’, ‘mynewdiv’ + divid);
// Set the title and content
newdiv.innerHTML = ‘Tab ‘+ divid +
‘ Here is new div’ + divid + ‘!! ‘;
// set the tab class to be hidden so it doesn’t show up while we’re adding it
newdiv.className = ‘tabbertab tabbertabhide’;
// add our new div to our menu
ni.appendChild(newdiv);
// and finally add the new tab to the menu
ni.tabber.addtab(newdiv);
// increment our variable
divid++;
}
August 4th, 2008 at 11:47 pm
I love this script. I have a question though. I want on another page a a href link to a page with tabbertab and go to a specific tab. Another page has to link to another tab etc. I am no Javascript expert, so I’m kinda lost here.
An example would be really appreciated.
August 27th, 2008 at 9:48 pm
Hi how would i have the tab load to a PHP page instead of a HTML page extension, i tried changing it to .php but just hangs and says loading all the time, any ideas
Thanks, Nice script BTW
September 2nd, 2008 at 10:41 am
Awesome script. Easy to integrate and worked great the first time.
I am having a hard time getting images to show up in the tab title though. Any help would be much appreciated.