A rough guide to upgrading from MooTools 1.1

Before you read this – please read the <a href=”http://mootools.net/blog/2009/12/31/mootools-1-1-upgrade-layer-beta/”>post on the official MooTools site</a>.
Before you read this – please read the post on the official MooTools site.

I’ve recently been working on the upgrade layer for MooTools, that allows users of MooTools 1.1 to easily upgrade to the latest version of our favourite framework. If you have a complex site, the following may not be relevant, but hopefully following the steps below will help the majority of users to update their code.

This isn’t a complete guide – but these are the steps I would take. Make sure you read through the readme first; there are a few breaking changes and subtle API differences. But for simple sites, the following should work.

Element getters and setters

One frequently used part of the API from 1.1 was Element setters and getters. Previously, you had methods such as $(el).getValue(val) and $(el).setText(text). These changed to $(el).set(‘value’, val) and $(el).set(‘text’, text). This is a quite simple change and a good one to start with. The complete list of methods that need to change:

  • getText() and setText()
  • getHTML() and setHTML()
  • getTag()
  • getValue()
  • setOpacity()

Simple Fx

This is another relatively simple change to make, and again, commonly used. To upgrade is a case of:

  • Fx.Base becomes Fx
  • Fx.Style becomes Fx.Tween (with some differences, see readme)
  • Fx.Styles becomes Fx.Morph
  • el.effect() becomes el.tween(), and el.effects() becomes el.morph() (again some subtle differences, see readme)


Next up is replacing $E and $ES.

  • $E(selector) becomes document.getElement(selector)
  • $ES(selector) becomes document.getElements(selector)

There was also a second optional parameter you could pass in that defined what element you wanted to search in. An example:

  • $E(selector, ‘.myDivs’) would become $$(‘.myDivs’).getElement(selector) or
  • $E(selector, ‘#myOtherDiv’) would become $(‘myOtherDiv).getElement(selector)

Ajax requests

Last of the common changes to be made is to the MooTools 1.1 Ajax and XHR classes. These need to be replaced with Request. Have a look at the readme for exact changes.

Fx methods

We updated a few Fx methods earlier, now let’s just finish the job. The following changes should be made:

  • myFx.custom() has been changed to myFx.start()
  • myFx.clearTimer() and myFx.stop() can both now be written as myFx.cancel()

If you follow the above steps most of your code should be good to go. If you need any further help just jump on IRC and someone should be there to help. Also, please check the docs for 1.1 and 1.2 to check you are passing the correct arguments.

We will also be working closely with the Joomla! dev team to convert the most popular plugins for you. Once these are done, we’ll be putting them in the Forge. You can request conversions in the MooTools Google Group but we can’t convert everything -so please don’t be offended if we don’t convert your favourite plugin.

Please read the original post on the MooTools blog for more details – and have fun upgrading!