We handle the browser differences through a set of utility functions for:
For detecting browser capabilities we use a technique called object capabilities detection. This works by checking for the existance of a property or method. If the member exists, it is used, otherwise alternative code is run.
To distinguish between IE4 and NS4, we cache whether or not the all collection exists. In IE4,
the all collection contains a reference to every element in your document. Netscape does not have
any equivalent support for accessing all elements. Instead, you can access a small set of elements
through different collections. In this technique, we are working with positioned elements so we
use the layers collection in Netscape. The check for all collection support is handled by
comparing the all property to null:
Later in our code, we check if the
Retrieving a Positioned Element
This is our favorite function that is used in almost all of our cross-browser
examples. It is a simple function that takes an ID and returns a reference to the corresponding
positioned element. This function is used each time we need to reference the tooltip window.
Hiding and Showing Positioned Elements
Each time the mouse enters a link, we display the tooltip window underneath the
element. When the mouse leaves the link, we hide the element. We created a setVisibility() function
that takes the element to display (retrieved using the getElement function above), and a boolean
value that represents hiding or showing the element:
In Internet Explorer 4.0, every elements in-line style is exposed through a style object. Think of the style object as representing the HTML style attribute, and the properties representing the in-line style properties set on the element. Every CSS related property in IE4's Dynamic HTML share the same values as in the CSS specification.
Netscape Navigator 4.0 exposes only a very few style related properties. These properties are exposed on the element itself and they often do not correspond directly to their CSS counterparts. In this example, when hiding and showing, you need to recognize that scripts use the value "show", while authoring a style sheet would use the value "visible".
Now you have the basics for referencing and hiding and showing positioned elements. Next we continue with how to position and replace the contents of positioned elements.
© 1997-2000 InsideDHTML.com, LLC. All rights reserved.