How to Detect Div'S Dimension Changed

How to detect DIV's dimension changed?

There is a very efficient method to determine if a element's size has been changed.

http://marcj.github.io/css-element-queries/

This library has a class ResizeSensor which can be used for resize detection.
It uses an event-based approach, so it's damn fast and doesn't waste CPU time.

Example:

new ResizeSensor(jQuery('#divId'), function(){ 
    console.log('content dimension changed');
});

Please do not use the jQuery onresize plugin as it uses setTimeout() in combination with reading the DOM clientHeight/clientWidth properties in a loop to check for changes.
This is incredible slow and inaccurate since it causes layout thrashing.

Disclosure: I am directly associated with this library.

How to detect when the div element width change (not window resize) in JS?

You can use a MutationObserver. Consider the following example that will let you know when the <p> tag is resized manually or when you click the "Resize" button. Any attribute mutation will trigger the observer so you will need to filter by what you want.

const p = document.querySelector("p");const button = document.querySelector("button");
const p$ = new MutationObserver((mutationList, observer) => {  for (mutation of mutationList) {    console.log(mutation);  }});
p$.observe(p, {  attributes: true,  childList: false,  subtree: false});
button.addEventListener("click", () => {  p.style.width = "100px";});

.wrapper {  width: 400px;}
.resizable {  resize: both;  overflow: scroll;  border: 1px solid black;}

<div class="wrapper">  <p class="resizable">Hello</p>  <button>Resize</button></div>

How can I detect when a certain DIV has changed size without polling? I.e., I want a resize event listener?

You could use a window.setInterval, that checks every x ms if the element in question has changed size:

var ElementSize = $("#element").width();
window.setInterval(function(){
    if( $("#element").width() != ElementSize )
    {
        ElementSize = $("#element").width();
        redolayout();
    }
}, 50);

function redolayout()
{
   // Add code here to resize other elements according to the change.
}

Another option: https://github.com/sdecima/javascript-detect-element-resize

detect when div width is change using javascript

You can use on-resize-event like this:

var body = document.getElementsByTagName("BODY")[0];    var width = body.offsetWidth;        if (window.addEventListener) {  // all browsers except IE before version 9      window.addEventListener ("resize", onResizeEvent, true);    } else {      if (window.attachEvent) {   // IE before version 9        window.attachEvent("onresize", onResizeEvent);      }    }        function onResizeEvent() {      bodyElement = document.getElementsByTagName("BODY")[0];      newWidth = bodyElement.offsetWidth;      if(newWidth != width){        width = newWidth;        console.log(width);      }    }

Detect When User Resizes Div With CSS resize: both

You can use MutationObserver for this. Source here.

let observer = new MutationObserver(function(mutations) {
  console.log('Resized');
});

let child = document.querySelector('div');
observer.observe(child, { attributes: true });

div {
  resize: both;
  overflow: auto;
  border: 1px solid;
    width: 200px;
    height: 200px;
    
}

<div>
  Hi!
</div>

Observe size change of element

Have you considered using a ResizeObserver?

// get references to the elements we care about
const div = document.querySelector('.demo');
const button = document.querySelector('button');

// wire the button to resize the div
button.addEventListener('click', () => div.style.width = `${Math.random() * 100}%`);

// set up an observer that just logs the new width
const observer = new ResizeObserver(entries => {
  const e = entries[0]; // should be only one
  console.log(e.contentRect.width);
})

// start listening for size changes
observer.observe(div);

.demo { /* not really relevant. just making it visible. */
  background: skyblue;
  min-height: 50px;
}

<button>Change Size</button>
<div class="demo">Demo</div>

How to detect resize of any element in HTML5

As of July 2020, ResizeObserver is still un-official in W3C nor WhatWG but it is already supported by all major browsers since support Safari 13.1 since 2020-Mar-24.

FYI, there's a spec for a new ResizeObserver API. Chrome seems to be the only browser that has implemented it as of Aug 2018 (see caniuse.com), but there's at least one polyfill you can use now (which uses MutationObserver).

How to Detect Div'S Dimension Changed