Question

Ok. So I’m using the following code to resize a divs height, but as the design is fluid (and I don’t want it fixed). It works well, but once the height changes without reloading the page the height will have the wrong value.

So, I need to add some sort of check if the height have changed and then update it without page-reload. I only want jQuery solutions, please don’t submit any CSS solutions as the script will also be used for divs that are not a child or parent of an other.

    $("#conten_area .sticky_note:has(.right_panel)").each(function (index, value) {
    var $this = $(this);
        current = $this.height();
        current = current+22;

        $this.find(".right_panel").height(current);

});

Answer 1

Following should do what you need. There are no listeners available for changes made by other code, or user interaction, unless you create a custom event and trigger it from the other code to run the resizePanels function.

function resizePanels() {
    $("#conten_area .sticky_note:has(.right_panel)").height( function(index, height) { 
        $this.find(".right_panel").height(height +22);
    });
}

/* resize panels when window resized*/
$(window).resize(function(){
     resizePanels();
})

/* resize panels on page load*/
$(function(){
    resizePanels();

})

​