JavaScript div resize event

There is a very efficient method to determine if an element’s size has been changed. There is a div resize event for <div> elements in JavaScript. You could however use an interval function to watch the state If that changes fire a callback.

JavaScript div resize event

Simple example code.

<!DOCTYPE html>
<html>
<head>
  <script src="css-element-queries/src/ResizeSensor.js"></script>
  <script src="css-element-queries/src/ElementQueries.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div id="divId" style="width: 100px; min-height: 30px; border: 1px dashed pink;">
    <input type="button" value="button 1" />
    <input type="button" value="button 2" />
    <input type="button" value="button 3" />
  </div>

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

</body>
</html>

Output:

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

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

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.

Source: https://stackoverflow.com/questions/6492683

Here’s an example of using the resizeObserver API to detect changes in the dimensions of a div:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Resize Event on Div</title>
  <style>
    #resizableDiv {
      width: 300px;
      height: 200px;
      background-color: lightblue;
    }
  </style>
</head>
<body>

<div id="resizableDiv"></div>

<script>
  const resizableDiv = document.getElementById('resizableDiv');

  // Create a new ResizeObserver
  const resizeObserver = new ResizeObserver(entries => {
    for (let entry of entries) {
      console.log('Div dimensions changed:', entry.contentRect.width, 'x', entry.contentRect.height);
      // You can perform actions when the div's dimensions change here
    }
  });

  // Start observing the resizableDiv
  resizeObserver.observe(resizableDiv);
</script>

</body>
</html>

In this example, the ResizeObserver listens for changes in the dimensions of the resizableDiv. Whenever the dimensions change, it logs the new dimensions to the console. You can modify it to perform any actions you need when the div’s dimensions change.

Remember, the ResizeObserver API might not be supported in older browsers, so you might need to use a polyfill for broader compatibility.

Do comment if you have any doubts or suggestions on this Js event topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.
OS: Windows 10
Code: HTML 5 Version

JavaScript div resize event | Example code