I found that I needed to account for items that could expand content beyond the height of the tallest column after the page was loaded. I managed to modify the equal heights code so that the heights of the columns are made equal again when expanding content stretches a column and shrinks the columns back down when that content is collapsed again. It's an ugly hack though.

at-scripts.js

jQuery.fn.equalHeight = function () {
  var height = 0;
  var maxHeight = 0;
  var t = jQuery(this);
  var property = jQuery.browser.msie && jQuery.browser.version < 7 ? 'height' : 'min-height';

  // Store the tallest element's height
  this.each(function () {

    t.css(property, 100 + '%');
    height = jQuery(this).outerHeight();
    maxHeight = (height > maxHeight) ? height : maxHeight;
  });

  // Set element's min-height to tallest element's height
  return this.each(function () {
    var minHeight = maxHeight - (t.outerHeight() - t.height());
    
    t.css(property, minHeight + 'px');
 });
};

equalize-columns.js

$(document).ready(function() {
  $('#content-column, .sidebar').equalHeight();

  $("fieldset.collapsible").mouseout(function(){
    $('#content-column, .sidebar').equalHeight();
    });

  $("li.dhtml-menu").mouseout(function(){
    $('#content-column, .sidebar').equalHeight();
    });

  $("h2.collapsiblock").mouseout(function(){
    $('#content-column, .sidebar').equalHeight();
    });

});

There are two problems with this code.

First, the event used results in a disconnect between the resizing of the columns and the content change that caused that resizing. A click or mouseup event would be preferred, but I had no luck getting that to work.

Second, a function binding must be created for each different item that can expand content. I have shown the three found on my site. It would be better to have one binding and modify the templates for each item so that they can be selected by that single binding.

If somebody could come up with a more elegant solution, this could make a nice addition to the equal heights feature.

Comments

Jeff Burnz’s picture

Status: Active » Closed (won't fix)

Gee, I am really sorry but somehow I overlooked this for a VERY LONG time. I have actually removed this entire feature and in future versions of the Drupal 6 theme I will probably do the same, it always suffered from the very problems you point out and is really a very site or design specific feature, instead I want to replace it with good documentation so its easy to add equal heights to blocks yourself.