Introducing DOCJSLIB 2.0, The Box Model: Internal View - Doc JavaScript | WebReference

Introducing DOCJSLIB 2.0, The Box Model: Internal View - Doc JavaScript


The DOCJSLIB's Box Model: External View

Version 1.0 included a single DHTML element model that is built out of an <IMAGE> tag, which is positioned within an <A> tag, which in turn is positioned within a <DIV> tag. This model, which we introduced in our previous column, Introducing DOCJSLIB, A Cross-Browser JavaScript Library, supported mouse clicks within the image area.

In this column, we introduce a second, much-simpler DHTML element model. It consists of just a <DIV> tag. As we explained in our previous column, the <DIV> tag is a good cross-browser tag, because it implies similar semantics for both browsers. The deficiency of the <DIV> tag is that it supports the onClick event handler only on Internet Explorer. Our box model does not support any event handling capabilities and thus the plain <DIV> tag suffices. To support the onClick event handler on Netscape Navigator, we had to add the <IMAGE> tag inside the <A> tag, which is inside the <DIV> tag.

The DOCJSLIB box model is a rectangular container with a colored border. It can contain any HTML tags. Links and images are the most popular ones. The DOCJSLIB box is created by calling the makeBox() function. Its definition reveals the box' parameters you can control:

http://www.internet.com


Created: October 26, 1998
Revised: October 26, 1998

URL: http://www.webreference.com/js/column28/boxout.html