Lesson 7: Adding JavaScript

This lesson demonstrates using a jQuery plugin with Elgg.

Problem

You have been looking at pages that use really slick jQuery plugins. (Do a search on "top jquery plugins" if you are not familiar with all the possibilities offered by jQuery plugins.) Lightboxes, tool tips, charts, animations, fancy forms – the list goes on and on. You want to add a few of these jQuery plugins to your Elgg site, but you are not sure how to accomplish this.

Solution

Many jQuery plugins only require inclusion of a JavaScript file, often a CSS file, and then a little bit of JavaScript to initialize the plugin. Elgg has functions for including external JavaScript and CSS files that make this easy.

Example

In this example, we are adding a fancy tooltip to all the timestamps of content on the site. Normally, when you mouse over a timestamp, you see a tooltip created by the browser, like in the following screenshot:

We are using the jQuery Tools library (http://flowplayer.org/tools/tooltip/index...