Last updated January 27, 2014. Created by ultimateboy on August 28, 2007.
Edited by Pere Orga, Mark Conroy, chrisfree, blogook. Log in to edit this page.

Using JavaScript adds dynamic presentation effects to a theme. In addition to custom JavaScript files many Drupal developers find jQuery useful. jQuery is a lightweight JavaScript library which is built into Drupal. jQuery contains all the common DOM, event, effects, and Ajax functions.

Drupal 7 includes jQuery 1.4.4 and jQuery UI 1.8.7. Drupal 6.0 to 6.2 included jQuery 1.2.3 while Drupal 6.3 includes an update to jQuery 1.2.6. For use in module development which requires a later version of jQuery, apply the jQuery update module. When JavaScript is added to a page through Drupal, jQuery is automatically added to the page.

More comprehensive information on the JavaScript APIs and the use of JavaScript in Drupal can be found in the Developer Guide.

For more information about jQuery visit the jQuery API and Documentation site.

Drupalize.Me offers a free, 11-minute video introduction to using jQuery in Drupal 6&7...
Intro to jQuery in Drupal

Adding JavaScript

There are two ways for Themes to easily add JavaScript to a page.

In .info File

JavaScript files can be added to a theme's .info file using the scripts tag. For example, to add the script foo.js to every page on a Drupal site add the following to the theme's .info file.

scripts[] = foo.js

Clear the theme cache for this change to take effect

Scripts added in a theme's .info file are added at the theme level of ordering and will come after core/library JavaScript and module JavaScript. This ordering is important because it allows the theme JavaScript an opportunity to act on the page after the JavaScript providing the functionality within the page.

In Drupal 6 there is a default script file, named script.js that can be added to a theme without specifying it in the .info file. If that script is included in the theme it will be automatically added to all pages. In Drupal 7 all script files need to be specified.

In template.php

Alternately, scripts can be added in the template.php file using drupal_add_js() or, in Drupal 7, drupal_add_library(). For example, adding a script in the root directory of a theme named foo.js would go like:

In Drupal 6:

<?php
function example_preprocess_page(&$variables) {
 
drupal_add_js(drupal_get_path('theme', 'example'). '/foo.js', 'theme');
 
// We need to rebuild the scripts variable with the new script included.
 
$variables['scripts'] = drupal_get_js();
}
?>

In Drupal 7:

<?php
function example_preprocess_html(&$variables) {
 
$options = array(
   
'group' => JS_THEME,
  );
 
drupal_add_js(drupal_get_path('theme', 'example'). '/foo.js', $options);
}
?>

Note, in Drupal 7 the $scripts variable does not need to be rebuilt. $scripts is built in template_process_html which happens after this function.

Drupal 7 includes library management. Libraries are collections of JavaScript, CSS, and dependent libraries. For example, Drupal 7 includes jQuery UI. jQuery UI is a component library with internal dependencies. When ui.autocomplete is included it needs ui.core and ui.position to be included as well. Drupal libraries takes care of this for us. Adding ui.autocomplete with all of it's CSS, JS, and dependencies can be accomplished with the following code:

<?php
drupal_add_library
('system', 'ui.autocomplete');
?>

This one command includes jquery.ui.autocomplete.js, jquery.ui.autocomplete.css, and the dependencies of jquery.ui.position.js, jquery.ui.widget.js, jquery.ui.core.js, jquery.ui.core.css, and jquery.ui.theme.css. For more information on drupal_add_library see the API documentation.

JavaScript closures

It's best practice to wrap your code in a closure. A closure is nothing more than a function that helps limit the scope of variables so you don't accidentally overwrite global variables.

// Define a new function.
(function () {
  // Variables defined in here will not affect the global scope.
  var window = "Whoops, at least I only broke my code.";
  console.log(window);
// The extra set of parenthesis here says run the function we just defined.
}());
// Our wacky code inside the closure doesn't affect everyone else.
console.log(window);

A closure can have one other benefit, if we pass jQuery in as a parameter we can map it to the $ shortcut allowing us to use use $() without worrying if jQuery.noConflict() has been called.

// We define a function that takes one parameter named $.
(function ($) {
  // Use jQuery with the shortcut:
  console.log($.browser);
// Here we immediately call the function with jQuery as the parameter.
}(jQuery));

Note that there are two acceptable syntaxes for closures: the parenthesis that closes the first parenthesis can come either before or after the (jQuery).

The .ready() function also has the ability to alias the jQuery object:

jQuery(document).ready(function($) {
  // Code that uses jQuery's $ can follow here.
});

In Drupal 7 jQuery.noConflict() is called to make it easier to use other JS libraries, so you'll either have to type out jQuery() or have the closure rename it for you. More examples can be found on jQuery's api site.

JavaScript behaviors / JavaScript on AJAX forms

Drupal uses a "behaviors" system to provide a single mechanism for attaching JavaScript functionality to elements on a page. The benefit of having a single place for the behaviors is that they can be applied consistently when the page is first loaded and then when new content is added during AHAH/AJAX requests. In Drupal 7 behaviors have two functions, one called when content is added to the page and the other called when it is removed.

Behaviors are registered by setting them as properties of Drupal.behaviors. Drupal will call each and pass in a DOM element as the first parameter (in Drupal 7 a settings object will be passed as the second parameter). For the sake of efficiency the behavior function should do two things:

  • Limit the scope of searches to the context element and its children. This is done by passing context parameter along to jQuery:
    jQuery('.foo', context);
  • Avoid processing the same element multiple times.
    In Drupal 6 assign a marker class to the element and use that class to restrict selectors:
    jQuery('.foo:not(.foo-processed)', context).addClass('foo-processed').css('color', 'red');
  • In Drupal 7 use the jQuery Once plugin that's bundled with core:
    jQuery('.foo', context).once('foo').css('color', 'red');

As a simple example lets look at how you'd go about finding all the https links on a page and adding some additional text marking them as secure, turning <a href="https://example.com">Example</a> into <a href="https://example.com">Example (Secure!)</a>. This should make the importance of only running the code once apparent, if our code ran twice the link would end up reading "Example (Secure!) (Secure!)".

In Drupal 6 it would be done like this:

// Using the closure to map jQuery to $.
(function ($) {
// Store our function as a property of Drupal.behaviors.
Drupal.behaviors.myModuleSecureLink = function (context) {
  // Find all the secure links inside context that do not have our processed
  // class.
  $('a[href^="https://"]:not(.secureLink-processed)', context)
    // Add the class to any matched elements so we avoid them in the future.
    .addClass('secureLink-processed')
    // Then stick some text into the link denoting it as secure.
    .append(' (Secure!)');
};
// You could add additional behaviors here.
Drupal.behaviors.myModuleMagic = function(context) {};
}(jQuery));

In Drupal 7 it's a little different because behaviors can be attached when content is added to the page and detached when it is removed:

// Using the closure to map jQuery to $.
(function ($) {
// Store our function as a property of Drupal.behaviors.
Drupal.behaviors.myModuleSecureLink = {
  attach: function (context, settings) {
    // Find all the secure links inside context that do not have our processed
    // class.
    $('a[href^="https://"]', context)
      // Only process elements once.
      .once('secureLink')
      // Then stick some text into the link denoting it as secure.
      .append(' (Secure!)');
  }
};
// You could add additional behaviors here.
Drupal.behaviors.myModuleMagic = {
  attach: function (context, settings) { },
  detach: function (context, settings) { }
};
}(jQuery));

JavaScript on your AJAX form

Attach jQuery to Drupal.behaviors, that way it can be run anytime new DOM elements are inserted. One example, if you're using AJAX in Views, each time a section of the page reloads, it will reload/run jQuery.

Here's how to do it!

1) Create a new file in your theme directory(i.e. /sites/all/themes/[mytheme]/), called script.js

2) Insert this into your theme .info file(i.e. /sites/all/themes/[mytheme]/[mytheme].info):
scripts[] = script.js

3) Insert the following into script.js (the file you created in step 1):

(function($) {
Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
    //code starts
    $("body").click(function() {
      alert("Hello World");
    });
    //code ends
  }
};
})(jQuery);

Clicking anywhere on your website, now alerts - Hello World.

JavaScript theming

Drupal provides a theming mechanism for JavaScript code in a similar manner to the way theming works within the rest of Drupal. This enables themes to customize the markup generated by JavaScript.

Modules provide theme functions for their markup. For example, the following code uses the theme function powered (This displays a "powered by Drupal" icon):

Drupal.theme.prototype.powered = function(color, height, width) {
  return '<img src="/misc/powered-'+ color +'-'+ height +'x'+ width +'.png" />";
}

When a module wants to insert the markup it would do so in a matter like:

$('.footer').append(Drupal.theme('powered', 'black', 135, 42));

This will place an image in any elements with the class footer with the following markup:

<img src="http://drupal.org/misc/powered-black-135x42.png" />

When a theme wants to provide a different markup it can do so by providing an alternate theme function. Following our example the following function provides an a theme function for the theme.

Drupal.theme.powered = function(color, height, width) {
  return '<div class="powered-'+ color +'-'+ height +'x'+ width '"></div>';
}

While the modules theme function is at Drupal.theme.prototype.powered the theme's is at Drupal.theme.powered. Including this function in the themes JavaScript will cause the markup generated by the snippet:

$('.footer').append(Drupal.theme('powered', 'black', 135, 42));

to be:

<div class="powered-black-135x42"></div>

JavaScript theme functions are entirely free in their return value. They can vary from simple strings to complex data types like objects, arrays, and jQuery elements. Refer to the original (default) theme function to see what your custom theme function should return.

Cross reference to related community documentation (Drupal.org "Developer Guide" as well as "Theming Guide"):

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

Comments

This handbook (except through examples) does not make it clear how to structure the [scriptname].js files included in the theme directory.

Looking at the examples and contributed themes, it looks like this is all that is needed:

/** beginning of file **/
if (Drupal.jsEnabled) {
  $(document).ready(function () {
    /* do your magic */
  });
}

This simple direction is missing from this page and would be very helpful for theme developers just starting out.

Just to clarify that this is NOT drupal_add_js() or Drupal.behaviors.myModule, this is simply a static script.js file or the like that is added to the theme folder of a custom theme.

Drupal's JS library is like a complete mystery, it's pretty frustrating. Hopefully the documentation will catch up.

-Wes

Exactly.

I cannot find any simple documentation that will tell me where to put the Drupal.behaviors.myModule. Is it to be placed in the scripts.js in the theme folder or somewhere else. When i use it instead of $(document).ready(function(context) nothing happens, even using firebugs console.

It is becoming very annoying.

I believe you are supposed to put this type of stuff:

Drupal.behaviors.myModule = function(context){
//your magic
};

into a script file that will exist inside your /sites/all/myModule directory.

Then you can call the script in the /sites/all/myModule/myModule.module file with the function drupal_add_js()

I usually call it in hook_init().

Alternatively, i suppose you can use write the javascript into the footer:

/**
* hook_footer()
* add javascript to the footer
*/
function myModule_footer(){
  $script = "<script type="text/javascript">";
  $script .= "
      Drupal.behaviors.myModule = function(context){
        //your magic, escaping "quotes" because this is javascript inside php
      };
  ";
  $script .= "</script>";
  return $script;
}

I haven't tried that out though..


trevor simonton
web developer
http://www.trevorsimonton.com/

The snippet on how to override the theme is wrong. It should be Drupal.theme.powered instead of Drupal.theme.prototype.powered.
See also http://www.slideshare.net/mattfarina/intro-to-jquery-in-drupal slide 25

Drupal 7.x comes bundled with Jquery, but i just embedded the google-hosted version since thats what I normally do on all non-drupal sites i develop. In my theme's own folder i added a copy of html.tpl.php, and between the styles and script includes, i added:

<?php print $styles; ?>
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('jquery', '1.4.4');
</script>
  <?php print $scripts; ?>

this works great. see google js api documentation for more info.

By doing it that way would the page load both the bundled jquery and the jsapi one? seems like a waste.

why would you load the js lib twice?

Very cool tutorial and exactly what I needed !!! THANKS !!!

I was going nuts for about an hour trying to get my existing jQuery script working on Drupal 7 until I came across this post:

If when converting a theme to Drupal 7 you get the following Javascript errror in your JQuery:

$ is not a function

This is because Drupal 7 improves compatability with other Javascript libraries so you need to put the following wrapper around your code:

(function ($) {
    //your existing code
})(jQuery);

This is documented under drupal_add_js()

thanks! this helped :)

One thing to note about the above approach is that the wrapper code forms a closure around the wrapped code which takes it out of the root of the document it's attached to. It's effectively trapped in a bubble. This is not a problem if all your code is contained within the bubble, but the code is inaccessible to javascript code outside - for example if you have inline javascript calling a function in the bubble, or a popup window trying to call a javascript function on it's opener.

If you have any of these kinds of interactions it's much simpler and safer to replace all instances of $(...) with jQuery(...), in which case you don't need that wrapper.

Actually the simplest solution for me was to add the following inline JS to a custom module:

function yourmodule_preprocess_page(&$vars) {
  drupal_add_js('var $ = jQuery;', 'inline');
}

Pretty simple stuff. I'm still not sure if hook_preprocess_page is the most appropriate place to add the JS but it does the trick.

This is a godsent, thank you :)

You saved my time

I want to implement this sticky-scroll jquery plug-in on a drupal 7 theme to both sidebars.

https://github.com/Forrst/sap/blob/master/README.md

  1. I've added the jquery.sap.js to my .info file and I can see when viewing source its showing up.
  2. I've changed the "sap-shimy-shim" to "sidebar"
  3. Now, I must apply Sap to an element in the DOM by simply calling $(selector).sap()

I have no idea where/how to do #3. I'm think it has something to do with Drupal.behaviors.??

I'm comfortable with drupal theming using css but new to jquery.

Help!

I may be late to the party here, but are there plans to split this page into content for 6.x and content for 7.x? Reading through this page there are several instances where different syntaxes are documented for each version.

Matt Bernhardt
bernhardt.7@osu.edu

THANK you! 30 mins of trying everyone's suggestions and this worked.

EDIT: bah, reply fail. Referring to #comment-4573322

I was able to play with the drupal_add_js(); insertion in my template.php file.

The code that properly added my custom jQuery script (.js file) to my template was as follows:

drupal_add_js(drupal_get_path('theme', 'FOLDERTOTHEME') .'/JSFILENAME.js', 'file');

I'm hoping that this will help someone not waste too much time searching for a solution. I did about 5 refreshes of my page and looked through source code and found that changing the last parameter to 'file' seemed to tell it to insert it as a source file like:

<script src="/PATH/TO/JSFILENAME.JS"></script>

It works!

benjaminkyta

Thank you for this comment! It helped a lot!

hi, quick question. i was trying to add custom .js file to my template to toggle div. it worked allright, but i cannot specify efect or speed (it responds only to "slow" and "fast"). Here is code:

jQuery(document).ready(function($){
$(".alldatesholder").hide();
$(".alldates").click(function () {
$(this).closest("div.upcoming-events-block-row").find(".alldatesholder").toggle("fast");
return false;

});

});
effect like toggleClass not working at all. i have a feeling im missing something huge in Drupal 7 +jQuery understanding. Do i need to include libraries or some .js files to make it work. I have jquery update module active and i have plenty of .js files scattered in drupal instalation. Could somebody explain me in plain english how to set up custom .js file for my template and make it work with jquery
(i understand how to add it .info file) or send me to propper source?

thank you

Wouldn't these be better as wiki pages so we don't have to sift through all this comments?!?

@switch13 - Most certainly! This actually *is* a wiki page :)

As a Drupal.org user, you can edit the page (scroll up to top). You can incorporate the comments as you see fit. Take all the good stuff and leave the old stuff!

Then, you can ask someone to delete the comments. This is sometimes called "rolling in the comments". Here's a documentation page explaining how to incorporate comments into a docs page.
http://drupal.org/node/135589

See an example issue : http://drupal.org/node/1314602

- Learn best practices in Acquia's Drupal training http://training.acquia.com/
- Tips on Giving effective feedback in the forums

To insert a basic jQuery effect, paste the following anywhere in template, including *.tpl.php files:

<?php
drupal_add_js
('(function($) {$(document).ready(function() {
  $("body").click(function() {
    alert("Hello World");
  });
});}(jQuery));'
, 'inline');
?>

To insert a jQuery UI, paste the following anywhere in template, including *.tpl.php files (credit http://tiny.cc/vvuua):
<?php
drupal_add_library
('system', 'ui.accordion');
drupal_add_js('(function($) {$(document).ready(function() {
  $("#accordion").accordion();
});}(jQuery));'
, 'inline');
?>

<div id="accordion">
<h3><a href="#">Section 1</a></h3><p>Paragraph 1</p>
<h3><a href="#">Section 2</a></h3><p>Paragraph 2</p>
<h3><a href="#">Section 3</a></h3><p>Paragraph 3</p>
</div>

You can substitute the above ui.accordion library, with different libraries. To get a complete list of jQuery UI libraries, paste the following anywhere in template, including *.tpl.php files:
<pre><?php print_r(drupal_get_library('system')); ?></pre>

drupal.ajax - Drupal AJAX
drupal.batch - Drupal batch API
drupal.progress - Drupal progress indicator
drupal.form - Drupal form library
drupal.states - Drupal states
drupal.collapse - Drupal collapsible fieldset
drupal.textarea - Drupal resizable textarea
drupal.autocomplete - Drupal autocomplete
jquery - jQuery
jquery.once - jQuery Once
jquery.form - jQuery Form Plugin
jquery.bbq - jQuery BBQ
drupal.vertical-tabs - Vertical Tabs
farbtastic - Farbtastic
jquery.cookie - Cookie
ui - jQuery UI: Core
ui.accordion - jQuery UI: Accordion
ui.autocomplete - jQuery UI: Autocomplete
ui.button - jQuery UI: Button
ui.datepicker - jQuery UI: Date Picker
ui.dialog - jQuery UI: Dialog
ui.draggable - jQuery UI: Draggable
ui.droppable - jQuery UI: Droppable
ui.mouse - jQuery UI: Mouse
ui.position - jQuery UI: Position
ui.progressbar - jQuery UI: Progress Bar
ui.resizable - jQuery UI: Resizable
ui.selectable - jQuery UI: Selectable
ui.slider - jQuery UI: Slider
ui.sortable - jQuery UI: Sortable
ui.tabs - jQuery UI: Tabs
ui.widget - jQuery UI: Widget
effects - jQuery UI: Effects
effects.blind - jQuery UI: Effects Blind
effects.bounce - jQuery UI: Effects Bounce
effects.clip - jQuery UI: Effects Clip
effects.drop - jQuery UI: Effects Drop
effects.explode - jQuery UI: Effects Explode
effects.fade - jQuery UI: Effects Fade
effects.fold - jQuery UI: Effects Fold
effects.highlight - jQuery UI: Effects Highlight
effects.pulsate - jQuery UI: Effects Pulsate
effects.scale - jQuery UI: Effects Scale
effects.shake - jQuery UI: Effects Shake
effects.slide - jQuery UI: Effects Slide
effects.transfer - jQuery UI: Effects Transfer
once - jQuery Once
form - jQuery Form Plugin
jquery-bbq - jQuery BBQ
vertical-tabs - Vertical Tabs
cookie - Cookie

- Damien
:: Keep Open Spirit ::

Thank you SO MUCH! I was just pounding my fist on my desk asking WHY is there no list of the options... I was trying to add effects using "ui.effects" because I knew the UI options can be loaded that way. It would be handy to have this on a cheat sheet somewhere.

Joel Milne, GoldHat Development Group
www.GoldHat.ca

I think, this is only for jquery update 7.x-2.3, cmiiw

A better, preferred method is to attach jQuery to Drupal.behaviors, that way it can be run anytime new DOM elements are inserted. One example, if you're using AJAX in Views, each time a section of the page reloads, it will reload/run jQuery.

Here's how to do it!

1) Create a new file in your theme directory(i.e. /sites/all/themes/[mytheme]/), called script.js

2) Insert this into your theme .info file(i.e. /sites/all/themes/[mytheme]/[mytheme].info):

scripts[] = script.js

3) Insert the following into script.js (the file you created in step 1):

(function($) {
Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
    //code starts
    $("body").click(function() {
      alert("Hello World");
    });
    //code ends
  }
};
})(jQuery);

Clicking anywhere on your website, now alerts - Hello World.

More info on Drupal Behaviors:
http://tiny.cc/ohuw5

Examples:
http://tiny.cc/ch048
http://tiny.cc/nlzx2

To prevent certain functions from repeating themselves with every DOM element, such as .append from appending the same text again and again... use .once(), for example:

change this:

$(".myclass").append("<div>text</div>");

into this:

$(".myclass").once().append("<div>text</div>");

Hello,

I'm trying to add some custom jquery code to my theme. I used the code below :

(function($) {
Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
    //code starts
    $("body").click(function() {
      alert("Hello World");
    });
    //code ends
  }
};
})(jQuery);

The jquery file is loaded with the script but nothing happens on my page, any help ?

drupal_add_js('http://example.com/example.js', 'external');

As somebody pointed out in the forums to me:
Running Firebug console test code must also be wrapped inside jQuery closure for it to work:

(function ($) {
//Test code here
}(jQuery));

Quentin Campbell
Digital Solace (Pty) Ltd

man, man, ...
when I read all these comments, I get even more confused.

- Some telling to use the "$(document).ready(function() " others say: don't use that.
- Some write the wrap as "}(jQuery));" others write "})(jQuery);"
- Some say "add it to the theme.info", others say "add it to the module.info"
- and some other strange stuff....

Can there be a "God" to enlighten us, telling us What, When, How, ...so we can say "Wooow!"

Thank you.

Is there a simple guide to adding a small amount javascript to a single page i.e. not to all pages on a site?

As a simple demo to get me started I want to have two data entry fields on a page and a button. When the user enters numbers and hits the button I want to run a bit of javascript , do some math on the numbers and display the result on the page.

Please, in tiny steps I can't get wrong! I'm beginning with Drupal but familiar with non-drupal web pages.

Thanks!

There are lots of techniques, but this is how I do it without messing with building a module.

1. In template.php, you can add javascript via the preprocess functions. For example, if the item you want to use to fire jQuery is within the content of the page, use template_preprocess_node(&$vars):

<?php
// assuming that the theme's name is 'themename'
function themename_preprocess_node(&$vars) {
 
// Assume the uri is created by views, and is example[dot]com/contrib
 
if (arg(0) == 'contrib') {
   
$js = "..." // Insert your inline javascript here
   
drupal_add_js($js, 'inline');
  }
}
?>

More on template_preprocess_node: http://api.drupal.org/api/drupal/modules--node--node.module/function/tem...

More on drupal_add_js(): http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_ad...

Another technique is to place a drupal_add_js() into a node.tpl.php, views--[viewname].tpl.php, or block.tpl.php. I don't think it will work in page.tpl.php because the javascript array is already baked into a string by the time the page templates are used.

Here are some easy steps that will help you use jQuery in your drupal 7 custom module. Make sure you have enabled jQuery Update, jQuery UI and jQuery plugins modules. Suppose you want to hide a label when you click on a button using jQuery.

First write the code and save it in js/ folder of your custom module. Create a js/ folder if there is no such existing folder. Name this js file say, custom_module.js. Below is the code for custom_module.js:

(function($)  {
  function custom_module_function(context)  {
    $(document).ready(function()  {
      $("#my_button_id").click(function()  {
        $("#my_label_id").hide();
      });
    });
  }
  Drupal.behaviors.custommodule = {
    attach: function(context)  {
      custom_module_function(context);
    }
  }
})(jQuery);

In your custom_module.module file add the following code snippet:

function custom_module_init() {
  drupal_add_js(drupal_get_path('module', 'custom_module').'/js/custom_module.js');
}

If you have already used the hook_init() for your module, just add the above line of code in your hook_init().

Save all the files. Clear the cache and your jQuery should be working fine ;)

Good Luck.

Also you may refer to extlink module of drupal 7.

Thanks to Mukesh for his guidance.

Regards,
Subhojit Paul
Web Developer @ Innoraft Solutions

I searched for hours and found out here how to get external javascript working in Drupal 7 as this page isnt that clear.

Put this

(function ($) {
// Prefill the search box with Search... text.
Drupal.behaviors.drupaldeveloper = {
  attach: function (context) {
   console.log("this works!");
  }
};
})(jQuery);

More info from this link: http://www.drupaldeveloper.es/en/how-add-javascript-or-jquery-drupal-7

I am an IT dude, and Drupal developer (from Vancouver Canada), living in Japan. Been to Drupal Meetup Camp 2013 Manila 2013 (Awesome people there!), and develop modules for an e-learning startup. Very keen to get into things link Backbone.js Drupal 8 etc

Can someone give me a sample code how this example can be used in Drupal 7

function myFunction3()
{
jQuery({someValue: 0}).animate({someValue: 987.00}, {
duration: 500,
easing:'swing',
step: function() {

$('#el').text(Math.ceil(this.someValue) + ",00");
}
});
}

I am using module code per node and jquery update. So what do I need to add to the script above and how to call it from html in the same page?

This morning, all of our modules that used Javascript / jQuery spontaneously stopped working, although no one has touched anything that should affect that in years. I get the javascript error "ReferenceError: jQuery is not defined" twice and "ReferenceError: Drupal is not defined" once every time a page loads.

Any ideas what could cause this?

drupal_add_js('http://example.com/example.js', 'external');