Cfrgtkky

I want to save the height and width of the textarea when the user change it's dimensions.

I've tried to use:

$('textarea').resize(function() {



    var height = $('textarea').css('height');



    var width = $('textarea').css('width');



    $.post('vocabresize.php?height=' + height + '&&width=' + width, function() {});



});

But the $.post() function hasn't been called, so I changed it to:

$('textarea').resize(function() {



    $('body').html('Yay it worked');



});

And when I was changing size of textarea the 'Yay it worked' didn't appeared.

textarea doesn't fire a resize event when resized; that is for resizing the window. Instead, you can store the size of the textarea outside the function, and then check for changes when the mouse is released. Something like so would work:

let myTextArea = $('#myTextArea');

let oldHeight = myTextArea.height();

let oldWidth = myTextArea.width();



myTextArea.mouseup(function() {

    let newHeight = $(this).height();

    let newWidth = $(this).width();

    if(newHeight !== oldHeight || newWidth !== oldWidth) {

        console.log("Text area was resized!");

        oldHeight = newHeight;

        oldWidth = newWidth;

    }

})

Note that this won't detect when the textarea size changes for other reasons; for example when the window resizes. Also, to make it work for every text area on the page, you'd need to loop through them all and store their dimensions in an object so you could retrieve them.

.resize does not work on a textarea element. I've just tested it myself. You can do this ;)

var textareaWidth;

var textareaHeight;

$('textarea').mouseup(function(evt) {

    if(this.clientWidth != textareaWidth || this.clientHeight != textareaHeight) {

        console.log(`new size= ${this.clientWidth} x ${this.clientHeight}`);

        textareaWidth = this.clientWidth;

        textareaHeight = this.clientHeight;

    }

});