How to detect the change in DIV's dimension ? - GeeksforGeeks

31 Oct, 2019
The change in a div’s dimension can be detected using 2 approaches:
Method 1: Checking for changes using the ResizeObserver InterfaceThe ResizeObserver Interface is used to report changes in dimensions of an element.The element to be tracked is first selected using jQuery. A ResizeObserver object is created with a callback function that defines what action should be performed when a change in dimension is detected.The observe() method of this object is used on the element that is to be tracked. This will check for any changes and execute the callback function when any dimension change is detected.
Syntax:
let resizeObserver = new ResizeObserver(() => {    console.log("The element was resized");});  resizeObserver.observe(elem);
Example:
<!DOCTYPE html><html>  <head>    <title>        How to detect DIV’s dimension changed?    </title>    <style>        #box {            resize: both;            border: solid;            background-color: green;            height: 100px;            width: 100px;            overflow: auto;        }    </style></head>  <body>    <h1 style="color: green">      GeeksForGeeks    </h1>    <b>      How to detect DIV’s dimension changed?    </b>    <p>Check the console to know if the div's dimensions have changed.    </p>    <div id="box"></div>    <script src="https://code.jquery.com/jquery-3.3.1.min.js">    </script>      <script>        elem = $("#box")[0];          let resizeObserver = new ResizeObserver(() => {            console.log("The element was resized");        });          resizeObserver.observe(elem);    </script></body>  </html>
Output:
Before resizing the element:
After resizing the element:
Method 2: Checking for changes in dimensions every 500 millisecondsThis method involves checking the dimensions of the element to be tracked every 500 milliseconds. The values of the dimensions are compared with the values of the older iteration to check if there is any difference.
The height and width of the element to be tracked is found out using the height() and width() method in jQuery. These dimensions will be used as the last tracked baseline dimensions of the element and stored in a variable.
A new function is created in which the element’s height and width are found out. This will be the new dimensions which will be compared with the previous ones. An if-statement is used where this new height and width are compared with the previously found baseline. If the dimensions do not match, it means that the dimensions have changed. The required action to be taken when dimensions change would be executed here.The new dimensions found would be assigned to the older ones as a baseline so that the next iteration can be checked with them.The function created is continuously in a loop every 500 milliseconds using the setInterval() function. This will continuously check for the changes in height and width and execute the given function whenever there is a difference.This method is considerably slower than the previous one and decreasing the time between each check would further reduce the performance.
Syntax:
let lastHeight = $("#box").height();let lastWidth = $("#box").width();  function checkHeightChange() {    newHeight = $("#box").height();    newWidth = $("#box").width();      if (lastHeight != newHeight || lastWidth != newWidth) {        console.log("The element was resized");          // assign the new dimensions        lastHeight = newHeight;        lastWidth = newWidth;     } }  setInterval(checkHeightChange, 500);
Example:
<!DOCTYPE html><html>  <head>    <title>        How to detect DIV’s dimension changed?    </title>    <style>        #box {            resize: both;            border: solid;            background-color: green;            height: 100px;            width: 100px;            overflow: auto;        }    </style></head>  <body>    <h1 style="color: green">      GeeksForGeeks    </h1>    <b>      How to detect DIV’s dimension changed?    </b>    <p>Check the console to know if the div's dimensions have changed.    </p>    <div id="box"></div>    <script src="https://code.jquery.com/jquery-3.3.1.min.js">    </script>      <script type="text/javascript">        let lastHeight = $("#box").height();        let lastWidth = $("#box").width();          function checkHeightChange() {            newHeight = $("#box").height();            newWidth = $("#box").width();              if (lastHeight != newHeight ||                lastWidth != newWidth) {                console.log("The element was resized");                  // assign the new dimensions                lastHeight = newHeight;                lastWidth = newWidth;            }        }          setInterval(checkHeightChange, 500);    </script></body>  </html>
Output:
Before resizing the element:
After resizing the element:
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
How to Show and Hide div elements using radio buttons?
How to prevent Body from scrolling when a modal is opened using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills