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

from what i know, the onresize event only works with window. Does the click event fire when you resize? Maybe you could use that ( to recalculate width/height when clicked) — alinn
– alinn, Commented Nov 10, 2011 at 16:28
I could detect mousemove over the div but was hoping for a more comfortable solution. — Boldewyn
– Boldewyn, Commented Nov 10, 2011 at 16:30
For me overflow:hidden on body turned off resize event on FF and Chrome. Same issue? — Dan Froberg
– Dan Froberg, Commented Jun 6, 2023 at 19:48

psygo · Accepted Answer · 2024-05-25 14:23:38Z

33

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

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

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

<textarea></textarea>

edited May 25, 2024 at 14:23

psygo

7,8538 gold badges63 silver badges112 bronze badges

answered Jun 28, 2017 at 15:39

Daniel Darabos

27.6k10 gold badges108 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Boldewyn Over a year ago

Indeed. Good idea!

Dominic K Over a year ago

Doesn't seem to work in Safari 10, even with WebKitMutationObserver.

phil294 Over a year ago

Looks like this answer is outdated too, and you should be using ResizeObserver today instead.

Daniel Darabos Over a year ago

Thanks! The snippet with MutationObserver still works for me in Chrome 95. But ResizeObserver works too. I've updated the answer. Do you see any indication that MutationObserver will stop working in the future? I don't remember where I used it...

thdoan Over a year ago

Note that attributes: true is not relevant to ResizeObserver(). Specs

Community · Accepted Answer · 2017-05-23 11:55:13Z

12

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

edited May 23, 2017 at 11:55

CommunityBot

11 silver badge

answered Nov 10, 2011 at 16:47

robertc

76k19 gold badges201 silver badges181 bronze badges

8 Comments

Alp Over a year ago

Doesn't fire in Chrome, Linux

robertc Over a year ago

@Alp I believe DOM2 Mutation Events have been replaced by DOM4 Mutation Observers in recent builds. Try this article.

shuji Over a year ago

@robertc I dont think they work with resize code.google.com/p/chromium/issues/detail?id=293948

Daniel Darabos Over a year ago

Thanks @robertc! The mentioned issue is now fixed and MutationObserver worked for me. I've added it as an answer.

Arjan Over a year ago

@Boldewyn, somewhere between robertc's nice answer/comment and today, many years later, this has been deprecated: developer.mozilla.org/en-US/docs/Web/Guide/Events/… Care to accept one of the other answers for future readers?

|

Felix · Accepted Answer · 2011-11-10 16:34:17Z

7

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

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.
Poll every 200ms or so (depending on your needs) and compare the current size with the last known size. See setTimeout().

answered Nov 10, 2011 at 16:34

Felix

89.7k44 gold badges152 silver badges168 bronze badges

1 Comment

Boldewyn Over a year ago

Yes, polling and mousemove are valid options, thanks. I thought of them myself. +1 for them. robertc's answer seems more elegant, though.

MMM · Accepted Answer · 2014-09-13 14:37:09Z

3

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+.

answered Sep 13, 2014 at 14:37

MMM

8,4794 gold badges37 silver badges36 bronze badges

Comments

Lee Taylor · Accepted Answer · 2024-10-10 13:07:36Z

0

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 Felix's answer.

Especially useful when combining a custom search result panel with Dev Extreme's 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);
});

edited Oct 10, 2024 at 13:07

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered Feb 21, 2020 at 14:38

MarkBeharrell

8710 bronze badges

Comments

Naftali · Accepted Answer · 2011-11-10 16:35:35Z

-2

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

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

answered Nov 10, 2011 at 16:35

Naftali

147k41 gold badges247 silver badges304 bronze badges

2 Comments

Boldewyn Over a year ago

I thought so, that onresize should fire in this case. I go looking, if there's a bug report over at bugzilla.

Andrew Over a year ago

That MSDN page is for the window.resize event - which fires when you resize the browser window, not an element resize event, when you resize a tag with a css3 resize property through dragging a handle.

Collectives™ on Stack Overflow

How to detect CSS3 resize events

6 Answers 6

5 Comments

8 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

8 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related