Question

I’m trying to dynamically change the height of a div container based on the content loaded into it with jQuery.load(). I’ve tried many different ways of arranging the code, searched and viewed many posts here and read through the documentation on jQuery. My function works if I run it in the firebug console after page load but not when the code is saved and loads with the page. The console outputs “0” for all the table heights if the script is run by the page, but it gives the proper heights when I run it in firebug.

The code is below. Basically, it’s a user-defined page where I’ve pasted this script and the div #element4 sits within jQuery a jQuery tab. Can you spot an error in my code or help me get it working?

$("#element4").load("<dbid>?act=API_GenResultsTable&qid=8", function(response, status, xhr) {
 if (status == "success") {
    $('#element4 table').each( function(x, y){
    var max_height = 0;  
    var yHeight = $(y).height();
    max_height = ( yHeight > max_height) ? yHeight : max_height;
    $('#element4').height(max_height);
    console.log(max_height);
  });
  }
 });

Answer 1

You are resetting max_height to zero for each table. Try moving that out of the each loop, along with the eventual setting of the height:

var max_height = 0; // init max
// find tallest table
$('#element4 table').each(function(x, table) {
    var yHeight = $(table).height();
    max_height = (yHeight > max_height) ? yHeight : max_height;
});
$('#element4').height(max_height); // set height
console.log(max_height);