JavaScript tabbifier v1.7 new features

Tabber

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

48 Responses to “JavaScript tabbifier v1.7 new features”

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

  2. pat says:

    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.

  3. jeff says:

    Thanks, this is a great little script. One question: can you suggest a way to have runtime code change the currently selected tab?

  4. pat says:

    Can you suggest a way to have runtime code change the currently selected tab?

    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.

  5. Göran says:

    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

  6. Terry says:

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

  7. FireWolf says:

    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

  8. pat says:

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

  9. Mike says:

    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!

  10. Prasad says:

    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.

  11. Curtis says:

    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

  12. John says:

    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?

  13. Fire says:

    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

  14. Thomas says:

    Using the zoom function in IE makes the text in the tabs misalign. It works fine in firefox. Any chance this can be fixed?

  15. Jonathan says:

    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.

  16. 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!

  17. Vicky says:

    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

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

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

  20. JJ says:

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

  21. Levyt says:

    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

  22. Akshay Jain says:

    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?

  23. MBa says:

    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.

  24. MPB says:

    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.

  25. westy808 says:

    “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!

  26. RV says:

    Hi Patrick & thanks for your efforts!

    Q: any suggestions on modifying your scripts to use images as the tabs instead of text?

  27. Clive says:

    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

  28. leeuniverse says:

    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.

  29. Server Herder says:

    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++;
    }

  30. Kees says:

    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.

  31. Dean says:

    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

  32. Jb says:

    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.

  33. Benedikt says:

    Hi, nice Script it´s fantastic, but I have got a question (similar to World Wise Web Design Question):

    Is there a Possibility for a “Tab-Slide-Show” like this:
    - When the User enters the Page, the first Tab is active. After a few seconds (changeable) the first Tab would disappear and the second Tab is active, after a few seconds the second Tab is deactive and the third Tag is shown. After a few seconds we are back at the first Tab… to be continued.
    - The slideshow pause when the mouse is over the Tab and restarts when mouseout.

    Is there any possibility for this function??? Please E-Mail me about this!!!

    Dont worry about my english ;-)

    Another question: Is there a function to change the tab only by mouseover the tablinks?

    Thx, Benedikt

  34. dodyryda says:

    .. ive used the script tab pan from webfx which is very similar. It was the one that i cam across first. One issue i have is that the text wihin the javascript using tabpane doesn’t seem to included as keywords for google. This is a royal pane. as it damages seo .. would the same be true for tabifier? or will its methd of implementation avoid this?

  35. ND says:

    can search engines index the content within tabifier.. i’ve been using another tab system and google definetly is not indexing the text within the script element. does anyone know whether tabbifier is seo friendly ?

  36. alex y says:

    Hi Patrick !

    Supper job

    Q: Please let me know if it is possible to modify your scripts to display images on the tabs – for example, ajax loading image?

  37. [...] installed the Tabber tab script to display all the new posts and comments [...]

  38. Vincent says:

    I use Tabber on my blog and I think it is really cool. I rate Tabber over MooTabs.

  39. [...] section is just an updated version of my old “Blog Readers” section. I used the Tabber tab script to display MyBlogLog and Blog Catalog’s list of readers without taking too much [...]

  40. Rodney says:

    Fantastic script. Works better than all the others.

    Am I the only one who wants the script to load right away instead of after the page is done? All my tabs initially come out as paragraphs, then once the script loads, it tabifies them.

    Anyone know how to load it right away, so it tabs first instead of at the end?

  41. Rodney says:

    Once I’m here, others seem to be asking about using an image as a tab instead of text. Can’t you just give each tab its own class and assign a css background image? Each DIV already has a class, but you should be able to assign another to either the ‘a’ or the ‘h2′. No?

  42. Carl says:

    I just wanted to leave a little thank-you : I’ve implemented tabbertab in my website (URL is behind my name), loading dynamic content or iframes within the tab pages.
    Works very smoothly; didn’t face any compatibility issues yet !
    Thanks a LOT !
    Carl

  43. Roy Dif says:

    Hi! I always find myself coming back to this post of yours re: tabber. I find it very useful in most of my designs. What I like about it is that its very straight forward in its implimentation….and it works on IE :D

    I have a burning question though, how can the “sliding door technique” be applied to the tabs so I can use images, instead of the plain design?

    Thanks, I’d really appreciate it :) More power to you!

  44. D AB says:

    Hi, what a great script!

    Is there a way of placing the tabs below, so have the individual tab content above the row of tabs?

    This way I will have a menu at the top of each page and a row of active pages shown in the tabs.

    Thanks

  45. Cory says:

    Can you name the tabs on the fly. Like say all my tabs were named resources right? Is there a way to rename them while the site is in use?? Also, if you can, is there a way to save those names so when the page reloads, the tabs name stays.

    Thanks,

    Cory.
    (dyne_33@hotmail.com)

  46. Jim says:

    I would like the tab to change triggered by hover or onmouseover – is that possible?

    Thanks

  47. HGH says:

    Hello all,

    is there a chance to do something like this with this nice script?

    I have a site with more than 20 tabs, even up to 30 tabs.

    http://hgh-esn.ath.cx/rz_Tabs_LPxx.htm

    I want to cluster them as follows:

    Tabbar1:
    Overview | | Tab01| Tab02| …. |Tab10|>|

    Tabbar2:
    Overview ||

    Tabbar3:
    Overview |>| Tab01| Tab02| …. |Tab10| |

    These tree tabbars should be displayed in one area by dyn. tabbar-change, when the user clicks to the “>” oder “” in tabbar1 is displayed, the tab-area should switch to tabbar2
    If “>” in tabbar2 is displayed, the tab-area should switch to tabbar3
    If “” or “>” are clicked..

    From the overview-tab-content links to a specified tab in any tabbar must work.
    Also ext. Link (via url:…) to a specified tab in any tabbar must work.

    Any chance to get something like this?

Leave a Reply