IOTBS Manual

Step 4: Configure the JavaScript

The main configuration file is called iotbs2-key.js by default, but you can call it anything you want. Within this file we need to initialise the preferences manager, and then go on to building the individual switcher controls.

Initialising the preferences manager

The preferences manager reads and writes to cookies, and maintains some global properties and methods. You'll find it near the top of the script - a constructor function called switchManager, which takes two arguments:

//initialise the preferences manager ('canvas-element', 'path-for-load-mode')
var switcher = new switchManager('body', '');
canvas element

In most cases you can just leave this as it is.

But if your pages are in XHTML mode (served as application/xhtml+xml or equivalent) then the canvas element is <html> and not <body>. Therefore if you're using a standard body-class switcher then all your custom styles should descend from <html>, otherwise you won't be able to change the canvas background. In such a case, change this value from "body" to "html".

However, please note ...

The functionality to use <html> as the canvas works in all supported browsers using either mime-type, as do html.classname rules in CSS; however it does actually invalidate the DOM on the fly, since <html> is (strangely) not allowed to have a class name. It won't prevent your pages or style sheets from validating, nor does it cause any actual problems to any user-agent (as far as we know), but it's slightly unfortunate nonetheless.

path for load mode

If you leave this value as an empty string then the switcher will be in standard mode - working from its original principle, setting class names on <body> or <html>.

However if you set any other value, that will enable load mode. The value should be the path to a folder containing all the IOTBS stylesheets, named according to our previously-discussed naming convention.

Building the switcher controls

Finally we can make some switching controls! These are created with a constructor function called bodySwitcher, which takes four arguments:

//create a new switcher control ('container-id', 'label', 'is-native-switcher', '"selected" text')
var screenSwitcher = new bodySwitcher('screen-switcher', 'Screen styles', 'no', '');
container ID

Define the ID of the switcher's containing element. We made some containers earlier using the ID values "screen-switcher" and "print-switcher", so those are the values we'd use here.


Define the descriptive text that appears before this switching control; it will appear as a label, definition or legend (depending on the interface) that should simply describe the group.

is native switcher [integrate mode only]

If you're using integrate mode, set this value to "yes" to specify that this is the group you want to integrate with native stylesheet switching. Otherwise leave it as "no".

"selected" text [The Director's Cut interface only]

If you're using The Director's Cut you will need to define some meta text to describe the selected state, and " (selected)" would seem appropriate. Whatever you define will appear next to the currently-selected item in each list of options, for example "Normal contrast (selected)". You should always define some meta text, even if you're providing additional styling using the "selected" class name, because it aids comprehension.

Now that the group has initialised, use the defineClass method to specify each of the options you want, defining the class name it relates to, and some label text. (If you've nominated this group to integrate with native switching, you should use the same label text for each option as you used for the corresponding <link> element's title):

//add a new class option ('classname', 'label')
screenSwitcher.defineClass('default', 'Normal contrast');
screenSwitcher.defineClass('high', 'High contrast');
screenSwitcher.defineClass('highvisibility', 'High visibility');

A switcher can have any number of options (except none), and you can go on to make as many switchers as you want. The principle is infinitely extensible, with only two restrictions:

  1. each default option must have the class name "default";
  2. every other class name must be unique, even across different media.

Here's another example - a switcher for print, who's container we made earlier:

var printSwitcher = new bodySwitcher('print-switcher', 'Print styles', 'no', '');
printSwitcher.defineClass('default', 'Default');
printSwitcher.defineClass('small-sans', 'Small sans');
printSwitcher.defineClass('large-serif', 'Large serif');

Include the scripts and style sheets | Write the CSS

IOTBS Manual

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

  1. Choose a mode and interface
  2. Add the XHTML containers
  3. Include the scripts and style sheets
  4. Configure the JavaScript [this page]
  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