1

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();
});
tadasajon
  • 14,276
  • 29
  • 92
  • 144
  • 2
    _...shows bouncing things and flashing lights and sparkles, etc. This is fantastic and I love it._ This is a joke, right? – Paul Abbott Feb 25 '15 at 23:18
  • @PaulAbbott not a joke -- I am just embracing digital advertising whole-heartedly. – tadasajon Feb 25 '15 at 23:20
  • How about comparing, say, the height of the div to the 'standard' height, and if it's different, do something? – sideroxylon Feb 25 '15 at 23:24
  • Could you just record width/height of div, and periodically check again to see if it is different and then do xyz? – Red Shift Feb 25 '15 at 23:24
  • All the responses that involve periodic checking violate my stated objective of not using polling. – tadasajon Feb 26 '15 at 00:44
  • is this what you want? http://stackoverflow.com/questions/1091661/detect-element-content-changes-with-jquery – Elzo Valugi Feb 26 '15 at 00:49
  • Possible duplicate of [How to detect DIV's dimension changed?](http://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed) – nkron Apr 10 '16 at 15:01

1 Answers1

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

lshas
  • 1,691
  • 1
  • 19
  • 39