Filtery is a beautiful piece of code by Justin Whitford that I came across back when it was new (Feb 2003!) and have used it in various projects since.

In a recent project, the number of items to be filtered was large enough that the browser noticeably slowed down during the script execution. As originally presented the script is called by the onkeyup and onchange events. The slow down effect was compounded as the script was triggered after every keystroke.

We came up with a very simple idea to alleviate the problem, by writing a simple wrapper function calling the setTimeout and clearTimeout methods:

var v;
function filteryTimer(pattern, list) {
    clearTimeout(v);
    v = window.setTimeout(function() {filtery(pattern, list);}, 200);
}

The delay before the script executes is set to 200 ms, or 0.2 seconds. This was the value we arrived at after a bunch of trial and error, offering a fair balance between the necessary delay and the illusion of interactivity.

The original article can be found on evolt.org.

Edit: Justin has an updated article on his site.

I needed a light-weight tabbing widget for one of the projects I was working on, and not finding anything satisfactory decided to throw one together.

The objective was to make it as simple to use as possible. The content to be tabbed should be marked up like so:

<div id="tab1" class="tabbable">1st tab</div>
<div id="tab2" class="tabbable">2nd tab</div>

Important things to note, IDs must be defined, and the class set to tabbable.

There should be an empty div to hold the generated tabs.

<div id="tablist"></div>

A call to initialise the script is made in the window onload event:

tabsInit('tab1');

There is only one compulsory parameter, and that is the default active tab. There are two optional parameters, tabNav and tabClass. tabNav defines the id for the HTML element to hold the tabs in and defaults to tablist if undefined, and tabClass defines the class of the tabbable content, which defaults to tabbable.

The script is built from the prototype $ and getElementsByClass functions as presented by Dustin Diaz.