HOWTO: Add a jQuery effect
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.
Related Example
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
Thank you for the example
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
User template.php for drupal_add_js calls
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');I think this line should
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.
true
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