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

Then the tab control displayed “&” 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.

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

Now with yummy cookies!

I added an example page showing how you can use the new onLoad and onClick function hooks in my JavaScript tabifier to make the tabs persistent (using browser cookies).

That is, if you leave the page and come back later, the tab you previously selected will still be selected.

I made the following bookmarklet to sort all the select lists on the page. It’s probably not much use to anyone else, but at least I got to learn how to make a bookmarklet. Unfortunately it has to work in IE, which has a strict limit on the size of bookmarklets, so I had to keep it very simple.

SortSelect bookmarklet

Bookmark this link then click it on a page that has one or more select elements. The select lists will be sorted alphabetically. Tested in Firefox and IE6.

Test:
z z y x A C b

I just released a new version of my JavaScript tab interface software.

New Features

• You can set a custom onLoad function to be called after the tab interface has finished initializing.
• You can set a custom onClick function to be called when the user clicks a tab. In addition to performing any other actions, this function can stop the tab from changing.

Here’s an interactive tutorial I’m working on:

Learn CSS Positioning in ten steps

I’m using it to give some CSS and HTML training today. It uses a customized version of my JavaScript tabs interface and triggers a styleswitcher each time you switch tabs, so you can see the CSS change right on the page.

It’s a work in progress, so let me know if you have any suggestions.

I just released a new version of my JavaScript tab interface software. It has some new features that make it crazy-easy to use, plus I eliminated a memory leak in the IE browser (damn you Microsoft!).

New Features

• You can set the tabberOptions global variable before you include tabber.js to change any of the tabber settings.
• You no longer have to specify a title for each tab – it automatically finds heading elements in the body of the tab. Of course you can still specify a title if you don’t have headings or to override the title of the tab. And if you don’t do either it automatically numbers the tabs. See also tabberOptions.titleElements and tabberOptions.titleElementsStripHTML.
• Removes the title attribute from the tab so it does not appear as a tooltip when you mouseover the body of the tab. See also tabberOptions.removeTitle.
• You can prevent tabber from running automatically in the onload event. See tabberOptions.manualStartup.
• Fixed a small memory leak that appeared in the IE web browser.

I wonder if there are any issues with “memory leaks” due to IE’s faulty garbage collection… let me know if you notice anything.

Update: Hold the presses, I found a few more links. Some of these pointers are not used except when creating new elements to add into the DOM, so I can probably just switch those to use local variables. It shouldn’t matter, but with IE’s faulty garbage collection, who knows if it might cause problems.

Update h good god, the squiggly lines have taken over!

To make this happen you start with plain, semantic HTML, then you add a JavaScript layer to rework the page into something better:

One problem with this technique is that your JavaScript must run after the HTML has been set up and rendered on the page, so a user with a slow connection might see something like this using my JavaScript tabbifier:

This is not too pretty, so obviously we want to make it stop.

Your first thought might be “I’ll just add a style to the content to make it hidden (CSS display:none), then my JavaScript will run and reveal it!” But that puts a big crack in our Holy Grail, because if you use CSS to hide the content, it will not be visible to users who do not have JavaScript.

Here’s the method I used:

1. Add a class javascript-hide-me to the content you need to hide, but do not define that class in your CSS.
2. Before the content, use JavaScript to define the CSS class. The easiest way to do this is by using document.write in the head section of the page, but you will have to directly modify the DOM if you are serving XHTML pages that use MIME type application/xhtml+xml.
3. After the content has been transformed, use JavaScript to remove the CSS class and reveal the content.

Here are two examples, one that exhibits the flashing problem, and another that fixes it using the technique described above. Note that in order to see the flashing problem, you need a slow internet connection: I recommend throttling your connection using the excellent Charles Web Debugging Proxy.

• flashing
• flashing fixed

Updates 2006-03-09

Welcome, Ajaxians!

Bobby describes an alternate technique in case you are serving XHTML pages that use MIME type application/xhtml+xml.

Steve Clay makes a valid point that we should check for DOM compatibility before writing the styles on the page.