Invasion of the Body Switchers

Look Who's Switching Too (Version 2.1 - 16th January 2006)

Invasion of the Body Switchers (IOTBS) is an efficient object-oriented style sheet switcher, which offers independent switching of multiple media types, and supports an unlimited number of options and controls. It works in all modern graphical browsers except Mac/IE5 (with javascript enabled), and is available in a range of modes and interfaces:

Illustration for this script: 1956 movie poster for “Invasion of the Body Snatchers”
Interface Description Modes
Standard Load Integrate
Original Forms and selectors Demo Demo Demo
The Director's Cut Definition-lists and links Demo Demo Demo
The Radio Edit Forms, legends and radios Demo Demo Demo

If scripting (or this script) is not supported, the switching controls do not appear.

Invasion of the Body Switchers is co-produced with Andy Clarke, and was originally published on A List Apart. The subsequent discussion inspired a number of variations and adaptations, which are available both here, and at Andy's IOTBS resources.

Latest update

Version 2.1 is a minor update, to cure a few glitches that have been reported recently, notably:

  1. A small change to how Internet Explorer loads new style sheets in integrate mode, to avoid a potential crash bug
  2. A change to the recommended source-order of the script includes (so that the core functions come after the interface script). This is to change the parsing-order of the code so as to prevent an occassional load-related script error in Opera

If you're currently using Version 2.0 you can upgrade simply by downloading the new zipfile, then replacing all the component .js files with the new ones, except your iotbs2-key.js configuration file - that file doesn't need to change. After upgrading, please see Step 3 of the setup instructions for details on how the script includes should now be ordered.

Get the script

The latest version is 2.1 and recommended for most users:

The previous branch is at 1.3 and available for compatibility with earlier versions:

The main scripts are all compressed (stripped of comments and uneccesary whitespace) so that they load and process faster. But the zipfile also includes fully spaced and commented versions, kept in a sub-directory called "source" (which you don't need to upload to your website).

IOTBS Manual

This is the developer's manual for Invasion of the Body Switchers Version 2.1, written by Andy Clarke and James Edwards.

The setup process is broken down into five steps:

  1. Choose a mode and interface
  2. Add the XHTML containers
  3. Include the scripts and style sheets
  4. Configure the JavaScript
  5. Write the CSS

You can also download the manual in PDF format [170K]

Credits

A big thank you to everyone who's offered feedback, suggested new features, or told us about bugs and other issues. Particularly the following people:

Mark Wubben
For reporting the original DOM memory leak in Win/IE.
Joshua Kaufman
Who's idea it was to offer a choice of interfaces.
Lise Griffith
Who was the first (among many) to suggest adding a "selected" class name to the selected item in The Director's Cut, so that it can have different styling.
Ned Collyer
Who first suggested adding the ability to load individual stylesheets on-demand, and who's comments in the original discussion insipired the idea for separating the scripting into different files, so configuration data is apart from other functions (turns out I misunderstood - and this is what he meant all along ;))
Mark 'Tarquin' Wilton-Jones
Who's article Manipulating CSS using the W3C DOM was tremendously helpful in the development of native stylesheet switching integration.
Bruno Torres
Who's email feedback kick-started the development of the technique that allows user-styles to take effect before window.onload

Version history

[2.0 / 1.3] 18th April 2005

We've been much-moved by the number of people requesting new features in IOTBS, and we've tried to incorporate as many we can. Version 2.0 is a major re-working to that end, resulting in a far more sophisticated tool, with better accessibility, and a greater range of possible uses.

The major new features are:

  1. The script now has the ability to load stylesheets on-demand - so you can have the rules for each option in a stylesheet of its own, which the script only loads as required. This allows for situations where each option uses a large number of rules - more than you would want to load all at once.
  2. You can now nominate one of your switcher controls to integrate with native stylesheet switching - the chosen control will then work off multiple <link> elements, using traditional "alternate stylesheet" semantics, and toggling the disabled properties. This means that changes made from the IOTBS switcher control are reflected in the browser's Page Style menu. And in Firefox and other mozilla browsers it works in both directions - so changes made from the Page Style menu will update and save the settings in IOTBS!
  3. There's now a third choice of interface: The Radio Edit - which generates the switching controls as forms, legends and radios.
  4. To improve the overall efficiency and portability of the code, the scripting has been split into multiple files, so for any given installation you would now use three scripts (configuration, core functions, and interface-specific functions).

There are also some other, smaller improvements:

  1. The script now initialises before window.onload, thanks to a cunning new technique I've developed for running DOM scripting independently of that event. This means that the script can start while images and other dependencies are still loading, which significantly reduces the time for user-styles to take effect.
  2. In The Director's Cut the selected item now has the class name "selected", in addition to whatever "selected" text you've defined. This is so that you can give it different styling.
  3. Many adjustments and tweaks for the sake of leaner, lighter code and faster execution.

The cookie data format in IOTBS Version 2 is not compatible with Version 1 - because the new version requires data that the old version didn't need, and hence didn't store. This is unfortunate, but unavoidable.

If you're using this script for the first time that isn't going to affect you.

But if you're already using IOTBS and you don't need any of the major new features, you may prefer to continue using the Version 1 branch, for the sake of your visitors not losing their existing settings. The "selected" class name and other smaller improvements have been included in that branch as well, which is now at Version 1.3

[1.2] 20th December 2004

Version 1.2 introduces "The Director's Cut" - a separate version of the script, which generates the switching controls as definition-lists and links, instead of forms and selectors. There's also a new option (in both versions) that lets you specify the canvas element, so you can base your rules on <html> instead of <body>, which may be necessary on pages served as application/xhtml+xml or equivalent.

And starting with this release, the download package includes both commented and uncommented scripts, so you can save bandwidth on a public site by using an uncommented version.

[1.1] 27th November 2004

Version 1.1 fixes a couple of issues with the original:

  • Added a cleanup routine to compensate for a DOM memory leak in Win/IE.
  • Added support for using the script on pages without the switching controls.

[1.0] 19th November 2004

Version 1.0 published.

Get the script

The latest version is 2.1 and recommended for most users:

The previous branch is at 1.3 and available for compatibility with earlier versions:

BSD License → Terms of use

IOTBS Manual

Categories...

Website gadgets

Bits of site functionality:

Usability widgets

For enhancing usability:

Local network apps

Web-applications for your home or office network:

Game and novelties

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.


In this area

Main areas


[brothercake] a round peg in a square hole, that still fits