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. For example, this div has content that can be folded open or close, or containers that can expand to fit ajax loaded content.
Now, next to this div is another one that neatly follows the height of the first one through css. Works great. But here is the question: I would like to change the content of this second div depending on its height.
In other words, div 1 changes in size, div 2 follows through css and I now need to trigger an ajax call to re-fill div 2 with new content, befitting it's new size.
Has anybody an idea how I can do this with jquery? If possible, without the use of timeouts?
Cheers.
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 });
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 }
