Scroll position element properties not documented

RESOLVED WORKSFORME

Status

Documentation
Web Developer
RESOLVED WORKSFORME
14 years ago
11 years ago

People

(Reporter: Ernest Cline, Assigned: Gérard Talbot)

Tracking

(Depends on: 1 bug, {testcase})

unspecified
mozilla1.8final
testcase
Dependency tree / graph

Details

(Whiteboard: http://www.gtalbot.org/BugzillaSection/DocumentAllDHTMLproperties.html, URL)

Attachments

(24 attachments, 4 obsolete attachments)

3.49 KB, text/html
Details
8.05 KB, image/png
Details
8.82 KB, image/png
Details
6.94 KB, image/png
Details
5.75 KB, image/png
Details
5.81 KB, image/png
Details
5.86 KB, image/png
Details
6.65 KB, image/png
Details
6.52 KB, image/png
Details
5.20 KB, image/png
Details
3.95 KB, image/png
Details
4.07 KB, image/png
Details
3.80 KB, image/png
Details
4.37 KB, image/jpeg
Details
4.86 KB, text/html
Details
14.27 KB, image/png
Details
32.47 KB, image/png
Details
6.06 KB, text/html
Details
14.05 KB, patch
Details | Diff | Splinter Review
14.03 KB, patch
Details | Diff | Splinter Review
7.19 KB, patch
Details | Diff | Splinter Review
7.50 KB, patch
Details | Diff | Splinter Review
8.74 KB, patch
Details | Diff | Splinter Review
8.29 KB, patch
Details | Diff | Splinter Review
(Reporter)

Description

14 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.2.1) Gecko/20021130
Build Identifier: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.2.1) Gecko/20021130

The following DOM Level 0 Element properties are not documented, altho they are
in Mozilla.
element.clientHeight
element.clientWidth
element.scrollHeight
element.scrollLeft
element.scrollTop
element.scrollWidth

Reproducible: Always

Steps to Reproduce:
1. Go to the documentation.
2. Look for these properties.


Actual Results:  
No such properties to be found.

Expected Results:  
These properties, which Mozilla does implement should be documented.

Comment 1

14 years ago
-->oeschger.
Assignee: rudman → oeschger

Updated

14 years ago
Blocks: 93108

Comment 2

14 years ago
moving stuff over to an outside-the-firewall email for the time being, looking
for people to pick these Help and doc bugs up for me.
Assignee: oeschger → oeschger

Comment 3

14 years ago
-> Doron
Assignee: oeschger → doronr
(Assignee)

Comment 4

13 years ago
Assigning to me 
Assignee: doronr → drunclear
(Assignee)

Updated

13 years ago
Status: NEW → ASSIGNED
(Assignee)

Comment 5

13 years ago
Here are the references I intend to use for this bug:

http://bugzilla.mozilla.org/show_bug.cgi?id=62536#c109

http://www10.brinkster.com/doctorunclear/HTMLJavascriptCSS/DUWindowsNS6.html

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

http://msdn.microsoft.com/workshop/author/om/measuring.asp

http://www10.brinkster.com/doctorunclear/BrowserBugsSection/MozillaBugs/Bug189308_ScrollEvent.html

                               / Top
                   / client   /  Left
elementReference. /  offset  /   Width
                  \  scroll  \   Height

are often and more widely referred as the DHTML object model properties in books
and references: they originally come from MSDN. window.pageXOffset and
window.pageYOffset came from NS. offsetParent will need to be defined as well.

Interactive examples and instructional image showing the measurements,
illustrating the concepts will be needed to make these pages as useful and
recommendable as they can be.

Another idea is to create a cross-browser interactive demo page like
http://msdn.microsoft.com/workshop/samples/author/css/overview/interactivemeasurement.htm
(Assignee)

Comment 6

13 years ago
oops, I meant
https://bugzilla.mozilla.org/show_bug.cgi?id=62536#c101 not c109
and here, scrollWidth and scrollHeight definitions need to be more accurate.
(Assignee)

Comment 7

13 years ago
scrollWidth, scrollHeight: it is the width/height of the content of an element
according/related to/given for a certain height/width of such element's
viewport. What I mean by this is that if the element height/width is reduced or
increased (while its content remains the same), its scrollWidth/scrollHeight
will be reverse-proportionally increased. I will just add this as a note to the
definition though.

clientWidth, clientHeight. This the width/height of the element's viewport. E.g.
for clientWidth, this equates to offsetWidth - border-left-width -
border-right-width - width of vertical scroll bar (if present). clientWidth,
clientHeight include the padding of the element.
(Assignee)

Comment 8

13 years ago
Created attachment 166439 [details]
Basic CSS and DHTML page

I use this page to create the upcoming images
(Assignee)

Comment 9

13 years ago
Created attachment 166440 [details]
CSS width
(Assignee)

Comment 10

13 years ago
Created attachment 166441 [details]
DHTML clientWidth
(Assignee)

Comment 11

13 years ago
Created attachment 166442 [details]
DHTML offsetWidth
(Assignee)

Comment 12

13 years ago
Created attachment 166443 [details]
CSS height
(Assignee)

Comment 13

13 years ago
Created attachment 166444 [details]
DHTML clientHeight
(Assignee)

Comment 14

13 years ago
Created attachment 166445 [details]
DHTML offsetHeight
(Assignee)

Comment 15

13 years ago
Created attachment 166452 [details]
DHTML clientLeft

If the element has a vertical scrollbar and if the text direction is rtl, then
clientLeft property must include the width of the vertical scrollbar.
(Assignee)

Comment 16

13 years ago
Created attachment 166453 [details]
DHTML clientTop
(Assignee)

Comment 17

13 years ago
Created attachment 167297 [details]
DHTML clientHeight (with vertical scrollbar)
(Assignee)

Comment 18

13 years ago
Created attachment 167298 [details]
DHTML clientWidth (with vertical scrollbar)
(Assignee)

Comment 19

13 years ago
Created attachment 167299 [details]
DHTML offsetHeight (with vertical scrollbar)
(Assignee)

Comment 20

13 years ago
Created attachment 167300 [details]
DHTML offsetWidth (with vertical scrollbar)
(Assignee)

Updated

13 years ago
Attachment #167299 - Attachment description: DHTML offsetWidth (with vertical scrollbar) → DHTML offsetHeight (with vertical scrollbar)
(Assignee)

Comment 21

13 years ago
Created attachment 167301 [details]
DHTML scrollHeight
(Assignee)

Comment 22

13 years ago
Created attachment 167302 [details]
DHTML scrollTop
(Assignee)

Comment 23

13 years ago
Created attachment 167304 [details]
Birman cat image
(Assignee)

Comment 24

13 years ago
Created attachment 167305 [details]
Web page serving as demo
(Assignee)

Comment 25

13 years ago
Created attachment 167306 [details]
Web page serving to create images or serving as demo
Attachment #167305 - Attachment is obsolete: true
(Assignee)

Comment 26

13 years ago
Created attachment 167343 [details]
DHTML scrollHeight (better)
Attachment #167301 - Attachment is obsolete: true
(Assignee)

Comment 27

13 years ago
Created attachment 167344 [details]
DHTML scrollTop (better)
(Assignee)

Updated

13 years ago
Attachment #167302 - Attachment is obsolete: true
(Assignee)

Comment 28

13 years ago
Created attachment 167345 [details]
Interactive and instructional demo on DHTML scrollTop property

This is just one single example of how each of the 

			       / Top
		   / client   /  Left
elementReference. /  offset  /	 Width
		  \  scroll  \	 Height , window.pageXOffset,
window.pageYOffset

could be explained, demonstrated, defined and measured in an HTML document for
best instructional purposes.

The image on the right shows in a static manner the visual representation of
the property.
The div on the left shows an interactive demo of the property.
Not included is the strict textual definition of that scrollTop property with
details (type, value, compatibility support, etc.). 
Note that this demo works in MSIE 6 and also works (or should work) in Opera
7.60 PR3.
(Assignee)

Comment 29

13 years ago
Created attachment 167346 [details]
Interactive and instructional demo on DHTML scrollTop property

(Please ignore previous attachment)

This is just one single example of how each of the 

			       / Top
		   / client   /  Left
elementReference. /  offset  /	 Width
		  \  scroll  \	 Height , window.pageXOffset,
window.pageYOffset

could be explained, demonstrated, defined and measured in an HTML document for
best instructional purposes.

The image on the right shows in a static manner the visual representation of
the property.
The div on the left shows an interactive demo of the property.
Not included is the strict textual definition of that scrollTop property with
details (type, value, compatibility support, etc.). 
Note that this demo works in MSIE 6 and also works (or should work) in Opera
7.60 PR3.
Attachment #167345 - Attachment is obsolete: true
(Assignee)

Comment 30

13 years ago
I've created a meta interactive demo page of what I've done so far. 

http://www.gtalbot.org/Bugzilla/DocumentAllDHTMLproperties.html

The pages for each property would be created with the individual images. There
are several other possible improvements to such meta page and then they can be
transferred, reused in the Gecko DOM Reference pages. 

I think I'll need to redo all the images that involve height since the *Height
images so far do not show any horizontal scrollbar. This is important since
offsetHeight include such scrollbar while clientHeight and scrollHeight exclude
it. I may need to redo all the images anyway for several reasons (consistent
look, way of presenting info, reproducible value and functioning with live
example) and that's the long part. Best is to start with a real existing div
with content so that the info in a static image can be achieved, reproduced with
a real, live, existing <div>.

I don't know when I'll be able to do all the pages involved into this bugfile:
right now, it maybe more than 20 pages since the root element implements some of
those DHTML object model properties differently in MSIE and Mozilla. Note that
there are also window.scrollX, window.scrollY to cover and also offsetLeft,
offsetTop, offsetParent. Right now, my wish would be to fix all this before
march 30th 2005 or so.

I think these new Gecko DOM reference pages (to be created individually) should
be able to convey without javascript useful, meaningful and trustworty
definitions, information about these properties *and* should offer a small
interactive javascript-driven demo, instructional example. If an image is worth
a thousand words, on the web, a good interactive demo is worth a thousand words
and images, I'd say.

I need to document also the bugs which affect the value of such properties and
how they affect these. For instance, rendering of padding-bottom in bug 47710.
Depends on: 62536, 111207
Keywords: testcase
Whiteboard: http://www.gtalbot.org/Bugzilla/DocumentAllDHTMLproperties.html
(Assignee)

Updated

13 years ago
Depends on: 255754
(Assignee)

Updated

13 years ago
Target Milestone: --- → mozilla1.8final
(Assignee)

Comment 31

12 years ago
I uploaded a first document on my site and have requested a review, comments,
feedback:

http://www.gtalbot.org/Bugzilla/OffsetHeight.html

Comment 32

12 years ago
I've read through this bug and the linked/attached test cases and they all look
fine to me.
(Assignee)

Comment 33

12 years ago
I have made some corrections (tweaking, tuning, corrections) to
http://www.gtalbot.org/Bugzilla/OffsetHeight.html
and also uploaded
http://www.gtalbot.org/Bugzilla/OffsetWidth.html
http://www.gtalbot.org/Bugzilla/ClientHeight.html
http://www.gtalbot.org/Bugzilla/ClientWidth.html

Doron: are these files ok for GDR?
(Assignee)

Comment 34

12 years ago
http://www.gtalbot.org/Bugzilla/ScrollHeight.html
http://www.gtalbot.org/Bugzilla/ScrollTop.html
have been added.

I will remove all inline-style and edit css declarations in the <head> section
later.

Comment 35

12 years ago
"...relative to the layout or relative to its offsetParent."

The size (offsetWidth, offsetHeight) is not really relative to the offsetParent.
As a matter of fact there is really no connection between the offsetWidth/Height
and the offsetParent.

I also think that the paragraph with -moz-box-sizing is a bit confusing and I'm
not sure that this paragraph helps people understand and use offset*

clientWidth/Height is often referred to as inner width/height or viewport
width/height. The first sentence in both these are a bit cryptic. A better
alternative (IMHO):

DHTML property that represents the inner height of an element. This includes
possible padding but not scrollbar, border nor margin.
(Assignee)

Comment 36

12 years ago
> The size (offsetWidth, offsetHeight) is not really relative to the offsetParent.

Agreed! I removed reference to offsetParent. Strangely enough, MSDN mentions
that offsetWidth/Height is relative to offsetParent. <shrug>

> I also think that the paragraph with -moz-box-sizing is a bit confusing and I'm
> not sure that this paragraph helps people understand and use offset*

Agreed! Removals done.

> clientWidth/Height is often referred to as inner width/height or viewport
> width/height. The first sentence in both these are a bit cryptic. 

Regarding clientWidth/Height, there is actually a bug in MSIE which Opera and
Mozilla browsers are duplicating, reproducing and it makes the definition
painful to do.

clientWidth could be narrower than the css width and I've tried to render such
possibility in the definition. Anyway, I made some changes in the definitions.
(Assignee)

Comment 37

12 years ago
Created attachment 180804 [details] [diff] [review]
Patch for offsetHeight; revision 1.34 (checked in)

The offsetHeight file is:

http://www.mozilla.org/docs/dom/domref/dom_el_ref18.html

- Converted to HTML 4.01 strict
- removed some 40 markup errors
- everything was upgraded and updated: definition, description, example,
illustration, notes, references, links, etc.

Many thanks to Fantasai for her assistance for the file uploads
(Assignee)

Comment 38

12 years ago
Created attachment 180811 [details] [diff] [review]
Patch for offsetWidth; revision 1.34 (checked in)

The file is:

http://www.mozilla.org/docs/dom/domref/dom_el_ref22.html

- Converted to HTML 4.01 strict
- removed some 37 markup errors in HTML 3.2
- everything was upgraded and updated: definition, description, example,
illustration, notes, references, links, etc.
(Assignee)

Comment 39

12 years ago
Created attachment 180972 [details] [diff] [review]
Patch for clientHeight; revision 1.2 (checked in)


http://www.mozilla.org/docs/dom/domref/clientHeight.html

Many thanks to Fantasai for uploading the file. I re-edited the path of links
and path of images in this patch.

To do: reposition the offsetContainer
(Assignee)

Comment 40

12 years ago
Created attachment 180975 [details] [diff] [review]
Patch for clientWidth; revision 1.2 (checked in)

Many thanks to Fantasai :) for uploading the first patch.

http://www.mozilla.org/docs/dom/domref/clientWidth.html

Re-edited path of links and path of images in the patch.

To do: reposition the offsetContainer accordingly
(Assignee)

Comment 41

12 years ago
Created attachment 180977 [details] [diff] [review]
Patch for scrollHeight; revision 1.2 (checked in)

Many thanks to Fantasai :) for uploading the first patch.

http://www.mozilla.org/docs/dom/domref/scrollHeight.html

Re-edited path of the links and path of images in the patch.

To do: adjust the position of offsetContainer accordingly.
(Assignee)

Comment 42

12 years ago
Created attachment 180978 [details] [diff] [review]
Patch for scrollHeight; revision 1.2 (checked in)

Many thanks to Fantasai for uploading the first patch.

http://www.mozilla.org/docs/dom/domref/scrollTop.html

Re-edited path of links and path of images in the patch.

To do: correct the position of offsetContainer, the form and to initialize the
event listeners accordingly once the page has loaded.
(Assignee)

Comment 43

12 years ago
Today, I got formal approval from Larry Chamberlain of www.best-cat-art.com/ to
include the Birman cat image and its related text description in the example
sections of all DHTML object model properties pages. Larry asked for a link back
to his page and I agreed. So, I updated accordingly each/all of the following pages:

http://www.mozilla.org/docs/dom/domref/clientHeight.html
http://www.mozilla.org/docs/dom/domref/clientWidth.html
http://www.mozilla.org/docs/dom/domref/dom_el_ref18.html
http://www.mozilla.org/docs/dom/domref/dom_el_ref22.html
http://www.mozilla.org/docs/dom/domref/scrollHeight.html
http://www.mozilla.org/docs/dom/domref/scrollTop.html

and

http://developer.mozilla.org/en/docs/DOM:element.clientHeight
http://developer.mozilla.org/en/docs/DOM:element.clientWidth
http://developer.mozilla.org/en/docs/DOM:element.offsetHeight
http://developer.mozilla.org/en/docs/DOM:element.offsetWidth
http://developer.mozilla.org/en/docs/DOM:element.scrollHeight
http://developer.mozilla.org/en/docs/DOM:element.scrollTop

and I will eventually update the scrollHeight.png and scrollTop.png images where
they are used. Eventually, I will use the Birman cat image and related text
description in other DHTML object properties pages 

(to do: clientLeft [lrt and rtl versions], clientTop, offsetLeft, offsetTop,
offsetParent, scrollLeft, scrollWidth and possibly window.pageXOffset,
window.pageYOffset, window.scrollX, window.scrollY,
document.documentElement.scrollLeft, document.documentElement.scrollTop, etc.).

Thank you, Larry :)
Whiteboard: http://www.gtalbot.org/Bugzilla/DocumentAllDHTMLproperties.html → http://www.gtalbot.org/BugzillaSection/DocumentAllDHTMLproperties.html
(Assignee)

Comment 44

12 years ago
> I will eventually update the scrollHeight.png and scrollTop.png images where
> they are used.

Done at: 

http://developer.mozilla.org/en/docs/DOM:element.scrollHeight
http://developer.mozilla.org/en/docs/DOM:element.scrollTop
(Assignee)

Updated

12 years ago
Depends on: 300101
(Assignee)

Updated

11 years ago
(Assignee)

Comment 45

11 years ago
Ernest,

the Gecko DOM Reference is now/has migrated at Mozilla Developer Center. So, it makes no more sense to have a bugzilla file opened for documenting DHTML properties. Anyone, including yourself, can update the files, the properties not defined so far (scrollLeft, offsetTop, offsetLeft, offsetParent, window.pageXOffset and window.pageYOffset) at MDC.

So, I'm resolving this bug as WORKSFORME
Status: ASSIGNED → RESOLVED
Last Resolved: 11 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.