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

The DOCJSLIB's Box Model: Internal View

The implementation of the box model is given by the body of the makeBox() function:

{
  var padding = (NS4) ? '' : 'padding: 3 0 3 3;';
  var visibility = (boxVisibility) ? 'visible' : 'hidden';
  document.write(
    '<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>',
    '<DIV ID="', boxID, '">',
    htmlFiller,
    '</DIV>'
  );
}

The first line of the function's body sets the box's padding:

var padding = (NS4) ? '' : 'padding: 3 0 3 3;';

Internet Explorer lets you control the box's padding via a four-digit tuple, 3 0 3 3 for example. The semantics of these values is explained in column 14, Pop-out Elements. Netscape Navigator does not let you control its box's padding. The default padding is equivalent to the 3 0 3 3 tuple in Internet Explorer.

The second line of the function sets the box's visibility:

var visibility = (boxVisibility) ? 'visible' : 'hidden';

Between Netscape Navigator, Internet Explorer, and Cascaded Style Sheets, there are so many variations on how to specify visibility and invisibility, that we have decided to let you, the programmer, use true and false instead. When boxVisibility is true, visibility is assigned the value of 'visible'. Otherwise, it is assigned the value of 'hidden'.

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

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