spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column28


The DOCJSLIB's Box Model: Internal View

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

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'.

http://www.internet.com

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business


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

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