spacer

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

home / experts / javascript / column28


The DOCJSLIB's Box Model STYLE

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

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.

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/boxtags.html