Setting the height of two elements to match each other

[Andy Jeffries]

Hi all,

I want to write a function that given two elements will make their
heights equal to the larger element. I've had a go at it and it works,
but it makes both their heights larger than either of them (but equal)

The code is as follows:

var newheight = (second.offsetHeight > first.offsetHeight) ?
second.offsetHeight :
first.offsetHeight;

first.style.height = newheight + "px";
second.style.height = newheight + "px";


So, I'm obviously doing something stupid, but can anyone enlighten me?
I tried writing to offsetHeight but the changes seemed to be ignored.

Cheers,


Andy

 

[Mick White]

Hi all,

I want to write a function that given two elements will make their
heights equal to the larger element. I've had a go at it and it works,
but it makes both their heights larger than either of them (but equal)

The code is as follows:

var newheight = (second.offsetHeight > first.offsetHeight) ?
second.offsetHeight :
first.offsetHeight;

Try: alert(second.offsetHeight);alert(first.offsetHeight);alert(newheight)
Mick

 

[Andy Jeffries]

Try: alert(second.offsetHeight);alert(first.offsetHeight);alert(newheight)

OK, I get:

123
153
153

If I put the same alerts in after:

first.style.height = newheight + "px";
second.style.height = newheight + "px";

I get:

162
162
153

So, that's my problem. They are now equal in height but as my query
said it makes both of them larger than either was before.

Cheers,


Andy

 

[RobG]

Hi all,

I want to write a function that given two elements will make their
heights equal to the larger element. I've had a go at it and it works,
but it makes both their heights larger than either of them (but equal)

Asking this in a CSS forum, I'm sure they'll have a way to do this (or
at least make it look like it's happening) without any scripting.

Try:

comp.infosystems.www.authoring.stylesheets

 

[Martin Honnen]

Andy Jeffries wrote:

So, that's my problem. They are now equal in height but as my query
said it makes both of them larger than either was before.

The CSS height is not necessarily the same as the offsetHeight, the CSS
height defines the height of the content box and offsetHeight includes
any padding or border space.

Thus if you have
height: 200px
padding: 2px
border-width: 1px
then you could have offsetHeight as
200 + 2 * 2 + 2 * 1 = 206
and if you then set
height: 206px
and don't change the padding and border then you get offsetHeight as
206 + 2 * 2 + 2 * 1 = 212
for instance.

 

[Andy Jeffries]

The CSS height is not necessarily the same as the offsetHeight, the CSS
height defines the height of the content box and offsetHeight includes
any padding or border space.

Thus if you have
height: 200px
padding: 2px
border-width: 1px
then you could have offsetHeight as
200 + 2 * 2 + 2 * 1 = 206
and if you then set
height: 206px
and don't change the padding and border then you get offsetHeight as
206 + 2 * 2 + 2 * 1 = 212
for instance.

OK.

I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

I can fudge this, but I'd really rather understand what's going on.

Cheers,


Andy

 

[Andy Jeffries]

OK.

I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

I can fudge this, but I'd really rather understand what's going on.

And the best bit is, that it doesn't work for one set (expands them by
9px) but my original code does work perfectly for another.

The code I put in is (to see if it worked before doing the same for
border*):

if (first.style.paddingTop) {
newheight = newheight - parseInt(first.style.paddingTop);
}
if (first.style.paddingBottom) {
newheight = newheight - parseInt(first.style.paddingBottom);
}

Cheers,


Andy

 

[Martin Honnen]

I've looked at the Javascript object using the DOM in Mozilla and
apparently there's no padding or border on the object (which sounds
right) but the assigned height still differs by 9px.

Make a minimal test case with valid HTML and CSS and post a URL. If
there is any script to be applied please make a button that calls the
script so that we can look at the static document first in DOM inspector
for instance and then see the result of your script when the button is
clicked.

 

[Andy Jeffries]

Make a minimal test case with valid HTML and CSS and post a URL. If
there is any script to be applied please make a button that calls the
script so that we can look at the static document first in DOM inspector
for instance and then see the result of your script when the button is
clicked.

http://www.andyjeffries.co.uk/temp/testcase/

Cheers,


Andy

 

[Martin Honnen]

Andy Jeffries wrote:

http://www.andyjeffries.co.uk/temp/testcase/

So you are looking at the first inner <div> element in <div
class="first"> respectively <div class="second">?

DOM inspector says that line 221 in main.css gives
padding-top: 4px
padding-bottom: 4px
border-bottom-width: 1px
So that gives you the 9px difference, offsetHeigth is e.g. 128, computed
CSS height is 119px, if you now set the CSS height to 128 the padding
and border is added to the offsetHeight and you get the new offsetHeight
128 + 9 = 137.

That is exactly what I already told you, the CSS padding and/or border
is added to the CSS height/width when offsetWidth/offsetHeigth is computed.

 

[Andy Jeffries]

Andy Jeffries wrote:




So you are looking at the first inner <div> element in <div
class="first"> respectively <div class="second">?

DOM inspector says that line 221 in main.css gives
padding-top: 4px
padding-bottom: 4px
border-bottom-width: 1px
So that gives you the 9px difference, offsetHeigth is e.g. 128, computed
CSS height is 119px, if you now set the CSS height to 128 the padding
and border is added to the offsetHeight and you get the new offsetHeight
128 + 9 = 137.

That is exactly what I already told you, the CSS padding and/or border
is added to the CSS height/width when offsetWidth/offsetHeigth is computed.

But I posted back in a message* that I'd tried that and it didn't work
(at least in Javascript). I can fudge it, but I'd rather ensure the
code is neat.

Any idea what the problem is with the code below?

Cheers,


Andy

* <[email protected]>

if (first.style.paddingTop) {
newheight = newheight - parseInt(first.style.paddingTop);
}
if (first.style.paddingBottom) {
newheight = newheight - parseInt(first.style.paddingBottom);
}

 

[Martin Honnen]

Andy Jeffries wrote:

But I posted back in a message* that I'd tried that and it didn't work
(at least in Javascript). I can fudge it, but I'd rather ensure the
code is neat.

Any idea what the problem is with the code below?

if (first.style.paddingTop) {
newheight = newheight - parseInt(first.style.paddingTop);
}
if (first.style.paddingBottom) {
newheight = newheight - parseInt(first.style.paddingBottom);
}

CSS is more complex than you seem to think and scripting it is more
complex too than your attempt above.
first.style.cssPropertyName
in DOM scripting where first is an element object is not in any way the
computed style value, it is the inline style of the element that you can
set with the inline style attribute or with script and the style
property. So your expression
first.style.paddingTop
reads the inline style and thus gives you a value other than the empty
string only if you have an inline style attribute e.g.
<div style="padding-top: 2px;">
in the HTML markup or your script has already set
first.style.paddingTop
to a value.

If you have CSS rules in a stylesheet (either an embedded stylesheet
(e.g. <style type="text/css">) or an external stylesheet linked in (e.g.
<link rel="stylesheet" type="text/css" href="file.css">) then reading
first.style.paddingTop
does not in any way help to reveal whether any stylesheet rules set a
padding on the element.

If you want a computed CSS value on an element then IE supports
element.currentStyle and for DOM Level 2 compliant browsers like Mozilla
you need to use document.defaultView.getComputedStyle as in

function getComputedStyleValue (element, cssPropertyName) {
var ownerDocument, defaultView;
if ((ownerDocument = element.ownerDocument) &&
(defaultView = ownerDocument.defaultView) &&
defaultView.getComputedStyle)
{
return defaultView.getComputedStyle(element, '')[cssPropertyName];
}
else if (element.currentStyle) {
return element.currentStyle[cssPropertyName];
}
}

var testElements = [document.documentElement, document.body];
var testProperties = ['marginLeft', 'paddingLeft'];

var results = '';

for (var i = 0; i < testElements.length; i++) {
var element = testElements;
results += 'element ' + element.tagName + ':\r\n';
for (var j = 0; j < testProperties.length; j++) {
var property = testProperties[j];
results += ' ' + property + ': ' + getComputedStyleValue(element,
property) + '\r\n';
}
results += '\r\n';
}

alert(results);

 

[Andy Jeffries]

CSS is more complex than you seem to think and scripting it is more
complex too than your attempt above.

I understand CSS fine, I'm absolutely new to DOM scripting (having
absolutely avoided and slated it in the past, I've recently approached
it with an open mind and DHTML Utopia really turned me into a believer).

first.style.cssPropertyName
in DOM scripting where first is an element object is not in any way the
computed style value, it is the inline style of the element that you can
set with the inline style attribute or with script and the style
property.

Ahhh, OK. I thought it would be the computed final style, in the same
way offsetHeight is the final computed height.

If you want a computed CSS value on an element then IE supports
element.currentStyle and for DOM Level 2 compliant browsers like Mozilla
you need to use document.defaultView.getComputedStyle as in

Fantastic, thanks for the code snippet. I'll have a crack with this.

Cheers,


Andy