test weblog

It really irks me when someone goes to the effort of creating a backwards-compatible whatever (menu, style thing, etc), yet bloats the HTML with javascript calls which will mean nothing to the non-javascript browsers.

For example, this month, ALA has an article on a JavaScript-based photo-gallery method, which is admittedly quite cool.

Now, at first glance, the idea is great – You simply create an unordered list of photo links, and dynamically load the image (overloading the ‘click’ method). Unfortunately, the method used introduces bloat that will slow down non-JavaScript browsers.

From the simple line <a href="images/bananas.jpg" title="A bunch of bananas on a table">some bananas</a>, we add code, creating <a onclick="return showPic(this)" href="images/bananas.jpg" title="A bunch of bananas on a table">some bananas</a>. Ideally, the use of JavaScript should introduce as minimal as possible a change to the page’s source.

How to solve it?

Simple – We know that the gallery images are all contained in a <ul>. So, in the external JavaScript which handles the gallery functions, we add an initialisation function which searches the document for <ul> elements that are given the class “gallery”. All links within that are then dynamically amended to include the event code onclick="return showPic(this)".

My philosophy with JavaScript is that it should affect the source code of the document as little as possible, leaving a very clean, easily readable source, free of clutter.

This entry was posted on Monday, February 9th, 2004 at 9:47 am and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.