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 moment):

div {
  resize: horizontal;
  overflow: hidden;
}

Unfortunately, the onresize event seems not to be fired on the div. How can I detect in JavaScript when such a user-instantiated resize has happened?

Edit: FWIW I had opened a bug report over at Mozilla. If you want to track it: https://bugzilla.mozilla.org/show_bug.cgi?id=701648

Answer 1

Resizing is like a style change. As such it can be observed with a MutationObserver. The more specific ResizeObserver is probably even better:

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

let child = document.querySelector('textarea');
observer.observe(child);

<textarea></textarea>

Answer 2

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

Answer 3

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 4

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 5

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

Answer 6

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

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