IOTBS Manual

Step 1: Choose a mode and interface

The first step is simply to make two decisions:

  1. select the interface you want
  2. choose an implementation mode

The choices you make here affect every other step of the setup process, which is why we have to do this first. If it all seems a little confusing right now, the simplest configuration is an Original interface in "standard" mode (which was IOTBS v1.0); if you start with that, you'll always be able to change it later.


The script is available in a choice of three interfaces, each of which generates the switching controls as a different kind of HTML:

Generates forms and selectors
The Director's Cut
Generates definition-lists and links
The Radio Edit
Generates forms, legends and radios

None of them are intrinsically "better" than any other - it's up to you to decide which has the best semantics, behaviour or appearance for your situation. In our opinion, the form-based interfaces are the most semantically-correct, but The Director's Cut offers the richest styling possibilities.

Implementation modes

The script can then be used in one of three implementation modes, which control how the basic switching mechanism works:

Standard body-class switcher ("standard mode")
This is the classic IOTBS technique of using multiple class names on the <body> element, for CSS rules kept in a single stylesheet (or any other convenient arrangement).
Load stylesheets on-demand ("load mode")
With this configuration, the switching mechanism works off one <link> element per group, and loads new stylesheets into those, 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.
Load stylesheets and integrate with native switching ("integrate mode")
This configuration is an extension of load mode, and allows you to nominate one of your switching groups to integrate with native (browser-based) stylesheet switching. For that particular group the stylesheets no longer load on-demand, since they're all already included on the the page; they're implemented with traditional "alternate stylesheet" semantics, and switched by toggling their disabled properties.

Having decided which interface and mode you want to use, we can now start looking at practical details.

Add the XHTML containers

IOTBS Manual

This is the developer's manual for IOTBS v2.1:

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

IOTBS Main Page


Website gadgets

Bits of site functionality:

Usability widgets

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