Sample Code For JQuery For Designers And Themers, DrupalCon Paris 2009

Drupal Conference ParisI was extremely pleased with my DrupalCon Paris session on jQuery for Designers and Themers. It was a great success – my best session yet.

You can see the slides at and download the sample theme code from

I made a couple of references to blog posts and work I've done with jQuery during the session:

I forgot to demonstrate jQuery UI effects. You can see demos of these on and I added an implementation of the explode and bounce effects to the sample theme when you roll over the "Hey nice username!" message and click on it.

A related topic is Drupal's javascript theme layer. I added an example of this in the sample code; Defining a theme function, overriding it, and calling it to get some content themed into HTML. The javascript theme layer is based on the same principles of overriding as Drupal's PHP theme layer, so it should be easy to understand if you've ever overridden a theme function in template.php.

I didn't have time to properly explain the subtle differences between Drupal.behaviors functions with the context parameter and simply executing anonymous javascript functions on page-ready. I included examples of both in the sample code with inline comments might help to understand the difference.

Thanks to everyone who attended for your enthusiasm and excellent questions which guided the session and made it more conversational than presentational. I look forward to another opportunity to present this session at the next Drupal event. Maybe DrupalSouth Wellington January 2010?