Beginning Jquery In Drupal Theming

51,354 views
51,206 views

Published on

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

Published in: Technology, Design
3 Comments
24 Likes
Statistics
Notes
No Downloads
Views
Total views
51,354
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
664
Comments
3
Likes
24
Embeds 0
No embeds

No notes for slide

Beginning Jquery In Drupal Theming

  1. 1. Using jQuery in Theming Rob Knight BADCamp 2007 1 1
  2. 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. 3. jQuery Philosophy ‣ Progressive Enhancement ‣ Unobtrusive ‣ Lightweight 3
  4. 4. Additionally ‣ Tame the IE 6 demons ‣ Tame the IE 7 demons (fewer) ‣ Use CSS3 in browsers that lack support 4
  5. 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. 6. Setting Up for Development ‣ jQuerify - change “src” for script – Your Drupal jquery url (/misc/jquery.js) – http://yoursite.com/jquery.js 6
  7. 7. Setting Up for Development ‣ Firebug – Console – Options > Larger Command Line – http://docs.jquery.com in a new tab for reference 7
  8. 8. Let’s Play 8
  9. 9. 1st Victim: nytimes.com 1. 2. Firebug Console 9
  10. 10. 1st Victim: nytimes.com $(‘p’).hide(‘slow’); Paragraphs vanish 10
  11. 11. 1st Victim: nytimes.com $(‘p’).show(‘slow’); Paragraphs return 11
  12. 12. Firebug Console Shows: - output of your commands - affected DOM elements - syntax errors 12
  13. 13. Add to Drupal ‣ Enclose the commands in “ready” function $(document).ready( function() { $(‘p’).hide(‘slow’); }); 13
  14. 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. 15. Resources ‣ http://docs.jquery.com drupal_add_js API Reference ‣ ‣ http://learningjquery.com ‣ Hacking Digg.com with Firebug 15

×