MooTools, Framework Compatibility, and Dollar $afe Mode

By  on  

MooTools 1.2.3 was released on June 19, 2009. With this release, MooTools implemented Dollar Safe Mode. Essentially, MooTools no longer requires the $ function for its own purposes. Valerio Proietti writes about Dollar Safe Mode on the MooTools blog but I'll give a quick overview below. vs $

The $ function has become The code looks as follows:

/* old:: var myElement = $('my-element'); */
var myElement ='my-element');

If MooTools doesn't detect another framework requesting the $ function, $ will automatically be assigned to MooTools. vs $$

The $$ function will also be renamed The code looks as follows:

/* old:: var inputs = $$('input'); */
var input ='input');

Like the $ function, $$ will be assigned to MooTools' if a $$ function is not detected. Note that was NOT implemented in MooTools 1.2.3; will be implemented in MooTools 2.

Strategies For Updating < 1.2.3 MooTools Code

There are a couple of ways to update your code. The first is to simply switch all $ references to

/* old:: var myElement = $('my-element'); */
var myElement ='my-element');

The second method is to use closures so you can continue to use the $ and $$ functions:

(function($,$$) {
	this.MyClass = new Class({
		//functionality in here...
	var myInstance = new MyClass($('search-box'),$$('input'))

DO NOT FEAR! My MooTools Code Still Works!

Don't pass up my older code samples due to the move away from requiring $! The code will still work. Use one of the above strategies for making my code framework-compatible.

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos


  1. Isn’t this line:

    this.MyClass = new Class({

    Supposed to be:

    var MyClass = new Class({


  2. Amitay Horwitz: Nope. The “this.” gives the plugin window scope within the closure.

  3. thnx for the info/update. looking forward in seeing more tips/tricks with the upcoming mootools version!

  4. I’ve made the change to MooTools 1.2.3 since i discovered some interesting FX extensions but the new version seems to cause conflict with TinyMCE WYSIWYG editor. I’m getting the “ is not a function” error @ mootools core when loading TinyMCE’s scripts. I’m not using MTs along with another Frameworks so i don’t have a clue about what’s going on.
    Hope this to be fixed quickly.

  5. i have “ is not a function” error with TinyMCE’s scripts too… but not in IE…

  6. i can confirm daetherius and dr. death,

    even when i changed all my $() into, and did everything else the mootools blog told me to do, it didn’t really fix the problem. since i’m also using TinyMCE, i tried taking that off for a moment just in case it was the tinyMCE… and what do you know, it worked. i was checking my site on both FF and Chrome. but of course, i can’t sacrifice TinyMCE just that easily.

    i’m rolling back to 1.2.2 until dr. death’s ticket in the lighthouse is seriously pondered upon.

  7. Thanks David! Took over a project that already had jQuery code implemented on one of the pages, which I didn’t discover until after I had implemented/tested some functionality using MooTools (on other pages). But, the MooTools script wasn’t working with the jQuery. Long story short: changed $() to and it worked like a charm. Thanks! :)

  8. Lode

    I’m not having issues with TinyMCE and mootools, but with TinyBOX and mootools. TinyBox just won’t display any content when i fire it up in Internet Explorer… Firefox and safari work fine.

    I replaced the $ with in my mootools function (accordion), but no result.. Does anyone know how to fix this?

  9. Lode: I would imagine you could change replace every occurrence of “” within TinyBox with something like “document.tid”.

  10. Lode

    @David Walsh: The weird thing is, “” doesn’t occur within TinyBox.

    Demo: (source-files included)

  11. Lasse

    @David Walsh: I am still having trouble converting this simple horizontal slider to work using mootools 1.2. – Do you have an idea, to make the calls work in 1.2. ?

    Syntax working in mootools 1.1. :

    Syntax not working in mootools 1.2.:

  12. Lasse


    I’ve fixed the code using knowledge out of here, just in case someone is interested in moving a horizontal scroller from 1.1 to 1.2:

  13. Jay

    Thank you, this info just saved my hiney on a project I was working on. Keep up the great work!

  14. brook

    its seems that is as described above but doesn´t seem to exist and isn´t mentioned in the linked mootools article or on the mootools site.

    am i missing something?

  15. brook

    its seems that is as described above but doesn´t seem to exist and isn´t mentioned in the linked mootools article or on the mootools site.

    am i missing something?

  16. martin


    Is there any chance to get to work? I´m not able to use closures as you discribed with your great kwicks-plugin.

    Thank you for great work!

  17. @martin: Unfortunately hasn’t been implemented yet. *sigh*. You can just use (,$$); instead.

  18. HI David,

    Was there a specific reason why; wasn’t implemented or backported to the 1.4 branch? Seems like a big omission, given that supplanted $, and has been the case for the last 3 years…

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!