如何在不轮询的情况下检测某个DIV的大小已更改？ 即，我想要调整大小的事件监听器？

Question

So I am running ads on a website that I have and one of the ads periodically changes the dimensions of the DIV that it is in -- it grows and shrinks and shows bouncing things and flashing lights and sparkles, etc. This is fantastic and I love it.

One problem, however, is that the layout of other elements on my page is screwed up when this happens.

This is no big deal though -- all I have to do is add an event listener to the DIV element in question and listen for resizing events. When they occur, I will run a callback function that will adjust the layout of the other elements of my site.

My problem is that the resize event listener is only available for the window object itself, not for other elements in the DOM. How can I listen for resizing events on a particular DIV without polling?

I would like to do something like:

$('my-div-id').on('resize', function() {
    do_things();
    adjust_layout();
    etc();
});

Answer 1

You could use a window.setInterval, that checks every x ms if the element in question has changed size:

var ElementSize = $("#element").width();
window.setInterval(function(){
    if( $("#element").width() != ElementSize )
    {
        ElementSize = $("#element").width();
        redolayout();
    }
}, 50);

function redolayout()
{
   // Add code here to resize other elements according to the change.
}

Another option: https://github.com/sdecima/javascript-detect-element-resize