MochiKit, DOM and Navigation Bars
November 24, 2005
In web design it is customary to include a navigation bar somewhere on your pages. Links on this navigation part point to other points on the site. This site, for example, provides Home, About Us, Products, Bugs, Wiki, and Blog.
It is nice to somehow highlight what section the user is currently on. You’ll see there is no “Blog” link in the title bar, it is a static (unclickable) text instead. This is how I show location - your visiting the Blog section of my site, so it’s different from the other links provided in the navbar
My first Content Management System was the static site generation of Userland Frontier, which did navbar generation extordinarily well (or so I thought at the time.) When I started designing wilcoxd.com I thought back and realized I wanted some sort of automated system to take care of navbar generation.
The Wilcox Development Solutions site was created by hand, just my friend BBEdit and a good CSS book. BBEdit has this feature where it can run included scripts, so I wrote a Python script to generate my navbar, given an XML file input
While this 200 line Python script works, it’s kind of annoying. First, it requires some special Python modules. Secondly, you need(ed?) to specify the full path to the script (assuming it lived outside the site’s tools folder, which this script did). This second requirement meant that every person who touched my site would need to change all of the paths to match their machine configuration. A find and replace all operation, but still annoying
The other day I got wondering if I could duplicate my statically-rendered-via-Python navigation bar with some clever Javascript… Read on for The Rest of the Story…
The Solution: MochiKit
MochiKit is a great Javascript framework that lets you code powerful AJAX features into your web pages with very minimal effort.
For example, MochiKit lets you swap elements of a page’s Document Object Model on the fly. It also has iterative capabilities (“apply this operation to every ‘changme’ class div element”) and some other cool functional programming features
I’ve been playing with MochiKit for a few weeks now, in my spare time. Made some neat prototypes with it, just poking around and learning. Still, given my somewhat limited time to get up to speed with the framework I was able to create a 20 line Javascript that properly takes care of my navbar. No 200 line Python program, no set up on developer machines… just bam.
The Setup
Each of my pages for the site has navigation links defined. Each navigation link is of the class “navigatorLink”, and each has a unique id assigned to it. The body statement of each page has an onLoad=“onLoad()” statement. As a parameter to onLoad(), the page passes the id of the link corresponding to that page.
From my HTML file: <div id="header"> <DIV ID="headerlinks"> <A HREF="index.html" class="navigatorLink" id="topindex">Home</A> <A HREF="secondpage.html" CLASS="navigatorLink" id="secondpage">Second Page</a> </DIV> </DIV>
If we were on the Home page, our body tag would look like: <BODY onload="onLoad('topindex')">
The Code
Now, let’s see the code: function navConvert(currElem) { var ihtml = currElem.innerHTML; var newElem = SPAN({'class': 'navigatorLinkCurrent'}); newElem.innerHTML = ihtml; swapDOM(currElem,newElem ); }
function onLoad(idname) { var currElem = getElement(idname); navConvert(currElem); }
As mentioned previously, onLoad() gets called with the id of the link to change. We use MochiKit’s getElement() to retrieve the element with the ID we requested.
navConvert() grabs the innerHTML of our element (which is the part between the start and end tag of a HTML statement. InnerHTML of a link would be the link name that the user sees, for example.) We save this off for later, and create a new SPAN element. We set the innerHTML of our new span to the value from the previous one - creating a span with the same user visibile text as our link.
Next we use MochiKit’s swapDOM function to replace our link with our newly created span.
Conclusion
Use of swapDOM allows us to replace our self-referential link with a span - indicating that the page we are viewing is the page linked to in the nav bar. All very fast, with only a little bit of Javascript and no set up on your hosting or dev machine (other than putting MochiKit somewhere).