Getting setup to use JQuery in your Drupal theme followed by a brief example.

1. Using jQuery in Theming
Rob Knight
BADCamp 2007
1
1

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

3. jQuery Philosophy
‣ Progressive Enhancement
‣ Unobtrusive
‣ Lightweight
3

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

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

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

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

8. Let’s Play
8

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

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

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

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

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

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

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