Today's "Module of the Day" is a handy little module called JS Injector that allows you to insert snippets of Javascript into your site.
In this post, I'll walk through how to enable and configure the module, use it to shout, "Hello, World!", and then go into some more advanced configuration.
Enable the Module
To use the module, you must enable it. This module has recently been installed on Stanford Sites and does not get enabled by default.
Go to admin/modules, check the box for "JS Injector", and click save.
(What's that fancy user interface at admin/modules? That's Module Filter.)
Add a JS Injector Rule
Go to admin/config/development/js-injector and click the "+Add" link (or go directly to admin/config/development/js-injector/add):
Creating a "Hello World" JS Injector Rule
Create a new rule with the following settings:
- Friendly name: hello_world
- Description: Greets the world
- JS Code:
alert('Hello, World!'); - Placement Options
- Position of the javascript: Usually you would want to leave this set to "header"
- Preprocess JS: For development and testing purposes, leave this unchecked; once your Javascript code is finalized and your site is in production, check this box
- Inline JS: Usually you would want to leave this unchecked
- Pages: Choose "The listed pages only", and enter "<front>" in the text box. This will run the Javascript only on the front page.
Then save the rule.
See Your JS Injector Rule in Action
Go to your home page and get your greeting!
Doing More With JS Injector
So now you have a "Hello, World!" alert greeting you every time you open your front page. You may think you have reached the pinnacle of human achievement on the Intertubes, but there is, in fact, more that you can do with JS Injector. (Go ahead and delete your "Hello World" JS Injector rule, as a service to humanity.)
Use Some jQuery
Drupal bundles jQuery with default installs, and that means you can use jQuery functions and selectors to select and manipulate elements in the DOM.
Add a new JS Injector rule and use the following Javascript/jQuery code:
$('h2').attr('class', 'awesomesauce');
});
And set it to display on the front page.
Load your front page and inspect the <h2> element and see that it has the class="awesomesauce" attribute:
You can use the full range of jQuery functions in JS Injector. Just remember to wrap your jQuery code in jQuery(document).ready(function($) {}); like so:
// do ALL THE THINGS here
});
