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:
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:
- A small change to how Internet Explorer loads new style sheets in integrate mode, to avoid a potential crash bug
- 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:
- iotbs2.zip [120K]
The previous branch is at 1.3 and available for compatibility with earlier versions:
- iotbs1.zip [56K]
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:
- Choose a mode and interface
- Add the XHTML containers
- Include the scripts and style sheets
- Configure the JavaScript
- 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 inThe 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:
- 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.
-
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 thedisabled
properties. This means that changes made from the IOTBS switcher control are reflected in the browser'sPage Style
menu. And in Firefox and other mozilla browsers it works in both directions - so changes made from thePage Style
menu will update and save the settings in IOTBS! -
There's now a third choice of interface:
The Radio Edit
- which generates the switching controls as forms, legends and radios. - 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:
- 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.
-
In
The Director's Cut
the selected item now has theclass
name "selected", in addition to whatever "selected" text you've defined. This is so that you can give it different styling. - 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.