Your SlideShare is downloading. ×
0
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Beginning Jquery In Drupal Theming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Beginning Jquery In Drupal Theming

50,990

Published on

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

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
50,990
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
662
Comments
3
Likes
24
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×