Tuesday, October 10th, 2006

Unobtrusive Markup with Prototype

Category: Prototype, Unobtrusive JS

Ryan Lowe has written up a piece on Unobtrusive Markup with Prototype.

His example pieces together Prototype and onDOMReady Extension from Vivabit to keep your markup clean by having extra markup added by the framework.

The example takes a rounded corner example such as:

  1. <div class="old_corners">
  2. <div class="cornert"><div></div></div>
  3. blah blah blah
  4. <div class="cornerb"><div></div></div>
  5. </div>

and cleans up the HTML to:

  1. <div class="corners">
  2. new blah blah
  3. </div>

Then, JavaScript adds on:


  1. Event.onDOMReady(function(){
  2. document.getElementsByClassName('corners').each(function(el,i){
  3. new Insertion.Top(el, '<div class="cornert"><div></div></div>');
  4. new Insertion.Bottom(el, '<div class="cornerb"><div></div></div>');
  5. });});

Posted by Dion Almaer at 8:27 am

3.1 rating from 25 votes


Comments feed TrackBack URI

Thats not a great example though – if you need Javascript enabled to insert the ‘corner divs’ then you might as well use Rico corners or Transcorners etc. I don’t do it like that as I want my rounded corners to display in browsers where Javascript is disabled as well.

But unobtrusive Javascript is obviously a good thing, where Javascript is needed at all – but its easy enough just to do it with prototype’s Event.observe(), and then you don’t need to download another js file to the browser as well

Comment by Matt Pryor — October 10, 2006

Matt, you are completely right… the example I used is not a very good example of rounded corners, but rather just an example of using JS to insert markup that is repeated over and over again… in that sense, that example is good. (I am definitely not saying that this is the solution to rounded corners with JavaScript… :-)

Comment by Ryan Lowe — October 10, 2006

Ya… But I like it, and think that it cleans up a lot of repetitive code… and as far as requiring javascript to show rounded corners, I think the chances are that if you are using prototype to complete ajax requests, you already assumed javascript is enabled to use the app.

Comment by Chad — October 10, 2006

Hey Matt,

With regards to not needing the onDomReady extension, yes, it’s not needed but it’s good to use.

Unlike the onLoad function, onDomReady executes immediately after the HTML (DOM) has been read by the browser – whereas onLoad waits until the entire page + external resources (primarily images) have been downloaded – creating a significant lag at times.

Comment by Ian — October 10, 2006

Chad – whenever I use prototype to add AJAX cababilities to anything, I always add the behaviour unobtrusively using, for example, the onsubmit of a form to send the data using prototype functions, and then returning false so that the form itself doesn’t submit (or similarly returning false with the onclick for a link). This way if javascript is disabled, the form will still submit in the normal way. My server-side script just has to be able to handle the difference between the AJAX request and the regular POST/GET request (or the javascript can just submit to a completely different URL as it is done behind the scenes).

Comment by Matt Pryor — October 11, 2006

Leave a comment

You must be logged in to post a comment.