I’d like to discuss a bit of my experience tinkering with re-skinning portions of our Content Management System, i3SiteTools,using Flex 2. The tools that make up the ‘CMS’ (sometimes referred to as the ‘SMS’ for Site Management System) have been built and tweeked over the past 10 years by several developers. A lot of thought and energy went in to making the display forms be able to do tricks like searching and column sorting. Generally, this was accomplished by harnessing the power of the backend with SQL and self-posting pages. A lot of conditional logic was incorporated into the ColdFusion pages to build and manage the display.

As my experience with JavaScript, the Document Object Model, and CSS has widened over the past year, my complete and utter dislike of the cryptic JavaScript code had been replaced with awe of what can be accomplished with just a little bit of knowledge. However, with JS as a new found friend and the excitement of what can be accomplished, it is easy to forget about all those users who disable JavaScript. True, they may be the minority (only 10% in Jan 06 according to W3C) but they're still out there. In order to ensure these users are not left in the dust, it is important to make sure your site works both with and without the use of JavaScript whenever possible. Enter “unobtrusive JavaScript”.

Unobtrusive Javascript is the separation of your JS and your markup. You can accomplish physical separation of your code simply by using either the <script> tags or putting your JS in an external file. But unobtrusive JavaScript does not stop here. Aside from the physical separation of script and markup, there also needs to be a functional separation. This means that your site should still function as expected if a user has disabled JavaScript. True, it may not have all the bells and whistles that you can provide using scripting, but nonetheless, it should work.

I recently utilized the power of JavaScript to enhance our users’ experience on Morgan Howard’s location page. This page displays a flash map highlighting each location. Below the map is a list of hyperlinked locations with the first location’s detail displayed in a container off to the right. Upon the selection of a new location, by either clicking the location name within the flash map or the list below, the selected location's information replaces the current detail display.

Using JavaScript I was able to enhance the user’s experience by making all this happen sans page refresh. Basically, I listed each location’s information in a hidden div (display:none) and upon clicking a location name, a JavaScript function is called which hides the currently displayed detail div and shows the div we want to display (display:block). After setting this up, I sat back and admired my beautiful refresh-less interface. However, I couldn’t bask in self-praise for too long. I still had some work to do.

Disabling JavaScript had a crippling effect on the page. Our flash map only displays if Javascript is turned on and the hyperlinked location list was simply calling my JS function. With JavaScript turned off, the location link did absolutely nothing. Nil, nada, squat. The location information is now completely inaccessible. In order to fix the problem, I needed to offer an alternative action aside from the JS function call. I did this by setting up my location link as follows:

By adding “return false; after my function call, JS prevents the actual href from being used. However, if JavaScript is turned off, return false means nothing and the href tag functions normally. Then I added some Coldfusion code to check for the existence of my querystring variable “officelocationid” and to show the appropriate location information. True, this requires a page refresh but a page refresh is much preferred to not having the page work at all. Now all our users will be able to access the information they need.