Code

White as Milk for CS 2.1

Yet another adaptation of a minimalist WordPress theme, “White as Milk” by Azeem Azeez.

I did the variant with the dark background by request. Not quite happy with it, but I think its usable.

White As Milk for CS2.1 v1.1

Please comment if you are planning to use it, together with the URL of your blog, as Azeem requested to see it in action.

The CSS, XHTML and design is released under GPL.

Barthelme for CS 2.1

After working on it on and off for a while it is finally (I think) ready for release.

There probably will be issues as its only been tested on my own blog. The CSS definitely has some extraneous stuff which I will be working to be rid of for the next release. I would appreciate feedback or, even better, fixes.

Originally created by Scott Allan Wallick for WordPress.

Released under the GNU GPL.

Barthelme for CS2.1

Filtery Redux

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.

Tabbable 0.1

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.

Scroll to top