Reputation: 46556

jQuery : Chrome textareas and resize event

Chrome makes textareas resizable by default. How can I attach events to the resizing events for the textareas ? Doing the naive $('textarea').resize(function(){...}) does nothing.

Upvotes: 9

Answers (6)

vol7ron

Reputation: 42099

This is an old question, but someone else had the same one in IRC, so I decided to solve it here: http://jsfiddle.net/vol7ron/Z7HDn/

Everyone's right that Chrome doesn't capture the resize event and that Chrome doesn't capture the mousedown, so you need to set the init state and then handle changes through mouseup:

jQuery(document).ready(function(){
   // set init (default) state   
   var $test = jQuery('#test');

   $test.data('w', $test.outerWidth());
   $test.data('h', $test.outerHeight()); 

   $test.mouseup(function(){
      var $this = jQuery(this);
      if (  $this.outerWidth()  != $this.data('w') 
         || $this.outerHeight() != $this.data('h')
         )
         alert( $this.outerWidth()  + ' - ' + $this.data('w') + '\n' 
              + $this.outerHeight() + ' - ' + $this.data('h'));

      // set new height/width
      $this.data('w', $this.outerWidth());
      $this.data('h', $this.outerHeight()); 
   });

});

HTML

<textarea id="test"></textarea>

Upvotes: 5

cburgmer

Reputation: 2220

Similar to Epeli's answer I've tried to start on a clean solution to trigger a resize() event on mousedown: http://jsfiddle.net/cburgmer/jv5Yj/3/ However it only works with Firefox as Chrome doesn't seem to trigger mousedown on the resize handler. However it does trigger mouseup.

Upvotes: 0

cburgmer

Reputation: 2220

There is jquery-resize which once included just makes your given line work: http://benalman.com/projects/jquery-resize-plugin/

Upvotes: 3

esamatti

Reputation: 18944

Here's a jQuery plugin written using CoffeeScript. Idea from Jonathan Sampson.

$.fn.sizeId = ->                                                         
    return this.height() + "" + this.width()                             

$.fn.textAreaResized = (callback) ->                                     
    this.each ->                                                         
        that = $ this                                                    
        last = that.sizeId() 
        that.mousedown ->                                                
            last = that.sizeId()                                         
        that.mousemove ->                                                  
            callback(that.get(0)) if last isnt that.sizeId()

You can build it to Javascript on the CoffeeScript's homepage

http://jashkenas.github.com/coffee-script/

Use the "Try CoffeeScript" button.

Upvotes: 5