At long last, Pathfinder’s new website launched on Friday. To see the results of all my fiddling with Radiant CMS, point your browser at www.pathfindersoftware.com.
There’s actually no Ajax and very little DOM scripting involved in our first iteration. Just a little jQuery to progressively enhance some links. Our strategy in redeveloping the website quickly and iteratively was to use simple tools for simple problems. jQuery fits the bill perfectly. Eventually we hope to show off our Ajax chops on the Showcase section of the site. In the meantime, we got a new site up and running in two months with part-time commitments from a team of five – and that includes our client, the CEO. Result!
An in-depth look at our use of jQuery and why we dig it after the jump.
The first iteration of pathf.com 2.0 includes exactly two JavaScript functions:
- I wrote one function to handle links to partner sites, these blogs and other offsite destinations. Any link to an outside domain gets a target attribute of “_blank” and a class attribute of “offsite.” Then I use the following function, run as a document.ready handler, to micromanage those newly spawned windows with JavaScript-capable browsers:
/*manage the windows spawned by offsite links*/$('a.offsite').each(function() { var link = $(this); var width = ( link.hasClass('blogLink') || link.hasClass('moreBlog') ) ? 1050 : 750; var url = link.attr('href'); $(link).click(function() { var win = window.open(url, '_blank', 'width=' + width + ',height=550,menubar,resizable,status,location,toolbar,scrollbars'); if (win && win.focus) { win.focus(); return false; } else { win = null return true; } });}); - I wrote another function to increase the clickable area of some prominent links. I’ve got an unordered list in which each list item contains a link. Instead of making just the link text itself respond to click and hover events, I wanted to make the entire list item respond. I’ve kvetched enough on this blog about sites that make you target tiny DOM elements with your mouse that I can’t really get away with such behavior myself. At any rate, here’s the code:
//collect some list items and cycle through them$('ul.icons li').each(function() { //apply the url from the link inside the li to the entire li $(this).click(function() { document.location.href = $(this).contents('a').eq(0).attr("href") ; }) .hover( //restyle the entire li on mouseover function() { $(this).attr('class','hover'); }, //go back to normal on mouseout function() { $(this).removeAttr('class'); } );});
Both of these functions highlight the strengths and occasional weaknesses of jQuery. Most of the syntax is consistent and human-readable. Once you’ve given any given API call a test drive, chances are you can remember its syntax in the future – or at least guess at it and frequently be right. But as with many JavaScript frameworks, you have to keep re-wrapping DOM nodes in the container objects that give them enhanced functionality. If you look at the link-expanding function above, I’m wrapping the same li element in the jQuery object five separate times: Once when I collect the entire set of li elements, once when I apply the click event handler to an individual li, once when I need to grab one of the child nodes of that li element inside its click handler, and twice when I need to do the same in the mouseover and mouseout events created by the hover method. The poor $ method must be exhausted.
Then again, for every clunky bit, there’s some unexpected elegance. Take the each method. Within the scope of its callback function, the this keyword always refers to the current item in the collection. Unless you need to reference the index of that item, you don’t need to assign any arguments to the callback. If you do need to access the index, it will be the callback’s first named parameter. Compare this to Prototype’s Enumerable class, in which the first callback parameter is always required so you can reference the item itself and you need two parameters if you want to reference the index:
Enumerable.each(callback(item){ //simple form - 1 argument});Enumerable.each(callback(item,index){ //complex form - 2 arguments});jQuery.each(callback() { //simple form - 0 arguments - use 'this' to refer to the item});jQuery.each(callback(index) { //complex form - 1 argument});
None of these observations make the case for or against using jQuery insted of any other framework. But I’ve found that for simple, progressive-enhancement type of stuff, nothing beats it. That’s why I’ve used it in all four installments I’ve turned in so far of my Ajax Overhaul series at IBM developerWorks, and that’s why we’re using it on pathf.com.
