Working with Javascript

Javascript can add features and functionality to your site. For best results, follow these suggestions (thanks to Chaz Chumley for his knowledge and help!):

  1. Configure the JS injector (Configuration > Development > JS injector):
    1. Default jQuery version:  change to 1.7
    2. Alternate version for admin pages:  Default jQuery version
    3. jQuery compression level: minified
    4. jQuery and jQuery UI CDN: Choose Google
    5. Save
       
  2. Install whatever javascript set you need (+ Add). Give the name of the script something that is meaningful to you.
     
  3. For those js sets requiring a function (initialization) script, follow this syntax:
     
    1. A function script usually appears in the header or in the body of a static page in which the behavior will be displayed, and typically takes the form:

      $(function() {
      $( "[id-or-class-of-your-div-containing-the-behavior]" ).[name-of-function-in-your-source-script]({
      [variable: desired-result] (if any)
      });
      });
       
    2. This syntax will not work in Drupal Cloud 7. The following syntax will work. You do not need to use Drupal.behaviors (as mentioned in some MIT guides.

      (function ($) {
      $(document).ready(function() {
      $( "[id-or-class-of-your-div-containing-the-behavior]" ).[name-of-function-in-your-source-script]({
      [variable: desired-result] (if any)
      });
      });
      })(jQuery);
       
    3. Example:
      1. This doesn’t work in Drupal Cloud 7:

        $(function() {
        $( "#accordion" ).accordion({
        collapsible: true
        });
        });
         
      2. This does work:

        (function ($) {
        $(document).ready(function() {
        $( "#accordion" ).accordion({
        collapsible: true
        });
        });
        })(jQuery);