javascriptdomknockout.jsoracle-jet

detect width change in a div and trigger a function Knockout JS


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

  1. whether the window got resized
  2. or any other reason like a collapsible menu opening up causing x div to decrease in width

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               
});

Solution

  • 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>