Feed Sign in with OpenID OpenID

Simon Willison’s Weblog

More unobtrusive DHTML

I’ve talked about unobtrusive DHTML before, and here’s a superb example of it in practise from Chris Casciano. His zeitgeist is enhanced by some clever javascript which hides and reveals tables of data when certain page elements are clicked. View source, and you’ll see that the document contains only structural HTML, with no embedded javascript at all. The special behaviour is added by an external Javascript file which adds the necessary event handlers when it loads, based on the structure of the existing document. This approach maintains the usability of the information in a non-javascript supporting environment, while seriously enhancing the maintainaility of the page as new structural elements can be added to the HTML which will pick up the special behaviour without any further modification to the javascript needed.

Posted 2nd July 2003 at 6:56 pm

This is More unobtrusive DHTML by Simon Willison, posted on 2nd July 2003.

View blog reactions

Next: Norwegian Hixie

Previous: CSS Roundup

4 comments

  1. I can't read the detailed reports when javascript is turned off. So this kind of javascript is not entirely unobtrusive.

    Martijn - 2nd July 2003 23:31 - #

  2. Okay, is that actually legal JavaScript? I've just searched through the W3C DOM specs, and I don't for the life of me see the "onclick" attribute defined anywhere. Am I just missing it? It'd be nice if it were legal to be that easy, because I'm using DOM Events on my photo gallery for the same purpose. This works great in browsers that support DOM Events -- but that's only Mozilla, which means that IE users get to see the unenhanced version of the site (which still works perfectly fine, of course).

    Mike Kozlowski - 3rd July 2003 18:33 - #

  3. Thanks for the link and kind words Simon!

    The report itself is a work in progress, basically a front end for an old log parsing script I've carried around with me over the years. One of the things I've thought about doing, to answer your question Martijn, is to move a lot of the css definitions into the JavaScript to better separate the stages in which the page displays - for example not usni display:none in the style sheet but start with everything open and then collapse things and rearrange as needed as the JS inits.

    Problem there is (a) many users with JS enabled will see some very odd flashes of content going everywhere and more importantly (b) I just don't have the time to code and debug all that for this one page on my personal site.

    As to the standards aspect of it I'm sure you can use addEventListener (DOM2 Events???) if that'll make you happier, using onclick is just what I'm used to doing.

    Chris - 6th July 2003 04:22 - #

  4. Thank you for your answer Chris. It was a bit harsh of me to say (but nonetheless true). I really like the design and the javascript behaviour. Concerning you point (b): I think you'r right, why should you take so much effort in making the page completely degradable, when virtually 100% of your visitors will see it the correct way? It's often a complete waste of time (but you get a clear conscious in return).

    Martijn - 6th July 2003 08:48 - #

Comments are closed.

Previously hosted at http://simon.incutio.com/archive/2003/07/02/cascianoZeitgeist

A django site