« links for 2007-02-06
links for 2007-02-07 »

workaround for entity bug (?) in tabber

A user of my tabber script discovered that when his tab headings had an ampersand character like this:

<h2>Me &amp; My Shadow</h2>

Then the tab control displayed “&amp;” instead of a single ampersand character.

It looks like this occurs because the JavaScript DOM function document.createTextNode() does not convert entities. However, it looks like innerHTML does convert entities, so to fix your problem find the following line in tabber.js:

DOM_a.appendChild(document.createTextNode(t.headingText));

and replace with the following:

DOM_a.innerHTML = t.headingText;

I’ll think about this some more and if I can’t find any bad side effects I’ll add to the tabber code.

This entry was posted on Tuesday, February 6th, 2007 at 8:25 am and is filed under DHTML, JavaScript, UI, Web, programming, tabber, tabbifier, user interface, web design, webdesign. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

8 Responses to “workaround for entity bug (?) in tabber”

  1. FireWolf says:
    Tuesday, 2007-Feb-06 at 12:32 pm

    yeah thanx a lot man ;)

  2. wrxcrystal06 says:
    Wednesday, 2007-Oct-03 at 6:15 pm

    This almost fixes the issue. However, when you hover over the tab with the & the Title still shows & Can you please look into this?

    Thanks!

  3. knightrojen says:
    Tuesday, 2007-Nov-13 at 9:47 am

    Thanks! I was just looking into this when I came across your answer! Great script!

  4. Lee says:
    Thursday, 2007-Dec-13 at 5:07 pm

    Thanks for the codes you posted here…

    I found it very useful and successfully implemented in my own website.

    THANKS! very nice work!

    Cheers,
    Lee

  5. Tim says:
    Thursday, 2008-Apr-03 at 4:00 pm

    Thanks, I also found a way to eliminate the hover. You just need to comment out this line:
    DOM_a.title = t.headingText;
    Which was give the text a title again.

  6. Jay Edgar says:
    Tuesday, 2008-Sep-02 at 10:19 am

    Thanks–great tip! This is a really awesome tab system, and I appreciate your sharing it!

  7. Jenn says:
    Friday, 2008-Sep-19 at 1:55 pm

    This is a great feature! I was wondering if you knew of a way to make the tabs have 2 lines for the title? In other words, allow the tab titles to wrap within the tab? This way i can have longer names w/o the whole thing being stretched out far. Thanks!

  8. Angshuman says:
    Saturday, 2009-Mar-07 at 9:13 am

    how to disable a perticular tab….thank u

Leave a Reply