How to detect DIV's dimension changed?

Question

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,

Answer 1

You can use iframe or object using contentWindow or contentDocument on resize. Without setInterval or setTimeout

The steps:

1. Set your element position to relative
2. Add inside an transparent absolute hidden IFRAME
3. Listen to IFRAME.contentWindow - onresize event

An example of HTML:

<div style="height:50px;background-color:red;position:relative;border:1px solid red">
<iframe style=width:100%;height:100%;position:absolute;border:none;background-color:transparent allowtransparency=true>
</iframe>
This is my div
</div>

The Javascript:

$('div').width(100).height(100);
$('div').animate({width:200},2000);

$('object').attr({
    type : 'text/html'
})
$('object').on('resize,onresize,load,onload',function(){
    console.log('ooooooooonload')
})

$($('iframe')[0].contentWindow).on('resize',function(){
    console.log('div changed')
})

Running Example

JsFiddle: https://jsfiddle.net/qq8p470d/

---

See more:

• Clay - It's based on element-resize-event
• element-resize-event