Shiver Me Timbers! jQuery Off the Starboard Bow!

Before you get confused, no, jQuery doesn’t have anything to do with pirates (at least, not that I’m aware of). In honor of International Talk Like a Pirate Day, I’ll be interspersing this post with random, distracting, inappropriate pirate jargon. Don’t blame me; blame the guys who started the meme. ;)

I’ve never been a big fan of JavaScript. Like many developers, I use it when absolutely necessary (AJAX, form validation, DOM scripting, etc.) and avoid it in favor of server-side scripting solutions the rest of the time. This saves me the hassle of writing JavaScript that is cross-browser compatible, a feat which is often more troublesome than getting CSS to behave in Internet Explorer.

That was before I got a hold of jQuery. In case you’ve never heard of it, jQuery is an open source JavaScript library that simplifies most DOM scripting tasks. I won’t go into detail on its virtues here; if you’re curious about the specifics, I encourage you to check out the jQuery website. Instead, I’ll show you just how I used it to spruce up the starboard side of the site by walking through the contents of my scripts.js file.

// Custom jQuery interaction layer for WardOnTheWeb.com by Stephen Ward
$(document).ready(function(){

...

});

Most languages have boilerplate code, and jQuery is no different. This is just the part that says, “Weigh anchor when the page is loaded and ready to manipulate.”

// Toggle search prompt
$search_box = $('#s');
$search_box.focus(function(){
	if ($search_box.val() == 'search this site...')
		$search_box.val('');
});
$search_box.blur(function(){
	if ($search_box.val() == '')
	  	$search_box.val('search this site...');
});

Here, we see a few lines of code that toggle the “search this site…” prompt in the search box. I hate having to delete default text like this, so I made it so nobody has to. This used to be accomplished with much less in-line JavaScript, so, at first, it might seem like a bad example of jQuery’s seaworthiness. However, when you consider that the interaction logic is now completely removed from the semantic HTML without complicated selector and event binding functions, it’s pretty obvious how useful jQuery can be. It’s the holy trinity, the separation of content (HTML), presentation (CSS), and interaction (JS) with minimal effort.

// Set default menu states
expanded = $('li.expanded > h2');
expanded.css('cursor', 'pointer');
jQuery.each(expanded, function(){
	$(this).text('- ' + $(this).text());
});
collapsed = $('li.collapsed > h2');
collapsed.css('cursor', 'pointer').next('ul').css('display', 'none');
jQuery.each(collapsed, function(){
	$(this).text('+ ' + $(this).text());
});

// Switch menu states when the menu headers are clicked
$('li.toggleable > h2').click(function(){
	menu_header = $(this);
	menu_header.next('ul').slideToggle('normal');
	if (menu_header.text().substring(0, 2) == '+ ')
		menu_header.text('- ' + menu_header.text().substring(2));
	else if (menu_header.text().substring(0, 2) == '- ')
		menu_header.text('+ ' + menu_header.text().substring(2));
});

Did I need collapsible menus for Ward on the Web? No, but I thought it would be a fun exercise to make them anyway. Here, you see the code that does it. Again, notice how easily jQuery lets me select HTML elements for manipulation. All I had to do was assign the “toggleable” class to designate a collapsible menu, along with either the “expanded” or “collapsed” class to designate its default state; a few simple jQuery selectors did the rest. This is especially handy in case I decide to add more menus later.

The visual effect is, of course, stunning. Collapsible menus come in many varieties; I programmed a very simple, in-line script for Simon over at Bloggasm that toggles the display state without animation. However, jQuery’s “slideToggle” function blows it out of the water with smooth, organic transitions. Note that most of the above code toggles the plus and minus signs in front of the menu headers; I could have accomplished the collapsing menu effect with two lines of jQuery code.

Perhaps the most important part of all is what the menu looks like without the jQuery interaction layer. All of the CSS and content changes that have to do with collapsing the menus are isolated in the JavaScript. When it’s turned off, they revert to normal, non-collapsible menus. In other words, it degrades perfectly.

Overall, I’d say jQuery is a great tool that makes writing cross-brower-compliant JavaScript much simpler. Beyond that, its main benefit lies in simplifying the separation of interaction from content. No more in-line scripting; now your program logic can be just as extensible and maintainable as your CSS. Granted, I’ve still got a lot to learn about it; the above code could probably be accomplished in fewer lines by a more experienced scallywag. Still, it’s been a pleasure to discover jQuery for the first time. I only wish I had found it sooner.

Actions

Comments

One Response to “Shiver Me Timbers! jQuery Off the Starboard Bow!”

  1. Bridging the Digital Divide to Combat Poverty : Ward on the Web on October 15th, 2008 6:37 am

    [...] an important topic. This year it’s poverty. Since I’m not one to miss out on a good meme, here is my niche-appropriate take on the [...]

Share Your Thoughts