jQuery for Designers and Themers

Small non-intrusive animations and interactions can greatly enhance the user experience and impress website visitors and clients. jQuery and jQuery UI make it easy to add these enhancements with very little knowledge of javascript or programming. Learn how!

No understanding of jQuery, javascript, programming or even Drupal theming is required. It is expected that attendees have an understanding of CSS selectors and how HTML elements are nested within each other to build a "tree" (aka "DOM"). This should make some sense (perhaps not complete sense) to you:

  #page #content > p a.read_more {}


Some understanding of very basic programming concepts will be useful for the more advanced parts of the session, but is not expected. I.e.

  // Declare a function called "calculateCircleArea", which accepts a parameter "radius".
  function calculateCircleArea(radius) {
    // Declare a variable called "area".
    var area;
    // The area variable is now NULL.

    // Now assign a value to area.
    // area becomes 2 times pi times radius.
    area = 2 * 3.142 * radius;
    // The area variable is now 2πr ("two-pi-R").

    // Functions usually return something.
    return area;
  }


This session is based on the jQuery for Designers and Themers theme, which was created and upgraded for previous Drupal events where I gave this session or variations of it. Based on audience feedback from those sessions, I have refined the session content and adapted it.

• DrupalCon Paris, September 2009
• DrupalCon San Francisco, April 2010
• DrupalSouth Wellington, January 2010
• Chicago DrupalCamp, June 2010
• DrupalDownunder, January 2011

Links:

• Sample code is at Drupal.org/Project/jQ4DaT.
• Slides are at TinyURL.com/jQuery-Designers (Google Docs). They will be updated and refined for Chicago 2011.
• Audio from DrupalCon SF. Audio is high quality, but video contains slides only. Sorry I forgot to repeat the questions into the microphone.
• Video from DrupalCon Paris. It is a very poor quality recording.