• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Beginning Jquery In Drupal Theming
 

Beginning Jquery In Drupal Theming

on

  • 58,601 views

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.

Statistics

Views

Total Views
58,601
Views on SlideShare
57,459
Embed Views
1,142

Actions

Likes
23
Downloads
660
Comments
3

23 Embeds 1,142

http://www.slideshare.net 421
http://acn.akarismatik.lan 376
http://raselkabir.wordpress.com 216
http://hands4t.blogspot.com 44
http://acn.houssem.blibech.interne.akarismatik.lan 27
http://acn.naim.belkaid.interne.akarismatik.lan 11
http://playdrupal.com 11
http://drupalranch.com 9
http://vle.worldbank.org 9
https://duckduckgo.com 3
http://www.drupalranch.com 2
http://webcache.googleusercontent.com 2
http://localhost 1
http://tibi 1
http://radiusgreen.com 1
http://www.dvd-photo.slideshow.com 1
http://192.168.10.100 1
http://www.playdrupal.com 1
http://www.koehl-media.de 1
http://localhost:8888 1
http://connect2.prud.us 1
http://www.angrydonuts.com 1
http://bler.webschuur.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • how can i di it.,Future article prospect... Convert MTS files
    Are you sure you want to
    Your message goes here
    Processing…
  • Yes, audio is here: http://blip.tv/file/get/Kentbye_tech-SFDrupalCampUsingJQueryInTheming811.mp3
    Are you sure you want to
    Your message goes here
    Processing…
  • Is there any audio for this anywhere?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Beginning Jquery In Drupal Theming Beginning Jquery In Drupal Theming Presentation Transcript

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