jQuery - Detect when textarea is resized

Question

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!?

score 10 · Accepted Answer · answered Aug 23 '13 at 01:13

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());
    });
});

answered Aug 23 '13 at 01:13

Tushar Gupta - curioustushar

56,454
22
99
107

Never thought of doing that, well played! – John Black Aug 23 '13 at 01:16
@JohnBlack thank you :) – Tushar Gupta - curioustushar 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
@atmelino Thank you Sir :) – Tushar Gupta - curioustushar Aug 03 '14 at 15:08

jQuery - Detect when textarea is resized

1 Answers1