The other day an interesting question was posted to the WebAssist forums (full thread). Basically, a user was getting some JavaScript errors when adding PowerGallery to an existing page in their site. The error was complaining about the $() function. For those unfamiliar with MooTools, the $() function is a quick way to get a reference to an element by its id – instead of using document.getElementById() – and extend it with some MooTools magic.

After using Firebug to track down the exact error, it was pretty clear what was going on. The user’s page already had jQuery on it! When they added in their PowerGallery code, it was causing a conflict. Luckily, MooTools has a way to deal with this issue. Instead of using $(), use document.id(). This function was added as part of the MooTools Dollar Safe Mode updates made in version 1.2.3. Since jQuery defines the $() function too, MooTools wasn’t redefining it (to help not break jQuery).

The fix was to replace all $() function calls with document.id() in the gallery JavaScript. Using some PowerGallery code as an example:

//change this
this.wrapper = $(el);

//to this
this.wrapper = document.id(el);

I never recommend using more than 1 framework if you can avoid it and I’d always pick MooTools as my one and only!