How to include jQuery.ui effects in Drupal 7

The Task:

On a recent project I had to have a div slide to the left when a link was clicked. I thought that would be easy as Drupal 7 has the jQuery UI packaged by default. So I coded up a bit of jQuery that used a .slide() function but nothing happened when clicking the link. Looking at the FireFox JavaScript console I saw an error stating that slide was not available.

Why not?

It turns out that even though jQuery UI is shipped with Drupal none of the UI effects are turned on by default. That is a good thing as most folks, myself included, will not use many if any of the packaged enhancements.

The Solution:

Using my trusty Google skills it didn’t take long to find a great post by Andy Carter detailing how to include effects from the UI library in Drupal 7. One caveat that his post and others do not explicitly state is that the system library includes the ui and the effects array. For a short while I was trying to include the slide effect like so.

  drupal_add_library('system','ui.slide');

This does not work. I needed to use the effects.slide. The key is to look at what is inside of $libraries[”] and using that in your call. All of the available libraries provided by the system can be found on the system_library page.

Here is a complete example of what ended up being included in template.tpl.php.

function wwuzen_preprocess_page(&$variables, $hook) {
   //Add the slide effect for our search box
  drupal_add_library('system','effects.slide');
}

Notice that I use effects.slide rather than ui.slide. With that change in place my expected behavior executed properly.

One thought on “How to include jQuery.ui effects in Drupal 7

Leave a Reply

Your email address will not be published. Required fields are marked *