Menu
Take a look at this example: https://jsfiddle.net/vxun2Lgg/2/
I've attached an "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>
473
Answer: Use the addEventListener() Method You can simply use the addEventListener() method to register an event handler to listen for the browser window resize event, such as window. addEventListener('resize', ...) . The following example will display the current width and height of the browser window on resize.
The onresize event occurs when the browser window has been resized. Tip: To get the size of an element, use the clientWidth, clientHeight, innerWidth, innerHeight, outerWidth, outerHeight, offsetWidth and/or offsetHeight properties.
The resize event fires when the document view (window) has been resized. This event is not cancelable and does not bubble. In some earlier browsers it was possible to register resize event handlers on any HTML element.
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>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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
