jquery resize listener on a div

Question

This is the situation, I have 2 div\'s next to each other. One div is very dynamic in height, which basically means it can grow and shrink to accommodate for it\'s content.

Answer 1

As the thread poelinca provided suggests, there are some nice plugins available for this functionality.

If you don't like the plugin idea, another simple solution would be to simply trigger a "resize" event on the div whenever the content is modified. Then you could monitor it with resize() as expected, utilizing an elegant observer pattern.

function appendContent($div, content) {
   $div.append(content).trigger($.Event('resize'));
}

$div.bind('resize', function(e) {
   // all your magic resize mojo goes here
});

Answer 2

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

Works like a charm!

I´ve tested attrchange but this was not working, lost 2hours of work :(

Answer 3

The only thing I could think of is having some timer checking the height every X seconds.

Something like this:

function checkHeightTimer(){
    var div1 = $('#div1');
    var div2 = $('#div2');
    var somesize = #somenumber here;
    if(div1.height() > somesize){
        //do something to div2
    }
    setTimeout(checkHeightTimer, 500); //at 500 miliseconds
}