Dr Nic

Extend Prototype $() yourself

If you’re using the prototype javascript library, its fun to add methods directly to the $() object.

So instead of typing:

new Effect.Move($('target-obj-name'), {x: 40, y: 50, mode: 'absolute'});
new Effect.Pulsate($('target-obj-name'));

You could type:

$('target-obj-name').moveTo(40,50).pulsate();

Much sexier. You could add any methods you want to $() to do anything you need to do in your application. Just reproduce the example below in a Javascript file (say prototype-extensions.js and include it in your web pages, using <script src="prototype-extensions.js"></script>):

Element.Methods.moveTo = function(element,x,y) {
    new Effect.Move(element, {x: x, y: y, mode: 'absolute'});
    return element;
}
Element.Methods.pulsate = function(element) {
  new Effect.Pulsate(element);
  return element;
}

Element.addMethods();

The methods you want to add to $() need to be added to the Element.Methods hash (so in the example above, Element.Methods.moveTo and Element.Methods['moveTo'] are equivalent in Javascript), with the first argument of the function being the target element.

Finally, you need to formally tell Prototype that these methods must be added into future $() objects, using the command Element.addMethods().

Now you can add any method to your $() objects that you want. Just like magic.

Related posts:

1. Autotesting Javascript in Rails I used to love Javascript so much that it would...
2. DIY widgets – How to embed your site on another site UPDATE: Demo and tutorial fixed for IE7. UPDATE: Opera-supporting code....
3. Give up RJS and go pure RJS seems like a nice idea. Its Ruby with embedded...
4. Prototype: “element-id”.$() instead of $(‘element-id’) The Prototype library gives us the $() operation for converting...
5. Ajax on Rails – Prototype vs JQuery [Original article published on DevLounge - please post comments there]...