How to detect the change in DIV’s dimension ?

The change in a div’s dimension can be detected using 2 approaches:

Method 1: Checking for changes using the ResizeObserver Interface
The 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:



filter_none

edit
close

play_arrow

link
brightness_4
code

let resizeObserver = new ResizeObserver(() => {
    console.log("The element was resized");
});
  
resizeObserver.observe(elem);

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
  
    <script>
        elem = $("#box")[0];
  
        let resizeObserver = new ResizeObserver(() => {
            console.log("The element was resized");
        });
  
        resizeObserver.observe(elem);
    </script>
</body>
  
</html>

chevron_right


Output:

  • Before resizing the element:
    output-observer-before
  • After resizing the element:
    output-observer-after

Method 2: Checking for changes in dimensions every 500 milliseconds
This 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

  • Before resizing the element:
    output-interval-before
  • After resizing the element:
    output-interval-after


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.