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. Using CoffeeScript in Rails and even on Heroku I’m pretty excited about CoffeeScript as a clean-syntax replacement for...
  2. Autotesting Javascript in Rails I used to love Javascript so much that it would...
  3. DIY widgets – How to embed your site on another site UPDATE: Demo and tutorial fixed for IE7. UPDATE: Opera-supporting code....
  4. Give up RJS and go pure RJS seems like a nice idea. Its Ruby with embedded...
  5. Prototype: “element-id”.$() instead of $(‘element-id’) The Prototype library gives us the $() operation for converting...

12 Responses to “Extend Prototype $() yourself”

  1. Chris says:

    Oo very Ruby-ish. Looks a bit like jQuery, too. Nice.

  2. [...] The Prototype library gives us the $() operation for converting a DOM element id into the DOM element: $(‘element-id’). It also appends a bunch of functions to the resulting object; as shown previously, you can add your own methods. [...]

  3. Anton says:

    does this work for you in IE?

    I am getting “object doesnt support property or method” when calling a method that was added using Element.addMethods

  4. Anton says:

    more specifically the error is thrown at some point after the new method finishes executing but before results are returned

  5. Dr Nic says:

    Hmm, it should work as its a line in prototype.js, and I think its been in prototype.js for a long time. Weird.

  6. Anton says:

    seems that the change in 1.5rc_1 fixed my problem :)
    thanks :)

  7. Dr Nic says:

    I love it when a problem fixes itself!

  8. Tom says:

    Will this only work with pre-release code? The current 1.4.0 release doesn’t seem to have the “.Methods” trick at all.

  9. Cialis. says:

    Taking viagra with cialis….

    Generic cialis. Buy generic cialis. Cialis 20mg. Cialis….

  10. Craig Morris says:

    What version of Prototype are you using?

  11. Gov.UA says:

    Gov.UA…

    Hello!…

  12. Cameron says:

    You could have also done:

    Object.extend(Element.Methods, {
    moveTo: function(element,x,y) {
    new Effect.Move(element, {x: x, y: y, mode: ‘absolute’});
    return element;
    },
    pulsate: function(element) {
    new Effect.Pulsate(element);
    return element;
    }
    });
    Element.addMethods();

    Anyway, I found this article very informative. Keep up the good work.