Last updated 25 July 2008. Created on 13 October 2006.
Edited by Senpai, ax, sime. Log in to edit this page.

As a very simple introduction to using jQuery, this tutorial demonstrates how a jQuery effect can be added to a DOM element. The purpose is to help those with very little Javascript experience to understand the basic steps.

To start, your Drupal installation needs to have a functioning jQuery library. jQuery is included in Drupal 5.x. Alternatively, you can following these instructions to enable jQuery in 4.7.x (not recommended for production websites).

Once jQuery is loading into every page header, create a new node with the Input Format PHP Code and the following content.

<?php
 
drupal_add_js (
    '$(document).ready(function(){$("p.jtest").fadeIn(6000);}); ',
    'inline');
?>

<p class="jtest" style="background-color: palegreen; width: 30em;">

This is an example of an effect which is built into the core jQuery
library. This text should fade in after the DOM is loaded. <a
href="http://api.drupal.org/api/HEAD/function/drupal_add_js">
drupal_add_js()</a> was used to add the <a href="http://jquery.com/api/"> fadeIn</a> effect to any paragraph with the class <b>jtest</b>.

</p>

The actual code to attach the fadeIn effect is one line. The usage of all the jQuery functions are documented in these jQuery API docs.

Plug-ins can be added anywhere in your Drupal installation (eg. /sites/default/plugins/) and inserted into the web page using drupal_add_js(). The plugin will then be referenced in the head of the web page.

The plug-in authors usually provide examples to help you use their plug-ins. Be careful to note the licence of each plug-in you use (look in the .js file) as some may not be licenced under an open-source licence like GPL, and therefore you cannot use them in a production website without agreement from the author.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

mgifford’s picture

I was investigating fadeIns for a non-Drupal project and decided to try to migrate the example over to Drupal.

It's different enough that it's worth folks looking at if they are trying to get a grapple on jQuery & Drupal.
--
OpenConcept | SEO | Tech | Screencasts

mariagwyn’s picture

Thank you for the example above, it is very helpful. I also wanted to add the following (it took me a while to figure it out, so it might be helpful for others):

Adding a plugin:
1. Save your plugins in 'sites/all/plugins' (or your particular theme folder).
2. In your node body, add the following:
<?php drupal_add_js('sites/all/plugins/jquery.plugin.js'); ?>
This makes the plugin available to the node. I am not sure if you can call multiple plugins with one 'drupal_add_js,' I haven't managed to do so, but that means little.

Adding more than one function on the same page
Using the above example and an additional plugin, you would do this:

drupal_add_js (
    '$(document).ready(function(){ //this is where the first function starts
$("p.jtest").fadeIn(6000);}); //this is the first function
$("a").addClass("test"); //this is the second function
}); ',
    'inline');

Hope this helps,
Maria

markchitty’s picture

If your going to include a jQuery plugin file, make the call from within template.php, I tried it within the of page.tpl.php file (using Drupal 5.0) and it didn't work.

Add the code into template.php like this:

drupal_add_js('sites/all/plugins/jquery.plugin.js');

kbharath’s picture

Hello,
i read ur article it is very very nice and simple,can u helpme please in executing jquery slideshow in drupal page.

i embeded the jquery plugin but it is displaying in header section i,e not in proper way(sliding logo and header images which are not in slideshow images)

procedure i embeded:
1)i took a new folder and named as"js" it is placed in "drupal/sites/default/js"
2)i kept 3 files in this folder....
a)jquery-1.4.2.min.js
b)jquery.panelgallery-1_2.js
c)slideshow.html ........ in this files i refferd the (a,b).js files by using script src tag
3)in drupal i created the node and called the html file using php in-put format as
include('drupal/sites/default/js/slideshow.html');

please see the procedure i fallowed and tell me the correct step by step procedure to display the jquery slide show in druapl content region.

Thank you in advance all

from:
Bharath

premanup’s picture

I think this line

<p class="jtest" style="background-color: palegreen; width: 30em;">

should looks like this:

<p class="jtest" style="background-color: palegreen; width: 30em;display:none;">

otherwise function fadeIn() doesn't work.

lazyvlad’s picture

yeah thats true, that line was missed there, at first when i tried the example i thought my jquery wasn't included properly, but then i read your comment, thank you for opening my eyes :D

gozigzag’s picture

This should get updated with the added display:none; so that it works properly. And for Drupal 6, the Drupal.behaviors can be used in place of $(document).ready.

headstartcms’s picture

I test the code but it did not work out . What does the syntax meaning of this '$(document) ?
I am using drupal7.


drupal_add_js (
    '$(document).ready(function(){$("p.jtest").fadeIn(6000);}); ',
    'inline');