Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beginning Jquery In Drupal Theming

51,782 views

Published on

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

Published in: Technology, Design

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

×