Which DOM property for determining vertical size?

[Gregor Kofler]

I want to do my own vertical (or whatever direction) smooth expand of a
block element. The simple approach so far: create and fill container
element. Set element.style.height to 0px, overflow hidden, and use a
timeout callback to increase element.style.height, until it matches
element.scrollHeight. However, scrollHeight is MSDOM. Is there a W3C
compliant alternative? Or a smarter approach altogether?

Gregor

 

[Martin Honnen]

I want to do my own vertical (or whatever direction) smooth expand of a
block element. The simple approach so far: create and fill container
element. Set element.style.height to 0px, overflow hidden, and use a
timeout callback to increase element.style.height, until it matches
element.scrollHeight. However, scrollHeight is MSDOM. Is there a W3C
compliant alternative?

Somewhere in the future it might be an W3C standard:
http://www.w3.org/TR/cssom-view/#scroll-attributes

 

[Thomas 'PointedEars' Lahn]

I want to do my own vertical (or whatever direction) smooth expand of a
block element. The simple approach so far: create and fill container
element. Set element.style.height to 0px, overflow hidden, and use a
timeout callback to increase element.style.height, until it matches
element.scrollHeight. However, scrollHeight is MSDOM. [...]

_MSHTML DOM_. Nevertheless, Gecko/20080404 also supports it in Standards
Compliance Mode, and so do Opera/9.27 and Apple WebKit/525.13.

But, since you would probably want an approach that degrades gracefully, you
could store the `offsetHeight' property value before you resize the element,
if supported. Not standards compliant either, but supposedly better supported.


HTH

PointedEars

 

[Gregor Kofler]

Thomas 'PointedEars' Lahn meinte:

I want to do my own vertical (or whatever direction) smooth expand of a
block element. The simple approach so far: create and fill container
element. Set element.style.height to 0px, overflow hidden, and use a
timeout callback to increase element.style.height, until it matches
element.scrollHeight. However, scrollHeight is MSDOM. [...]

_MSHTML DOM_.

Hmmm... I somehow anticipated this remark. (On developer.mozilla.org
they call it MSIE DHTML object model, MSDN calls it DHTML DOM.)

Nevertheless, Gecko/20080404 also supports it in Standards
Compliance Mode, and so do Opera/9.27 and Apple WebKit/525.13.

But, since you would probably want an approach that degrades gracefully, you
could store the `offsetHeight' property value before you resize the element,
if supported. Not standards compliant either, but supposedly better supported.

I would use offsetHeight, if the element is visible in the beginning.
But since the element gets inserted as an "invisible" (display = "none")
childnode, offsetHeight isn't available (unless I haven't overlooked
something). Showing the element, reading offsetHeight, and turning it
off again isn't an option either, because of the flicker. Hacks like
offscreen-rendering, reading, relocation, etc. is something I try to
avoid. Rather scrollHeight then.

Gregor