Back

Explore Courses Blog Tutorials Interview Questions

How to detect DIV's dimension changed?

0 votes
2 views
in Web Technology by (20.3k points)

I have the following sample HTML, there is a DIV that has 100% width. It contains some elements. While performing windows re-sizing, the inner elements may be re-positioned, and the dimension of the div may change. I'm asking if it is possible to hook the div's dimension change event? and How to do that? I currently bind the callback function to the jQuery resize event on the target DIV, however, no console log is outputted, see below:

<html>

<head>

    <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

    <script type="text/javascript" language="javascript">

            $('#test_div').bind('resize', function(){

                console.log('resized');

            });

    </script>

</head>

<body>

    <div id="test_div" style="width: 100%; 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>

</body>

</html>

1 Answer

0 votes
by (40.7k points)

You can try using the Resize Observer api, available in Chrome 64 like this:

function outputsize() {

 width.value = textbox.offsetWidth

 height.value = textbox.offsetHeight

}

outputsize()

new ResizeObserver(outputsize).observe(textbox)

Width: <output id="width">0</output><br>

Height: <output id="height">0</output><br>

<textarea id="textbox">Resize me</textarea><br>

Related questions

0 votes
1 answer
How to decode HTML entities using jQuery?
asked Sep 5, 2019 in Web Technology by Tech4ever (20.3k points)
0 votes
1 answer
How to move an element into another element?
asked Aug 1, 2019 in Web Technology by Tech4ever (20.3k points)

Browse Categories

© COPYRIGHT 2011-2023 INTELLIPAAT.COM. ALL RIGHTS RESERVED.

Download Salary Trends Now !

Learn how professionals like you got up to 100% Salary Hike.

...