How to detect CSS3 resize events

Question

The CSS3 resize property can be assigned to arbitrary elements. I\'m looking for a way to detect such a resize on, say, divs (I don\'t mind it only working in Firefox at the

Answer 1

According to this site it only works in internet explorer 9.

Try this fiddle: http://jsfiddle.net/maniator/3Zva3/

Answer 2

Since the resize event clearly doesn't work (currently, at least), you can try one of these alternative options:

1. Use a combination of mousedown, mousemove and/or mouseup to tell whether the div is being / has been resized. If you want really fine-grained control you can check in every mousemove event how much / if the div has been resized. If you don't need that, you can simply not use mousemove at all and just measure the div in mousedown and mouseup and figure out if it was resized in the latter.
2. Poll every 200ms or so (depending on your needs) and compare the current size with the last known size. See setTimeout().

Answer 3

Listen to DOMAttrModified events. Got the idea from this answer, this jsFiddle appears to work in Firefox 8 (if you open the console).

Answer 4

Resizing is like a style change. As such it can be observed with a MutationObserver.

let observer = new MutationObserver(function(mutations) {
  console.log('mutations:', mutations);
});

let child = document.querySelector('textarea');
observer.observe(child, { attributes: true });

<textarea></textarea>

Answer 5

You can use the ResizeSensor class of the css-element-queries polyfill from

https://github.com/marcj/css-element-queries

It allows you to call a javascript function on size changes for all types of elements, not only for window. It sets up a real sensor, not a javascript setTimeout poll.

Use it like this:

new ResizeSensor($('#myelement'), function() {
    console.log("myelement's size has changed");
});

Supported browsers are: all incl. IE6+.

Answer 6

This seemed to work pretty well for me:

$("body").on('mousedown mousemove', ".resizeItem", function () {
    console.log($(this).height());
})

"Use a combination of mousedown, mousemove and/or mouseup"

as per Felixs answer.

Especially useful when combining a custom search result panel with Dev Extremes Scroll View and you want full control over it.

$("body").on('mousedown mousemove', ".scrollContainer", function () {
    var h = $(this).height() - 20;
    $(".scrollArea").dxScrollView('instance').option('height', h);
});