Inside Technique : DHTMLLib 2.0 : DHTMLLib Roadmap

DHTMLLib is a JavaScript based compatibility layer. To use, you need to include the DHTMLLib2.js script on your page. The following enables the library on your page:

<script language="javascript1.2" src="dhtmllib2.js">
  // This library handles the cross-browser magic.
</script>

The library does its magic after the page loads. Therefore, you need to make sure your scripts don't execute until after the onload event occurs. While we automatically set-up the onload event in the library, if you write your own onload event handler, you need to manually call the setup function on behalf of the library:

<SCRIPT language="javascript1.2">
  function doLoad() {
    setup() // Manually initialize the library
    // ...do whatever you want...
  }

  window.onload = doLoad;
</SCRIPT>

Reference

The DHTMLLib reference lists the set of properties, methods, and events supported by both Netscape Navigator and Internet Explorer. DHTMLLib is based on created an Internet Explorer object model in Netscape, This reference is therefore a subset of the support provided by Internet Explorer DHTML. Furthermore, this reference does not list the existing JavaScript 1.1 objects that are supported by both browsers except those that have special conditions with their use..

Window Members

Document Members

Positioned Element Members

A positioned element is an element that has the css position property set to either absolute or relative.

Events	onmousedown
	onmousemove
	onmouseup
	onkeydown
	onkeypress
	onkeyup
Properties	innerHTML	This is a read-write property that you can use to replace the contents of an element. Be sure to read the innerHTML Usage Notes for more information on this property.
	offsetTop	Read-only property returns the top position of the element.
	offsetLeft	Read-only property returns the left position of the element.
	offsetWidth	Read-only property returns the width of the element.
	offsetHeight	Read-only property returns the height of the element.
	style	Returns a style object that allows you to set the position of the element.
	offsetParent	Returns the positioned element or body element that the positioned element is relative to.
	all	Returns a collection of all the named positioned elements, images, forms, and input controls contained by the element. Be careful when using this collection for cross-browser development as Internet Explorer uses this collection to expose every element in the document. Only use this collection for lookup based on the ID or NAME of the positioned elements. Ordinal access (eg., document.all[10]) will return different results between browsers.
	id	Returns the ID of the element

Style Object

The style object allows you to modify the position, visibility, and background color of positioned elements.

Properties	backgroundImage	Read-only property that returns the URL of any background image being displayed.
	backgroundColor	Read-write property that sets or returns the background color of the positioned element.
	visibility	Read-write property that returns whether or not the element is visible. Valid values are "visible" and "hidden".
	pixelTop pixelLeft pixelWidth pixelHeight	Read-write properties that sets or returns the size and position of the positioned element in pixels.
	clip	Read-write property that sets or returns the clip-rect of the positioned element. The clip property takes strings of the following format rect(top right bottom left). The property parser does no error checking of the string.
	zIndex	Read-write property that sets or returns the z-index of the positioned element.

Body Members

A HREF="..." Members

The following properties are added to all A HREF="..." elements.

Properties	offsetTop offsetLeft	Read only property representing the position of the anchor or image.
	innerText	Returns the text within the anchor. In Netscape, this only returns the correct value if the link does not contain any extra HTML markup.
	offsetParent	Returns the positioned element or body element that the link is relative to.

IMG Members

The following properties are added to all IMG.

Properties	offsetTop offsetLeft offsetWidth offsetHeight	Read only property representing the position and size of the image.
	tagName	Returns "IMG"
	offsetParent	Returns the positioned element or body element that the image is relative to.

Input Controls

The following properties are added to the input controls.

Properties	tagName	Returns "TEXTAREA","INPUT", or "SELECT" depending upon the input type.
	offsetParent	Returns the positioned element or body element that the input element is relative to.

Form Element

The following properties are added to the input controls.

Properties	tagName	Returns "FORM".
	offsetParent	Returns the positioned element or body element that the form is relative to.

Event Object Members

Usage Notes

onload Event

The library automatically calls the setup() function when the page finishes loading. Therefore, you need to ensure your scripts are not called until the library is initialized. In addition, if you write your own onload event, you need to call the setup() function manually:

<SCRIPT>
function doLoad() {
  setup() // setup the library
  // do custom load
}
window.onload = doLoad;
</SCRIPT>

innerHTML Property

The innerHTML property is used to replace the contents of positioned DIV and SPAN elements. This property does not work if the positioned element is a TABLE.

If you read the innerHTML property before a value is ever assigned, you will not get the displayed contents in Netscape Navigator. Instead, you will be returned an empty string. In Internet Explorer, this property always represents the contents. Once a value is assigned to innerHTML, reading the property value works the same in both browsers.

Event Model

DHTMLLib exposes a limited event bubbling model in Netscape Navigator compared to Internet Explorer. In Internet Explorer, all elements in your document bubble. In Netscape, bubbling is limited to the following elements:

• input
• textarea
• select
• img
• a
• positioned DIV, SPAN, and TABLE elements

This difference can cause different elements to act as the event source causing the srcElement property to return different objects. For example:

  <A HREF="home.htm"><EM>Go Home</EM></A>

In the above HTML, if the user clicks on "Go Home", the srcElement property returns the EM element in Internet Explorer while Netscape Navigator returns the A element.

You also need to be aware of scoping differences when writing event handlers as HTML attributes. In Netscape, when writing an event handler in element inside of a positioned element, the document object resolves to the psuedo-document inside of the layer, not the actual document on the page. For example:

  <DIV ID="demoLayer" STYLE="position: absolute">
    <A ONMOUSEOVER="document.images['foo'].src = 'zam.gif'" HREF="#">
      Test
    </A>
  </DIV>

In Internet Explorer, the above script will locate and change the source of the image "foo" regardless of whare it is in the document. In Netscape, the above line is scoped to only work with the contents within the positioned layer, demoLayer. DHTMLLib works on your behalf to hide the hierarchical nature of layers and can give you Internet Explorer's behavior as long as you are more explicit in your scripts. By adding an explicit reference to window, you are ensured of getting the top-level document object:

  <DIV ID="demoLayer" STYLE="position: absolute">
    <A ONMOUSEOVER="window.document.images['foo'].src = 'zam.gif'" HREF="#">
      Test
    </A>
  </DIV>

Key and Scroll Events

Internet Explorer 4.0 for the Macintosh does not support the keyboard or scroll events. Also, the scrollHeight property on the Macintosh returns the same value as the clientHeight properties. Therefore, the Macintosh version of Internet Explorer cannot do key or scroll tracking.

Internet Explorer Optimization

This library is does not do anything in Internet Explorer. With the following script, you can make this library load only in Netscape Navigator. The advantage to this approach is that Internet Explorer users do not have to download the library code:

<SCRIPT language="javascript1.1">
<!--
 var ie4 = (document.all)

 if (!ie4)
  document.write("<" + "script SRC=\"../dhtmllib2.js\"><\/script>")
 else
  setup = new Function()
// -->
</SCRIPT>

Note that you cannot specify JavaScript 1.2 as the language. Netscape Navigator apparently treats the document.write differently in 1.2 causing script errors. In addition, we split the written script tag into two parts to avoid potential ASP script errors. When used in an ASP page you can get a nested SCRIPT tag error. Last, the empty setup function is created so you don't have to do any additional browser detection when calling setup() from an onload event handler.

[How DHTMLLib Works]

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.