How to detect and change div height in jQuery

Question

let me start by saying that due to the complicated design of the layout I ended up writing a function called equalHeights which basically looks at several divs in my layout and picks the highest and sets the height of rest to that, so that I can end up with divs that have equal heights. So basically after the page load, if you look into the code you will see style="height:xxx" is applied to each div. This I cannot change so any solution cannot touch this functionality.

The divs also have overflow set to hidden which again has its purpose and cannot change.

So with the above in mind, what I need to do is to be able to change the height of the divs based on changes due to user interactivity. For example I have a table with some hidden rows which get expanded as the user clicks on a link. The extra lenght of the table will then be hidden due to overflow, I need the size of the div to expand. At the same time I don't want to bind this expansion to that specific click, I want Javascript to detect change in the content and expand my div accordingly. The reason I don't want it bind like that is because I need this implemented in different pages with the same layout and I don't want to code for every event.

I have tried both:

$("#myDiv").resize(function(){
    equalHeight($("#myDiv"));
});

and

$("#myDiv").content().resize(function(){
    equalHeight($("#myDiv"));
});

neither seem to work! Any ideas?

Answer 1

The basic resize event can only be bound to $(window), you need to use a plugin if you want to be able to bind the resize event to a div:

http://benalman.com/projects/jquery-resize-plugin/

Answer 2

You can trigger your own div event in function. So, it will not force you to rewrite click functions.

http://jsfiddle.net/JKByC/7/