Tuesday, January 3, 2012

Using jQuery in Drupal 7

This is a practical example – how to use a jQuery code in Druapl 7.
We want to use jQuery script code written in hello.js for Druapl 7. We are using bartik theme.
Step 1. Go to your theme folder.
Step 2. Create a folder “js” if it does not exist. (You do not need this step, if you are going to add hello.js file in your main folder of the theme.)
Step 3.  Create  hello.js file under js folder: ex. (C:\xampplite\htdocs\drupal\themes\bartik\js\hello.js)
Syntax:
});

Note: We are using jQuery (see above in red color) insted of $ sign, in  the beginning of (document).ready as $ sign didn’t work for Druapl 7 in our case.

jQuery(document).ready(function($){
$(“p”).click(function(){
$(this).hide();
});
});



Save above code and clear all caches (admin/config/development/performance).

Step 4. Put the following single line code in (C:\xampplite\htdocs\drupal\themes\bartik\bartik.info) .info file (You can place this code after the stylesheets[ ] and before the regions[ ] code lines :
scripts[] = js/hello.js

No comments:

Post a Comment