Utilizing jQueryUI Core Effects in Drupal 7

October 2nd, 2013
by Chris

Recently needed to implement a simple animation, using the jQueryUI toggleClass() function. A handy function that will allow you to toggle a class on and off, and animate the changes of adding the class. Makes a lot of simple animations incredibly simple to implement.

In order to utilize this on your Drupal site, the site needs to be instructed to load up the jQueryUI Effects as it's not loaded by default. Implementing it is pretty straight-forward though. All you need to do is request that the library, which is already maintained by Drupal in the system module, be loaded. So you make a call to drupal_add_library('system', 'effects'). The first argument indicates the module the library is contained in, and the second is the library file you'd actually like to load. To see other libararies included in the system module take a look through the source code.

If all your effects are contained in the stock version of jQuery that is bundled with Drupal, then that's all you need to enable access and get running. You should now be able to write and add JavaScript to the page as you would expect.

If however you are utilizing the jquery_update contrib module to run a more recent version of jQuery, at the time of this writing, you'll have a problem. In the current version of this module (7.x-2.3) the replacement jQueryUI effect file and the library name do not match up. As a result, when you add the library, you'll receive a 404 for the effects JS file (jquery_update/replace/ui/ui/minified/jquery.effects.core.min.js, in our instance we were using the minified files otherwise it'd be jquery_update/replace/ui/ui/jquery.effects.core.js). Looking in the jquery_update/replace/ui/ui/minified directory we can see that indeed this file does not exist, but we do have a jquery.ui.effect.min.js file (and jquery.ui.effect.js for the non-minified). Looking through the jquery_update.module file, we can see on line 267 $names['effects'] = 'effects.core'; where the module is redirecting the effects library to a filename base of 'effects.core'. But the files aren't called that any more, they are now have a base of 'ui.effect'. So changing the value to 'ui.effect' causes the correct file to be loaded and the 404's to go away. This has been noticed by members of the community already, and patches are sitting in the issue queue awaiting integration into the release branch. As you can see from the referenced issue, the other effects files have also been renamed and require updating as well.

Once you apply one of the patches, or tweak the file yourself, you'll now have the jQueryUI Core Effects library available to you in Drupal 7.

Posted in drupal, effects, jquery, patch, ui, update