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.offsetH eight > first.offsetHei ght) ?
second.offsetHe ight :
first.offsetHei ght;

first.style.hei ght = newheight + "px";
second.style.he ight = 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]

Re: Setting the height of two elements to match each other

Andy Jeffries wrote:
[color=blue]
>
> 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.offsetH eight > first.offsetHei ght) ?
> second.offsetHe ight :
> first.offsetHei ght;[/color]

Try: alert(second.of fsetHeight);ale rt(first.offset Height);alert(n ewheight)
Mick
[color=blue]
>
> first.style.hei ght = newheight + "px";
> second.style.he ight = 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[/color]

[Andy Jeffries]

Re: Setting the height of two elements to match each other

Mick White wrote:[color=blue][color=green]
>> 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.offsetH eight > first.offsetHei ght) ?
>> second.offsetHe ight :
>> first.offsetHei ght;[/color]
>
>
> Try: alert(second.of fsetHeight);ale rt(first.offset Height);alert(n ewheight)[/color]

OK, I get:

123
153
153

If I put the same alerts in after:

first.style.hei ght = newheight + "px";
second.style.he ight = 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]

Re: Setting the height of two elements to match each other

Andy Jeffries wrote:[color=blue]
>
> 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)[/color]

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.infosystem s.www.authoring.stylesheets


--
Rob

[Martin Honnen]

Re: Setting the height of two elements to match each other



Andy Jeffries wrote:

[color=blue]
> 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.[/color]

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.

--

Martin Honnen

http://JavaScript.FAQTs.com/

[Andy Jeffries]

Re: Setting the height of two elements to match each other

Martin Honnen wrote:[color=blue][color=green]
>> 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.[/color]
>
> 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.[/color]

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]

Re: Setting the height of two elements to match each other

Andy Jeffries wrote:[color=blue]
> Martin Honnen wrote:
>[color=green][color=darkred]
>>> 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.[/color]
>>
>>
>> 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.[/color]
>
>
> 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.[/color]

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.pa ddingTop) {
newheight = newheight - parseInt(first. style.paddingTo p);
}
if (first.style.pa ddingBottom) {
newheight = newheight - parseInt(first. style.paddingBo ttom);
}

Cheers,


Andy

[Martin Honnen]

Re: Setting the height of two elements to match each other


Andy Jeffries wrote:
[color=blue]
> 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.[/color]

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.

--

Martin Honnen

http://JavaScript.FAQTs.com/

[Andy Jeffries]

Re: Setting the height of two elements to match each other

Martin Honnen wrote:[color=blue]
>
> Andy Jeffries wrote:
>[color=green]
>> 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.[/color]
>
>
> 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.[/color]

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

Cheers,


Andy

[Martin Honnen]

Re: Setting the height of two elements to match each other



Andy Jeffries wrote:

[color=blue][color=green]
>> Andy Jeffries wrote:
>>[color=darkred]
>>> 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.[/color][/color][/color]
[color=blue]
> http://www.andyjeffries.co.uk/temp/testcase/[/color]

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.




--

Martin Honnen

http://JavaScript.FAQTs.com/

[Andy Jeffries]

Re: Setting the height of two elements to match each other

Martin Honnen wrote:[color=blue]
>
>
> Andy Jeffries wrote:
>
>[color=green][color=darkred]
>>> Andy Jeffries wrote:
>>>
>>>> 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.[/color][/color]
>
>[color=green]
>> http://www.andyjeffries.co.uk/temp/testcase/[/color]
>
>
> 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.[/color]

Doh <embarressed> thanks for that.
[color=blue]
> 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.[/color]

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

* <CvUZe.331596$j 34.81543@fe07.n ews.easynews.co m>

if (first.style.pa ddingTop) {
newheight = newheight - parseInt(first. style.paddingTo p);
}
if (first.style.pa ddingBottom) {
newheight = newheight - parseInt(first. style.paddingBo ttom);
}

[Martin Honnen]

Re: Setting the height of two elements to match each other



Andy Jeffries wrote:

[color=blue][color=green]
>> 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.[/color]
>
>
> 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?[/color]
[color=blue]
> if (first.style.pa ddingTop) {
> newheight = newheight - parseInt(first. style.paddingTo p);
> }
> if (first.style.pa ddingBottom) {
> newheight = newheight - parseInt(first. style.paddingBo ttom);
> }[/color]

CSS is more complex than you seem to think and scripting it is more
complex too than your attempt above.
first.style.css PropertyName
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.pad dingTop
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.pad dingTop
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.pad dingTop
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.current Style and for DOM Level 2 compliant browsers like Mozilla
you need to use document.defaul tView.getComput edStyle as in

function getComputedStyl eValue (element, cssPropertyName ) {
var ownerDocument, defaultView;
if ((ownerDocument = element.ownerDo cument) &&
(defaultView = ownerDocument.d efaultView) &&
defaultView.get ComputedStyle)
{
return defaultView.get ComputedStyle(e lement, '')[cssPropertyName];
}
else if (element.curren tStyle) {
return element.current Style[cssPropertyName];
}
}

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

var results = '';

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

alert(results);






--

Martin Honnen

http://JavaScript.FAQTs.com/

[Andy Jeffries]

Re: Setting the height of two elements to match each other

Martin Honnen wrote:[color=blue]
> CSS is more complex than you seem to think and scripting it is more
> complex too than your attempt above.[/color]

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).
[color=blue]
> first.style.css PropertyName
> 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.[/color]

Ahhh, OK. I thought it would be the computed final style, in the same
way offsetHeight is the final computed height.
[color=blue]
> If you want a computed CSS value on an element then IE supports
> element.current Style and for DOM Level 2 compliant browsers like Mozilla
> you need to use document.defaul tView.getComput edStyle as in[/color]

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

Cheers,


Andy