jQuery To Make Coumns Same Height - After Font/Text Change

Question

I am currently working on a responsive design and have some content boxes in three columns. I want all content boxes to be of the same height. So, I did some Google'ing and found several jQuery solutions.

I finally settled on something similar to this:

$(".equal-height").each(function() { 
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
});

$(".equal-height").height(maxHeight);

This works great, except for one issue.

When you resize the window the columns can get wider/skinnier and therefore the text repaginates itself.

The JavaScript appears to not be able to calculate the height of the repaginated text during window resize.

I have found similar issue with window resize and text issues.

Has anyone figured out a solution for this?

I can't believe a responsive design with equal height columns is so hard.

Thanks for any ideas!

Mark

here are some solutions using css http://css-tricks.com/fluid-width-equal-height-columns/, if you use javascript, you wont see changes to the dom during resize, and actually that shouldn't bother you, since responsive design isn't about resizing your desktop browser, is about working on multiple devices. — Orlando, Jun 10 '13 at 16:22
similar question with suggested solutions at http://stackoverflow.com/questions/9143971/using-twitter-bootstrap-2-0-how-to-make-equal-column-heights/14004830#14004830 . While the question relates to a Bootstrap site, at least some of the answers are universal. — David Taiaroa, Jun 10 '13 at 17:14

score 0 · Accepted Answer · answered Jun 10 '13 at 21:33

Okay, I actually finally figure out what I needed.

The final code looks something like this:

// Reset max height for each class
var intMaxHeight = 0;

// We MUST remove all heights from the various DIV elements
// NOTE: If we don't do this then the height will stay the same no matter what 
// after the first call - it will just stay the same as the first intMaxHeight
$(".content-box-content").each(function() {
    $(this).css("height", "");
}); 

// Set the max height of the tallest column
$(".content-box-content").each(function() {
    if (intMaxHeight < $(this).height()) {
        intMaxHeight = $(this).height();
    } else {
        intMaxHeight = intMaxHeight;
    }
});

// Set all columns to the height of the tallest column
$(".content-box-content").each(function() {
    $(this).css("height", intMaxHeight + "px");
});

The key was setting the $(this).css("height", ""); line.

Without that the function just kept using the same height over and over again which made it seem like it was not working.

This now successfully fires "continuously" when the window is resized and the text repaginates itself.

jQuery To Make Coumns Same Height - After Font/Text Change

1 Answers1