...

View Full Version : Need help with column height script



gilgimech
11-18-2010, 09:24 PM
I'm trying to make a script that will check which of the two column heights is greater, make both equal to the greater height, then apply that height to the content wrapper.

here's that I have so far...



$(document).ready(function () {
var rColumnHeight = $('#right_column').css('height');
var lColumnHeight = $('#left_column').css('height');
if (lColumnHeight > rColumnHeight) {
$('#body_content').css('height', lColumnHeight)
}else if(rColumnHeight > lColumnHeight ){
$('#body_content').css('height', rColumnHeight)
}
});


Now this seems to work making the content wrapper's height equal to the greater column height, but I can't figure out how to make the two columns equal heights.

Any help would be appreciated.

harbingerOTV
11-18-2010, 11:57 PM
You were almost there. Since you have the 'ifs' and the variables all set, you just need one more line for each column to change the height.



$(document).ready(function () {
var rColumnHeight = $('#right_column').css('height');
var lColumnHeight = $('#left_column').css('height');
if (lColumnHeight > rColumnHeight) {
$('#body_content').css('height', lColumnHeight);
$('#right_column').css('height', lColumnHeight);
} else if (rColumnHeight > lColumnHeight ){
$('#body_content').css('height', rColumnHeight);
$('#left_column').css('height', rColumnHeight);
}
});

You probably want to add another line so that if the columns are equal, the body_content still gets a height applied:


$(document).ready(function () {
var rColumnHeight = $('#right_column').css('height');
var lColumnHeight = $('#left_column').css('height');
if (lColumnHeight > rColumnHeight) {
$('#body_content').css('height', lColumnHeight);
$('#right_column').css('height', lColumnHeight);
}
if (rColumnHeight > lColumnHeight ){
$('#body_content').css('height', rColumnHeight);
$('#left_column').css('height', rColumnHeight);
}
if (rColumnHeight == lColumnHeight ){
$('#body_content').css('height', rColumnHeight);
}
});

Spudhead
11-19-2010, 11:36 AM
I might be way wrong here, but I'm sure I read that that css() carries a bigger performance overhead than the width() and height() functions. If so, it might be slightly quicker to write it as:


$(document).ready(function () {
var r = $('#right_column').height();
var l = $('#left_column').height();
var maxheight = (r >= l) ? r : l;
$('#right_column, #left_column, #body_content').height(maxheight);
});

gilgimech
11-19-2010, 02:06 PM
I might be way wrong here, but I'm sure I read that that css() carries a bigger performance overhead than the width() and height() functions. If so, it might be slightly quicker to write it as:


$(document).ready(function () {
var r = $('#right_column').height();
var l = $('#left_column').height();
var maxheight = (r >= l) ? r : l;
$('#right_column, #left_column, #body_content').height(maxheight);
});

Sweat, right or not it worked thanks. I tried to tweak it with the .css(), but it didn't work.

I'm new to jQuery and sometimes the most logical things don't seem to work. It's kinda weird.

Like the line of script harbingerOTV suggested. I've tried that before too. It just seems to break the code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum