Invasion of the Body Switchers

by James Edwards, Andy Clarke

88 Reader Comments

Back to the Article
  1. Updates to Invasion of the Body Switchers are now available and new developments will be posted at,

    http://www.stuffandnonsense.co.uk/resources/iotbs.html
    and
    http://www.brothercake.com/site/resources/scripts/iotbs/

    Copy & paste the code below to embed this comment.
  2. I’m a week or so late in saying this, but it’s good to see ALA is back in town, baby.

    Copy & paste the code below to embed this comment.
  3. @Mike Purvis – well it is kind of a niche thing at the moment, but there are lots of uses beyond straight design switching.  There are the print controls you mentioned; there could be buttons for changing screen fonts, or controlling the output and layout of a web mail interface; there could be projection media options that turn a website into a slideshow at various formats. These are the kind of things I ultimately had in mind, but whether any of them will become mainstream things, I don’t know …

    @Laura, Seth and Brian—I think there is mileage in that idea.  The first step would be restricting the include format to <link> elements, one for each media or switcher control, and named by the same naming convention, something like this:

    <link id=“link-screen-switcher” media=“screen” href=“screen-switcher-default.css” type=“text/css” />
    <link id=“link-print-switcher” media=“print” href=“print-switcher-default.css” type=“text/css” />

    Then the script can dynamically reload the stylesheet in each link as its changed – so the option “high-visibility” equates to a stylesheet called “screen-switcher-high-visibility.css”

    Now whether the BODY classname paradigm would still be required … I’m not sure, possibly not. Find out when I try it …

    The bottom line is – yes, multi-sheet loading capability is absolutely necessary, and will be forthcoming.  I’ll post a prototype on this thread before release, if that would helpful? So you can see if it meets your expectations.

    @Ned—I don’t understand what the big problem is with these empty divs.  You don’t have to have them.  They’re optional – not required.  All you need is an element into which to append the switcher control, but that can be anything – it can be an element that’s already there.

    Copy & paste the code below to embed this comment.
  4. It’s a shame you’ve abandoned the one thing that made the original switcher such a great piece of work – the standards upon which the switcher was built.

    The original switcher can be adapted to fix many of the problems you have highlighted such as using A tags, see http://jon.dowland.name/ for an example.

    Copy & paste the code below to embed this comment.
  5. > The original switcher can be adapted
    > to fix many of the problems you have
    > highlighted

    It can’t be adapted to support multi-media capability, because the semantics have no scope for it, and that’s why we had to abandon it. 

    If there is a way to acheive this without abandoning those semantics, I’m very happy to hear about it ..

    Nonetheless, the multi-sheet version that’s coming next will have the capability to use alternate stylesheet semantics for one chosen media type, if you wish.

    Copy & paste the code below to embed this comment.
  6. @James: What I’m trying to say is that addition of the script to a large project would be tedious UNLESS you were creating the containers on the fly.  At the moment, you backout if they dont exist.

    These could be created with a custom “insertion” script that says, “ok, regardless of the markup, I’m going to add these controls to the page in the “such n such” container” (and if the container doesnt exist, you make one on the fly).

    Do not depend on markup.

    Copy & paste the code below to embed this comment.
  7. @James: i guess im being pedantic :| appologies.

    I think what u’v done is great.

    Copy & paste the code below to embed this comment.
  8. gives me something to play with over the weekend :)

    Copy & paste the code below to embed this comment.
  9. @ Ned Collyer: Ned, the latest version of the script posted at the links above may resolve your issues.

    As we have implemented it at http://www.malarkey.co.uk, we have the switcher controls on only one ‘customise this site’ page. Then, we included just the script on the other pages (no switching controls) and voila.

    Copy & paste the code below to embed this comment.
  10. And it may well be me …. but it’s like this:

    When you create an element in the DOM you have to append it somewhere.  Where do you append it, if not to an element with a named ID?

    Copy & paste the code below to embed this comment.
  11. Thats the “custom insertion script” (per project) :)
    (Different locations for different markup = custom script for the project to determine location, or which div, where needs to be appended).

    Currently, the implementation is IN the source file. The implementation also depends on the markup.  Hence, the JS source depends on the markup.

    The implementation should be seperated from your source (different file), so that either can be modified in isolation.

    Copy & paste the code below to embed this comment.
  12. Nice article … but I still do prefer CSS-only (no-JS) solutions, since I can’t see any reason for not including alternate styles in the HTML markup.

    RE: Firefox…
    The @media=print style can be seen, if you change the choice in the drop down and then choose File Print Preview.

    Nice to have ALA back :-)

    Copy & paste the code below to embed this comment.
  13. @Ned – no, the implementation does not depend on the markup.  The JS has a single variable (an argument passed to the object) by which you specify where to put the switcher control.  If you want that value determined by the result of another process, that’s up to you, but the script itself is fine.

    @Fritz – because there’s no way to select those alternate styles for more than one media indendently.

    Copy & paste the code below to embed this comment.
  14. Sorry, because my last comment reads a little pissy.

    What I mean is that, although the script does have a dependence to the structure of the markup – it wants there to be an element with a named ID, or not, with no in between judgement – that’s as good as a generic script can ever be. 

    If you want to modify it for your needs to make structural judgements, that’s cool, but it’s way beyond the scope of the core script – it would take a ridiculous amount of code, almost a whole meta-language, just to describe how it makes these judgements, and it would still get it wrong most of the time.

    As I’m sure you appreciate, writing scripts for other people to use is completely different from writing something for your own site.  You can second-guess yourself, but I can’t second guess everybody.

    Ultimately, there has to be a point of distillation – a place where you tell the script what to do for a certain decision it can’t make itself. There’s no way around that … and this is (one reason) why elements can have ID attributes at all.

    Copy & paste the code below to embed this comment.
  15. The “new bodySwitcher” directives that create the controls don’t have to be in the same script – you can put them somewhere else if you want.

    Copy & paste the code below to embed this comment.
  16. great article. after the first style switcher article, i used the same approach to implement color palette switching for a number of my projects. with a single click, the sites’ entire color scheme can change from half-a-dozen options. many thanks, ala. you help us not-so-creative people become more creative.

    Copy & paste the code below to embed this comment.
  17. I’m with you, Ned, I am. But I feel like you’re blinded by something here, not sure what… ;) But considering your comments:

    “What happens if you have 4500 pages in an intranet, perhaps using 100 or so templates.
    What happens if I need to add another div?

    What happens if I want to update my script on 2 projects that both have 4500 pages, and a few hundered templates?”

    That sounds like a job solved by some smart template architecture, and a global include. :) Yes, that of course doesn’t account for the situation where you spend two years salvaging a monster, but nothing is going to be easy in that situation! You’re fixing what makes slick implementations like this bothersome.

    Besides, somebody made a point about how you’d determine where to create these in the absence of the <div>s… yes, you could do it programmatically, but then I think it goes beyond the scope of many ALA readers and developers in today’s world(myself included) which means it makes implementation more hunt-and-peck than plug-and-play. :)

    But believe me, I’m with you. I’m also learning to better realize how to make compromises for the greater good, and I think this is an example of that.

    Copy & paste the code below to embed this comment.
  18. Thanks for the clarification Malarkey… I haven’t tried using non-screen media types yet and so hadn’t experiend the limitations of the previous switcher.

    I look forward to a future revision which recaptures the LINK tags :)

    Copy & paste the code below to embed this comment.