 Inside Technique : Scroll Tricks II : Road Map
The table below cross-references the Internet Explorer and Netscape Navigator properties, methods, and events used to create this
example. Notice that both browsers expose the same functionality with different properties and objects.
| IE4 | NS4 | Comments |
|---|
document.body.scrollHeight
document.body.scrollWidth | window.innerHeight
window.innerWidth |
Netscape includes the scrollbars in their calculation of innerHeight and innerWidth. We deduct 20 pixels to cover the approximate size of the scrollbars from Netscape's values. |
document.body.scrollTop
document.body.scrollLeft
document.body.scrollHeight |
window.pageYOffset
window.pageXOffset
document.height |
The scrollTop/ pageYOffset and scrollLeft/pageXOffset properties return the position of the vertical and horizontal scrollbars. The
scrollHeight/ height properties return the actual size of the document. |
| window.onresize | window.onresize |
Both Navigator and Explorer support an onresize event. However, for this example, we do
not use Netscape's onresize event. This is because Netscape does not support the onscroll event. Our work-around
for the onscroll event also covers the onresize event. |
| window.onscroll | setInterval("doScroll()",100) |
Netscape does not have an onscroll event. To simulate the scroll event we create
a timer that checks the scrollbar positions every 100 milliseconds |
| window.scrollBy(x,y) | window.scrollBy(x,y) |
Same functionality in both browsers! |
| document.all | document.layers |
Internet Explorer exposes every element in the document through the all collection.
Netscape only exposes a small subset of the elements through a set of collections (Internet Explorer
supports all of them except the layers collection). Netscape exposes all positioned
elements through the layers collection. Therefore, when scripting positioned elements, the
all collection and the layers collection are very similar. |
element.style.pixelTop
element.style.pixelLeft |
element.top
element.left |
In Internet Explorer, all style information is set through the style property. This style
property represents the CSS style attribute that is available on all elements. Netscape exposes
the position of elements as properties directly on the element.
|
element.offsetWidth
element.offsetHeight |
element.clip.width
element.clip.height |
Internet Explorer exposes the size of the element as calculated by the browser through
the offset* properties. These properties are read-only (to set the size, use the style property).
Netscape offers similar functionality through the clip property.
| | element.style.visibility | element.visibility |
These properties work the same but support different values. Internet Explorer supports
the values defined by the CSS specification (visible, hidden). In Netscape, you use
visible and hidden when creating your style sheet, but when writing script you use the values
show and hidden.
|
As we walk you through the code, you will notice that we dynamically add Internet Explorer's properties
to Netscape and Netscape's properties to Internet Explorer. Once this is done, we always set both properties in a single
statement. This avoids a large amount of browser detection just to set the property values. For example, to set the
location of an element we use code as follows:
myElement.style.pixelTop = myElement.top = newPosition
Next we show you how we extended both object models to enable the above technique.
© 1997-2000 InsideDHTML.com, LLC. All rights reserved. | 