How to determine and change div height in jQuery

Question

Let me start by saying that due to the complex layout design, I ended up writing a function called equalHeights that basically looks at several divs in my layout and selects the highest value and sets the resting height for this, so I can end up with divs that have equal heights. So basically after loading the page, if you look at the code, you will see that for each div the style = "height: xxx" is applied. I can’t change this, so any solution cannot touch this functionality.

Divs also have an overflow set to hidden, which again has its purpose and cannot change.

So, bearing in mind the above, I need to change the height of the div based on the changes due to user interactivity. For example, I have a table with several hidden rows that expand as the user clicks on the link. The extra length of the table will be hidden due to overflow, I need to increase the size of the div. At the same time, I don’t want to associate this extension with this particular click, I want Javascript to detect changes in the content and expand my div accordingly. The reason I don't want this to be due to the fact that I need it to be implemented on different pages with the same layout, and I don't want to code for each event.

I tried both:

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

and

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

nothing works! Any ideas?

Answer 1

The main resize event can only be attached to $ (window), you need to use the plugin if you want to associate the resize event with a div:

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

Answer 2

You can fire your own div event in a function. This way, it does not force you to overwrite the click functions.

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

Answer 3

Assuming you have a given number of rows, you can check a number greater than this and then change the div accordingly.

Answer 4

  var last_height = $('#div').css('height'); $(window).resize(function() { if($('#div').css('height') != last_height) { last_height = $('#div').css('height'); //do what you want } });