Is there a JavaScript event to detect when the size changes for a div using the CSS3 resize property?

Question

I'm using the CSS3 resize property to create a vertically scrollable div:

.mydiv {
  resize: vertical
  overflow: auto;
}

Chrome puts a little set of diagonal hatches in the bottom right corner of the div which I can now use to resize it.

Is there any way to detect the resize in JavaScript? I've tried using a DOM4 Mutation Observer on the div's attributes but it doesn't fire anything. I can use mouse events on the div but it's hacky (mousedown doesn't fire so I have to listen to all mousemove's and detect if it's near that corner.)

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

It doesn't appear possible to attach an event to the resize using the Chrome textarea handles. Read this: jQuery : Chrome textareas and resize event

I tried using the DOMSubtreeModified but it doesn't modify the DOM so that doesn't work.

--UPDATE-- If you want to use jQuery UI then it is possible. See this: http://jsfiddle.net/kJNsB/1/

$("textarea").resizable({
    resize: function() {
        $("body").append("<pre>resized! Height:"+$(this).height()+" /// Width:"+$(this).width()+"</pre>");
    }
});

--UPDATE-- This guy has it figured out! http://benalman.com/code/projects/jquery-resize/examples/resize/

edited May 23 '17 at 12:28

Community

1
1

answered Jan 06 '14 at 05:47

gfrobenius

3,987
8
34
66

Thanks for the answer but I'm looking for a plain vanilla JavaScript solution. Also, looks like jQuery implements it with polling which seems undesirable. – Skeets Jan 06 '14 at 14:39

score 0 · Answer 2 · answered Jan 06 '14 at 05:56

0

Can you try this,

HTML:

<textarea onresize="Resizing()"></textarea>

Javascript:

function Resizing(){
   console.log("Resizing..");
}

answered Jan 06 '14 at 05:56

Krish R

22,583
7
50
59

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

Right now only window object can have a resize event handler. But you can use getBoundingClientRect() on an element.

https://developer.mozilla.org/en-US/docs/Web/Events/resize

In some earlier browsers it was possible to register resize event handlers on any HTML element. It is still possible to set onresize attributes or use addEventListener() to set a handler on any element. However, resize events are only fired on the window object (i.e. returned by document.defaultView). Only handlers registered on the window object will receive resize events.

There is a proposal to allow all elements to be notified of resize changes.

Is there a JavaScript event to detect when the size changes for a div using the CSS3 resize property?

3 Answers3