Extending Element with Element.grow example

Illustrates how to extend the Element object to with a sample script that grows an element. Homework for you is to add a shrink method!

by rpflorence

HTML

<textarea id="comments">Focus me ...</textarea>

CSS

#comments {
    height: 50px;
}

JavaScript

Element.implement({

  grow: function(amount){
    var tween = this.get('tween');
    var to = this.getSize().y + amount.toInt();
    tween.start('height', to);
    return this;
  }

});

window.addEvent('domready', function(){
    
    $('comments').addEvents({
        focus: function(){
            this.grow(50);
        },
        blur: function(){
            // this.shrink();
            this.value = "hey make me shrink here or else I'll just keep growing ...";
        }
    });
    
});