Introducing DOCJSLIB Version 2.0, The Box Model's STYLE - Doc JavaScript

The DOCJSLIB's Box Model STYLE

The third line of the makeBox() function outputs the HTML tags. First is the Cascaded Style Sheet:

'<STYLE TYPE="text/css">',
    '#', boxID, ' {',
      'position: absolute;',
      'left: ', posFromLeft, '; top: ', posFromTop, ';',
      'width: ', boxWidth, ';',
      'layer-background-color: ', boxBg, ';',
      'background-color: ', boxBg, ';',
      'visibility: ', visibility, ';',
      'border-width: 2;',
      'border-style: solid;',
      'border-color: ', boxColor, ';',
      padding,
      'z-index: 1',
    '}',
'</STYLE>'

The <STYLE> tag specifies some generic appearance attributes. The Style Sheet is labeled by the box ID, boxID. Any reference to this <STYLE> tag is made via this label. The rest of the <STYLE> tag specification is a list of attribute-value pairs, already discussed above. Worth mentioning here is the z-index attribute. It sets the box's 3-dimensional position of the box. This version of DOCJSLIB positions all boxes at the first level. Future versions will support multiple initial levels.

Last, we write the <DIV> tag:

    '<DIV ID="', boxID, '">',
    htmlFiller,
    '</DIV>'

You see that the DIV's ID is assigned the programmer-given string, boxID. This is also the <STYLE> tag's ID. The content of the DIV container is an HTML tag or a group of such tags, htmlFiller. The following tags are an example for this htmlFiller:

<A HREF="/js/column1/">Column 1</A><BR>

Notice that the box model is a static one. There is no support for mouse clicking or any other event handler.

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

URL: https://www.webreference.com/js/column28/boxtags.html