Creating Cross-Browser DHTML Objects
February 1st 1998
This is a tutorial in how to use DHTML to create a tabbed index card
stack for the 4th generation browsers from Microsoft and Netscape. It's
a three part series covering:
- How to create Cross-Browser (CB) Objects, and a simple test case
using the objects.
- Using CB objects for one index card application which forces all
the content to be preloaded, including all of the index "card"
contents.
- A second index card application using a LAYER element for Netscape
Navigator and an IFRAME element for Microsoft Internet
Explorer, which loads content for each index card, as the tab
for the card is selected.
|
Dynamic HTML (DHTML) is the technology that provides Web developers with the ability
to modify the position or appearance of an HTML element based on some event occurring.
Examples of DHTML include dynamically altering the size of an
HTML element, altering its location within a Web page, or how the element is clipped.
Microsoft introduced DHTML into Internet Explorer with version 4.0 and Netscape
introduced DHTML into Navigator with 4.0. Unfortunately, each company's DHTML
syntax and capabilities differed, a very real problem for Web developers who
have to create pages that work with both browsers.
There is, however, a solution to at least minimize these cross-browser DHTML
differences, the cross-browser objects, and this article provides the
techniques you can use to create your own CB objects. Note that the article covers advanced
JavaScript techniques, and will be easier to follow if you have worked with JavaScript previously.
Creating the HTML Content
Microsoft and Netscape both support a draft W3C specification called
CSS Positioning, or CSS-P, though the actual specification has now
been absorbed into the current effort for CSS2. CSS-P provides style
sheet specifications for positioning a subset of HTML elements within a Web page.
As an example of using CSS-P, the following block of code positions
the header and paragraph enclosed within the DIV block at an absolute position starting
at 100 pixels to the left, and 150 pixels from the top:
<DIV style="position:absolute; left: 100; top: 150">
<H1>The Header</H1>
<p>
The paragraph
</p>
</DIV>
What are the attributes that can be set using CSS-P? First, the
element must specify the position attribute, set to a value
of relative, for relative positioning, or absolute for
absolute positioning.
In addition to setting the position attribute, the Web page developer
can also set the following CSS-P attributes:
- left - element's left position
- top - element's top position
- visibility - whether element is hidden, visible, or inherits its visibility
from the containing element
- z-order - element's position in a stack if elements are layered
- clip - element clipping
- overflow - how overflow contents are handled when the element's height
or width are too small for content
A complete definition of the CSS-P attributes can be found in the
document "Positioning HTML Elements with Cascading Style Sheets" in
the Resources section, below.
Microsoft and Netscape support dynamic dynamic positioning for elements that have
been statically positioned using CSS-P. Netscape also supports dynamic
positioning of LAYER elements.
Each browser supports CSS-P for a different subset of HTML elements, but each does support
equally, CSS-P for DIV and SPAN elements. A DIV element is one which acts
as a container for other HTML content, and which surrounds the
contained content with line breaks. The SPAN element, on the other hand, is meant to
be a container for non-block content, meaning that the content is displayed without
line breaks. As most content that is dynamically altered is usually within a block, rather than
within a line, the cross-browser objects are created from DIV blocks only, at this time.
|
