How do I detect when the width of a div with id X changes? I have a function 'wrapLines' which needs to be called whenever this div container's width changes. because of following reasons
Application uses Knockout JS and OJET(Oracle JET). so there is view and viewModel defined for html and respective js. Please help.
I tried to use window.resize like mentioned below but it doesn't work-
$("#" + x).on('resize', function(event) {
//call wrapLines function
});
The code below works but only for case 1. I need case 2 to pass.
$(window).on('resize', function(event) {
//call wrapLines function
});
Use the ResizeObserver
API.
const elem = document.getElementById("element");
let prevWidth;
new ResizeObserver(([change]) => {
if ((prevWidth = change.contentRect.width) == prevWidth) {
console.log(prevWidth);
}
}).observe(elem);
#element {
resize: horizontal;
overflow: hidden;
border: 1px solid black;
}
<div id="element">I can be resized!</div>