Beginning Jquery In Drupal Theming

Slide 1: Using jQuery in Theming Rob Knight BADCamp 2007 1 1

Slide 2: Prerequisites ‣ Firefox ‣ Firebug Plugin (http://getfirebug.com) ‣ JQuerify Bookmarklet (http://tinyurl.com/2z74ol) ‣ Drupal 5 install to play with ‣ JQuery Update module (http://tinyurl.com/2bxw87) 2

Slide 3: jQuery Philosophy ‣ Progressive Enhancement ‣ Unobtrusive ‣ Lightweight 3

Slide 4: Additionally ‣ Tame the IE 6 demons ‣ Tame the IE 7 demons (fewer) ‣ Use CSS3 in browsers that lack support 4

Slide 5: jQuery & Drupal ‣ jQuery (v1.0) is baked-in as of Drupal 5 ‣ Upgrade to v1.2 with jquery_update ‣ drupal_add_js() to add it to your node(s) 5

Slide 6: Setting Up for Development ‣ jQuerify - change “src” for script – Your Drupal jquery url (/misc/jquery.js) – http://yoursite.com/jquery.js 6

Slide 7: Setting Up for Development ‣ Firebug – Console – Options > Larger Command Line – http://docs.jquery.com in a new tab for reference 7

Slide 8: Let’s Play 8

Slide 9: 1st Victim: nytimes.com 1. 2. Firebug Console 9

Slide 10: 1st Victim: nytimes.com $(‘p’).hide(‘slow’); Paragraphs vanish 10

Slide 11: 1st Victim: nytimes.com $(‘p’).show(‘slow’); Paragraphs return 11

Slide 12: Firebug Console Shows: - output of your commands - affected DOM elements - syntax errors 12

Slide 13: Add to Drupal ‣ Enclose the commands in “ready” function $(document).ready( function() { $(‘p’).hide(‘slow’); }); 13

Slide 14: Add to Drupal ‣ Save in a file in /yourtheme/scripts/file.js ‣ In template.php: drupal_add_js(path_to_theme().‘file.js’, ‘theme’, ‘header’); ‣ (Optional) Use logic to specify when to call otherwise it will be called on all pages. ‣ jQuery loaded automatically when you use drupal_add_js(). 14

Slide 15: Resources ‣ http://docs.jquery.com drupal_add_js API Reference ‣ ‣ http://learningjquery.com ‣ Hacking Digg.com with Firebug 15