Extend Prototype $() yourself

Posted by Dr Nic on September 09, 2006

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.

Trackbacks

Use this link to trackback from your own site.

Comments

Leave a response

  1. Chris Sat, 09 Sep 2006 22:49:35 UTC

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

  2. Dr Nic on Ruby on Rails » Prototype: “element-id”.$() instead of $(’element-id’) Mon, 11 Sep 2006 09:54:29 UTC

    [...] 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 Mon, 16 Oct 2006 18:50:34 UTC

    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 Mon, 16 Oct 2006 19:10:16 UTC

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

  5. Dr Nic Mon, 16 Oct 2006 19:10:25 UTC

    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 Mon, 16 Oct 2006 22:55:33 UTC

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

  7. Dr Nic Tue, 17 Oct 2006 06:57:00 UTC

    I love it when a problem fixes itself!

  8. Tom Mon, 20 Nov 2006 22:18:12 UTC

    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. Thu, 24 May 2007 06:59:40 UTC

    Taking viagra with cialis….

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

  10. Craig Morris Wed, 27 Jun 2007 09:09:50 UTC

    What version of Prototype are you using?

  11. Gov.UA Fri, 29 Jun 2007 08:50:12 UTC

    Gov.UA…

    Hello!…

  12. Cameron Fri, 02 May 2008 05:46:31 UTC

    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.

Comments