Theming

Movie Project: Use jQuery to Extend Functionality for Drupal 7

Last updated February 20, 2020
Categories
Up-to-date with minor version
7.x

Check your version

This tutorial covers a topic in Drupal 7 which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of Drupal 7, but we consider it archived.

In this exercise you will demonstrate your ability to attach JavaScript to themes, and use Drupal behaviors to enhance the functionality of a website.

Goal

Create a tooltip for the Top Ten Lists view using jQuery.

Prerequisites

You will need the following knowledge and skills. If you need a review, check out the Additional resources section at the bottom of this page.

  1. Create and attach JavaScript files.
  2. Understand how behaviors are used within Drupal.
  3. Write jQuery to enhance the functionality of a website.

Wireframe reference

You will need to refer to the wireframe collection PDF.

  • Homepage

Tasks

Create a tooltip for the homepage Top Ten Lists view as per the requirements details on the wireframes.

Recap

  • JavaScript can be attached to the theme, a render array, or injected at runtime.
  • Drupal behaviors allow for a more efficient use of JavaScript, and allow different parts of Drupal to interact.

Further your understanding

Additional resources

Creative Commons License

Drupal Training Resources by Damian Robinson are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Based on a work at http://www.damianrobinson.co.uk.

Hands-On Exercises: Movie Project