resize() on a textarea doesn't detect manual resizing only programmatical

Question

a textarea needs to do something when it is resized either manually (is has style resize:both) and when it is resized programmatically. It works fine programmatically, but not when user manually resizes.

textarea.resize( function(tn,newh,scroll){
                    console.log('resize');
                    ....... );
                });

I read something about that there was a bug in JQuery, with detecting manual resizing of textareas in Chrome. But is also doesn't work in Firefox etc. Also when I try to evoke same function on the parent-div (which automatically resizes as well), it also doesn't work. The text areas have

    textArea.css('resize','both');
    textArea.css('overflow','auto');

Can anybody tell why the resize event would not fire when manually resized , and what can I do about it?

Answer 1

Did you try modifying your script to:

$("textarea").resizable({
    resize:function(){
       $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
    }
})

I'll need to see the rest of your Javascript to find out why it's not firing. But you don't necessary need to use the resize function. Try binding it with the mouseup event:

$('textarea').bind('mouseup',function(){
    if(this.style.width != this.outerWidth || this.style.height != this.outerHeight){
        $(this).resize();
        this.outerWidth  = this.style.width;
        this.outerHeight = this.style.height;
    }
});

See: jsfiddle

Answer 2

I don't see your source code listing, did you try jQuery UI resizable? It allows the user to use the mouse to resize any DOM elements.

$(function() {
    $( "textarea" ).resizable();
});

The reason why your CSS resize property may not work may be that you accidentally capitalized the letter "a" in "textarea". If you want to set width and height constraints, you can also do so by:

textarea { 
    resize:vertical; max-height:200px; min-height:100px; 
}

You can read more on this CSS resize article