Home

Adding JavaScript to a theme

Drupal: 16m
previous video
next video
Video Series

Theming Basics For Drupal 7 Series

Title Play button
1. Introduction to Theming Basics for Drupal 7 FREE 19m
2. Preparing a site for theming 8m
3. Enabling themes and theme settings 7m
4. Translating a design into a Drupal theme 5m
5. Helpful browser extensions for Drupal theming 4m
6. Creating the .info file and adding CSS 10m
7. Customizing the page template file 23m
8. Adding regions to the page template 16m
9. Customizing the node template 24m
10. Creating dynamic templates for specific node types 8m
11. Using the theme developer module 6m
12. Adding JavaScript to a theme 16m
13. Tour of popular page template variables 12m
14. Adding a screenshot to your theme 4m
15. Conclusion to Theming Basics 3m
Information

Walks through the process of first adding the search block to the node template file, and then explains some of the best practices for incorporating JavaScript scripts within your theme. Walks through how to protect the dollar-sign variable, and how to use the Drupal behaviors instead of the document ready so that your JavaScript will fire not only on page loads, but also if there is any dynamic material being loaded on the page through asynchronous page loads. We'll show you how to select the jQuery selector to target the desired element, and how to conform to Drupal's best-practice coding standards when it comes to integrating JavaScript and jQuery into your theme. You can learn more about jQuery itself with the Introduction to jQuery Series.

Tagged: , , , , , , and
Discussion

Comments on this video

You need to be an active subscriber to comment. or .
emvp84 on October 20, 2011 - 10:27pm

After working this video out there are a few things to correct:
a) the search form did not displayed correctly so I had to changed the CSS file to adapt it
b) Im still getting the JQuery variable can't be found... Still troubleshooting why it cant be loaded.

emvp84 on October 20, 2011 - 10:58pm

---edit
Ok, I have found how to use the JQuery because the variable was not defined.
Add this line on the top: jQuery.noConflict(); -> more info here: http://api.jquery.com/jQuery.noConflict/

For the css to look good the search box you would need to modify the following:
search: search-theme-form
modify to: search-block-form

and then in the property in line 321 to look like this:
/* Header quick search */
#header form#search-block-form {
top: -165px;

hope it helps to others looking at this video and thinking why my design doesn't look like his.
-enrique

Lullabot logo

Lullabot has trained thousands of Drupal developers & guided the development of some of the largest Drupal websites.