A Guide to Drupal eCommerce and Site Development

This is a super-quick tutorial, since I am assuming anyone interested in combining Java Script and Drupal is already familiar with coding. Getting Java Script running in Drupal is just a slight variation from the typical setup; rather than this:

$(function() {
    your logic
}); 

In Drupal we use this for the DOM wrapper around our code:

Drupal.behaviors.initYourUniqueString = function() {
    Your logic            
};

The most common method of storing your code is as a file in your theme directory, but there are few other options:

1. Insert it by filename into individual nodes or blocks,
2. Declare its file to the theme and it will be included on all pages,
3. Reference it by file inside a page template
4. Pass it as inline code directly to the page from your module

To insert by filename into a single node or block one at a time, set the node or block Input Format to PHP (or any format that includes the PHP input filter), and have this at the beginning of the body:

<?php
  drupal_add_js( drupal_get_path(‘theme’,‘your_theme’).‘/yourJavaScript.js’, ‘theme’, ‘footer’ );
?>
whatever you want here, it’s a normal node or block from here on down

To declare a Java Script file within your theme, just include this in your theme’s .info file:

scripts[] = yourJavaScript.js

To reference it by file inside a page template, use this in your template file:

drupal_add_js( drupal_get_path(‘theme’,‘your_theme’).‘/yourJavaScript.js’, ‘theme’, ‘footer’ );

To pass the Java Script as inline code, use this:

drupal_add_js( your_java_script, ‘inline’, ‘footer’ );

Each of the above methods have situations where they are the best choice. For example, as a demonstration of the first method, you can click here to show/hide an image via Java Script. I choose to insert the script into only this node because there are very few pages where I want to use that effect on this site, so why include it everywhere? I simply set my input filter to PHP and included the file inside PHP tags at the beginning of my content.

The Java Script handling the above show/hide function is listed here:

// an after-the-DOM is loaded wrapper,
// this makes the menus slide up and disappear as soon as the page is visible,
// as well as holds conditional slide up/down logic for correctly configured content (see comments below):
// $(function() {  <- this is the jquery after-the-DOM style, while below is the Drupal method:
Drupal.behaviors.initBlakeLogic = function() {
             
  // elements with a class of "content-hideable" have a "rel" attribute equal to the class of content
  // that should be 'hidden' or 'revealed' upon a mouse click, accomplished via an animated toggle: 
  
  // for each element with class "content-hideable":
  $('.content-hideable').each( function() {
                              
                              // This first clause causes all the elements to hide, since they appear
                              // upon page load as visible. This also hints to the user that there
                              // is content waiting to be viewed:
                              
                              // get it's 'rel' attribute:
                              var rel = $(this).attr('rel');
                              if (rel) {
                                 // for every element of class with the name given by that rel, hide:
                                 $('.'+rel).animate( { opacity: "hide", height: "hide" }, 2000 );
                              }
                                
                              // attach a callback to toggle the class visibility:
                              $(this).click( function() {
                                               var rel = $(this).attr('rel');
                                               if ( rel ) {
                                                  $('.'+rel).animate( { opacity: "toggle", height: "toggle" }, 1000 );
                                               }  
                                               return false;
                                           });
                          });

// this is the ending of the jquery wrapper insuring the DOM is loaded:
// }); <- old jquery logic, new Drupal below:
};