5

I am trying to detect whenever the user resizes a resizable textarea..

I am trying to do it with this code but it doesn't work:

$('textarea.note').bind("resize", function(){

  alert("resize!!!!!");


})

I don't want really to use any kind of timer and loops.. Help!?

John Black
  • 305
  • 2
  • 8
  • 19

1 Answers1

10

DEMO

$(document).ready(function () {
    var $textareas = jQuery('textarea');

    // set init (default) state   
    $textareas.data('x', $textareas.outerWidth());
    $textareas.data('y', $textareas.outerHeight());

    $textareas.mouseup(function () {

        var $this = $(this);

        if ($this.outerWidth() != $this.data('x') || $this.outerHeight() != $this.data('y')) {
            alert($this.outerWidth() + ' - ' + $this.data('x') + '\n' + $this.outerHeight() + ' - ' + $this.data('y'));
        }

        // set new height/width
        $this.data('x', $this.outerWidth());
        $this.data('y', $this.outerHeight());
    });
});
Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
  • Never thought of doing that, well played! – John Black Aug 23 '13 at 01:16
  • 1
    better than JQuery's resizable textarea because it doesn't waste the space below the textarea. When I use JQuery's resizable on a textarea, a whole line underneath is unusable. Also, this version triggers when the resize is complete (which is what I want). – atmelino Aug 02 '14 at 20:10
  • 1
    If you have multiple textareas, this will get you the id of the one that was resized: alert($(this).attr('id')); – atmelino Aug 02 '14 at 20:20