equal height classes

[alanlee9898]

hi hi!

I have encounter a problem that need to equal height in different classes.

Currently I using this code from cssnewbie:

function equalHeight(group) {
	var tallest = 0;
	group.each(function() {
		var thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
	group.height(tallest);
}

$(document).ready(function() {
	equalHeight($(".contentA"));
	equalHeight($(".contentB"));
});

The scenario is 3 columns boxes need to have an equal height. It has background and content. Left and middle boxes sharing the same class and ID, and the right box has different class and ID. It is 2 row and 3 column.

Now the bottom left and middle are looking fine, but not the right column boxes.

Is it possible to calculate the tallest height - the shortest height, then get the remaining height to add into the shortest height. So it is equal.

Any code I can reference?

Thanks!

[touch_the_sky]

You're not supposed to duplicate ids - that's why you use classes.

What you're trying to do is easily achievable with markup and CSS - no need to involve js for that.

Can't remember but there may be an article(s) on http://www.alistapart.com/ - if not there is plenty other resources out there

[MartinRinehart]

The previous post was right. Using the same ID for two (or more) DOM elements is an error. Unfortunately, it's not the kind of error that reports: "Hey, dummy! You used that ID already! Think up another one!". No such luck. It's an error and it will cause something to go wrong, somewhere, and you'll never know why. Follow two rules:

1) always assign IDs.
2) be darn sure they're never duplicates.

With that fixed, your code (looks like jQuery, right?) is a good example of how much more difficult a library will make things if you don't know JavaScript.

First, to pick the tallest among three things is pretty simple:

var first = document.getElementById( 'first' );
var second = ... // and third, too!

var tallest;
first = tallest; // starting guess
if ( height( second ) > height( first ) ) { second = tallest; }
if ( height( third ) > height( tallest ) ) { third = tallest; }

Now, two problems. How to find shortest? How to write a function, 'height()'.

I'll let you figure out how to find the shortest. Study the above for a minute or so if it's not obvious. Now on to the second.

function height( dom_element ) {
    return dom_element.offsetHeight; 
}

If that's so simple, why a function? Because it's not that simple. Try the following snippet in all the browsers you want to support:

var foo = getElementById( 'anyElementYouLike' );
alert( foo.offsetHeight );

That will fail in one browser, I think. Google 'javascript offsetHeight' for an answer. Improve the 'height()' function per your results.

To make three the same height:

setHeight( first, height(tallest) );
setHeight( second, height(tallest) );
... ditto for third

A function to set an element's height:

function setHeight( element, num_pixels ) {
    element.style.position = 'relative'; // or 'absolute' or 'fixed'
    element.style.height = num_pixels + 'px'; 
}

Style height (remember the box model!) is the content height. The offsetHeight includes padding and borders. You'll want to adjust per your needs. It's like CSS: you need to set 'position' or it will default to 'static' and your 'height' spec will be ignored. (CSS is not my friend. But we're stuck with it. Sorry.)

Gotchas: 'offsetHeight' is not a style. 'offsetHeight' is read-only.

[alanlee9898]

Thanks touch_the_sky for ur advise and also MartinRinehart !

The guide is useful to equal the height with ID.

I will try it out :D

you guys rock!

[alanlee9898]

Now I have duplicates ID in all pages...Its an open source CMS...

Do I have any way to code using classes? like jquery selectors?

thanks

[alanlee9898]

I have solved the problem by assigning unique class to the div without any style.

So the the 3 column boxes will fire the same code even though it is in different IDs.

:)