CODEWITHSUNDEEP
javascripthtmlcss
sanjihan
sanjihan

Reputation: 5992

resize event not triggered on div

Take a look at this example: https://jsfiddle.net/vxun2Lgg/2/

I've attached a resize event listener on container div. After opening up dev tools, and modifying the width of container, resize callback does not get called. What am I missing?

PS: I am not interested in window resize event, only in container div.

var container = document.getElementsByClassName("container")[0];
container.addEventListener("resize", function() {
  console.log("resizing")
});
<div class="container"></div>

Upvotes: 21

Views: 26134

Answers (4)

Almir Campos
Almir Campos

Reputation: 3019

This answer extends the accepted answer by providing a runnable code in pure JavaScript that you can try on the snippet runner (button at the bottom). I kept the explanations directly on the code.

Believe or not, you only need a 3-line function (the onresize function) to simulate the resize event.

Enjoy it!

// This function works like an Event Listener for
// resizing a dom element.
//
// The ResizeObserver calls the callback function
//   whenever the size of the dom_element changes
//   (because it's "observing" the dom_elem)
//
// Do this:
//
//    understand_it_first
//       .then(copy_it)
//       .then(use_it);
//
// THIS IS THE 3-LINE FUNCION YOU WANT TO USE :)
//
const onresize = (dom_elem, callback) => {
  const resizeObserver = new ResizeObserver(() => callback() );
  resizeObserver.observe(dom_elem);
};

// USING IT
//

// Using constants to make it easier to read the code
//
const bb = document.getElementById('bad_boss');
const be = document.getElementById('bad_employee');

// Finally, register the observer for the dom_elem
//
onresize(bb, function () {
  be.style.width  = bb.offsetWidth + 'px';
  be.style.height = bb.offsetHeight + 'px';
});
#bad_boss, #bad_employee{
  font-size        : 32px;
  height           : 200px;
  width            : 200px;
}
  
/* Colors that Talk*/

#bad_boss {
  background-color : #0badb055;
}
#bad_employee {
  background-color : #0b00c0de;
  color            : #0badc0de;
}
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ResizeObserver - onresize Demo</title>
    </head>
    <body>
        <!-- Experiment to resize this <textarea> -->
        <textarea id="bad_boss">Always do whatever I say!</textarea>
        <div id="bad_employee">Always, Boss!</div>
    </body>
</html>

Upvotes: 16

matbou
matbou

Reputation: 159

You can use getBoundingClientRect() on an element. I have included a code sample that uses polling to get the width of a div element and output the result.

let demo = document.getElementById('demo');
let demoInfo = document.getElementById('demo-info');

setInterval(() => {
  let demoSize = demo.getBoundingClientRect();
  demoInfo.innerHTML = demoSize.width;
}, 500);
*{
  box-sizing: border-box;
}

#demo{
  display: flex;
  width:50%;
  
  background-color: red;
  
  padding: 50px;
}
<div id="demo">Demo Div Element</div>
<p id="demo-info"></p>

Upvotes: 2

Matt
Matt

Reputation: 424

I don't think you can.

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

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 (sent to) the window object (document.defaultView). Only handlers registered on the window object will receive events.

What's the end goal? There is probably an alternative.

Upvotes: 4

brunnerh
brunnerh

Reputation: 184376

resize is only valid for the window. If supported you can use ResizeObserver.

new ResizeObserver(() => console.log("resizing")).observe(container);

Otherwise, you will probably have to poll using setInterval and check the size.

Upvotes: 40

Related Questions