Onresize not triggering on resize

Question

I'm a little confused by the JS onresize and checked out W3schools for this issue. But that brought me even more questions. So I decided to ask it on Stack.

Why exactly is this not getting triggered by this?

So basically:

HTML

<h1>The resize Property</h1>
<div onresize="test()">
  <p>Let the user resize both the height and the width of this div element.</p>
  <p>To resize: Click and drag the bottom right corner of this div element.</p>
</div>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>

CSS

div {
  border: 2px solid;
  padding: 20px;
  width: 300px;
  resize: both;
  overflow: auto;
}

Javascript

function test() {
    alert("Resized");
}

JSFiddle: https://jsfiddle.net/v95yLtxd/

I kind of expected the JS function to be executed on the resizing.

Why is this not working as I expected it to be?

Possible duplicate of [How to detect CSS3 resize events](https://stackoverflow.com/questions/8082729/how-to-detect-css3-resize-events) — Constantin Groß, Jun 05 '19 at 09:43

score 2 · Accepted Answer · answered Jun 05 '19 at 10:09

2

The resize event is fired when the document (not any element) is resized. W3schools is not clear on that. The CSS resize property does not fire resize events.

So this is not the event you are looking for. See Connum's comment for details on resizing your div.

answered Jun 05 '19 at 10:09

Jos

422
4
10

Thanks. I wasn't aware of that! – Falcon Jun 05 '19 at 10:25

Onresize not triggering on resize

HTML

CSS

Javascript

1 Answers1