Prev: TextArea Horizontal Scrolling
Next: Inheritance Chain
From: liketofindoutwhy on 24 Apr 2008 05:17

for the code

var node = document.getElementById("something")
alert(node.offsetWidth)

is very similar to node.clientWidth and node.scrollWidth

I just wonder why offsetWidth is well documented in the Definitive
Javascript book, but clientWidth and scrollWidth are not mentioned at
all, even when all 3 of them work in IE6, IE 7, Firefox 2, and Safari
3.

Also it seems that scrollWidth is always the same as offsetWidth. I
can't make them different by hiding some part of that element so that
one value is smaller and one is larger.

Thanks very much!

From: Rik Wasmus on 24 Apr 2008 05:35
On Thu, 24 Apr 2008 11:17:42 +0200, liketofindoutwhy
<liketofindoutwhy(a)gmail.com> wrote:

>
> for the code
>
> var node = document.getElementById("something")
> alert(node.offsetWidth)
>
> is very similar to node.clientWidth and node.scrollWidth
>
> I just wonder why offsetWidth is well documented in the Definitive
> Javascript book, but clientWidth and scrollWidth are not mentioned at
> all, even when all 3 of them work in IE6, IE 7, Firefox 2, and Safari
> 3.
>
> Also it seems that scrollWidth is always the same as offsetWidth. I
> can't make them different by hiding some part of that element so that
> one value is smaller and one is larger.

I have no intimate knowledge of the subject, but making them all 3
different is no trouble at all:
<html>
<head><title>test</title>
<script type="text/javascript">
function test(elm){
alert('offsetwidth:' + elm.offsetWidth + ', scrollWidth: '
+ elm.scrollWidth + ', clientWidth: ' + elm.clientWidth);
}
</script>
</head>
<body>
<div onclick="test(this)"
style="display:block;width:8em;height:3em;overflow:scroll;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
</div>
</body>
</html>
Results (FF2)here: 128, 477,112; I suspect, but feel free to correct me:

offsetWidth: width on page
scrollWidth: total width of element from left to right (so in this case
scrollable content).
clientWidth: visible portion of width due to existance of scrollbar.
--
Rik Wasmus
From: Joost Diepenmaat on 24 Apr 2008 06:03
liketofindoutwhy <liketofindoutwhy(a)gmail.com> writes:

> for the code
>
> var node = document.getElementById("something")
> alert(node.offsetWidth)
>
> is very similar to node.clientWidth and node.scrollWidth
>
> I just wonder why offsetWidth is well documented in the Definitive
> Javascript book, but clientWidth and scrollWidth are not mentioned at
> all, even when all 3 of them work in IE6, IE 7, Firefox 2, and Safari
> 3.

Last time I checked, only the offset* attributes were reliable in all
popular browsers. This may have changed, though. See

http://www.quirksmode.org/viewport/elementdimensions.html

> Also it seems that scrollWidth is always the same as offsetWidth. I
> can't make them different by hiding some part of that element so that
> one value is smaller and one is larger.

Scrollwidth isn't about hiding per se, it's about having a content area
wich is scrolled inside an area that's smaller. IOW, it's using
overflow: auto / srcoll.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
From: liketofindoutwhy on 24 Apr 2008 06:22
On Apr 24, 2:35 am, "Rik Wasmus" <luiheidsgoe...(a)hotmail.com> wrote:
> I have no intimate knowledge of the subject, but making them all 3
> different is no trouble at all:


if it is

<html>
<head><title>test</title>
<script type="text/javascript">
function test(elm){
alert('offsetwidth:' + elm.offsetWidth + ',
scrollWidth: '
+ elm.scrollWidth + ', clientWidth: ' + elm.clientWidth);
}
</script>
</head>
<body>
<div style="display:block;width:8em;height:
3em;overflow:scroll;">
<img onclick="test(this)" src="http://
www.sanrio.co.jp/english/characters/w_chara/pocha180.gif"
</div>
</body>
</html>

then the offsetWidth and scrollWidth is the same... so it looks like
scrollWidth reflects an element with a scroll box, not an element
contained in a scrollbox.

From: liketofindoutwhy on 24 Apr 2008 06:25
On Apr 24, 3:22 am, liketofindoutwhy <liketofindout...(a)gmail.com>
wrote:
> On Apr 24, 2:35 am, "Rik Wasmus" <luiheidsgoe...(a)hotmail.com> wrote:
>
> then the offsetWidth and scrollWidth is the same... so it looks like
> scrollWidth reflects an element with a scroll box, not an element
> contained in a scrollbox.

i mean reflects something different for an element with a scrollbox,
nothing different for an element simply being inside the scrollbox.

 |  Next  |  Last
Pages: 1 2
Prev: TextArea Horizontal Scrolling
Next: Inheritance Chain