Menu
I've the following sample html, there is a DIV which 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> 
282
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.
To find the width and height of an element, width() and height() methods are used. The width() method is used to check the width of an element. It does not check the padding, border and margin of the element.
A new standard for this is the Resize Observer api, available in Chrome 64.
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>Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API
Spec: https://wicg.github.io/ResizeObserver
Current Support: http://caniuse.com/#feat=resizeobserver
Polyfills: https://github.com/pelotoncycle/resize-observer https://github.com/que-etc/resize-observer-polyfill https://github.com/juggle/resize-observer
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
