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:

• boxID. This is a programmer-defined string that identifies the box in any future references. Your code should manage the boxes of your page through the boxes' IDs.
• htmlFiller. Any content you want to put inside the box. It can be a link you specify via the <A> tag, an image you specify via the <IMAGE> tag, or any other HTML tag.
• boxWidth. The box's width in pixels.
• posFromLeft. The distance in pixels from the left edge of the window to the left side of the box.
• posFromTop. The distance in pixels from the top edge of the window to the top side of the box.
• boxBg. The box's background color. Can be specified as a name ("beige" for example), or in a binary format ("#0000cc" for example).
• boxColor. The box's border color. Can be specified in a similar manner as boxBg's above.
• boxVisibility. Either true (show the box) or false (hide the box).