spacer

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

home / experts / javascript / column28


The DOCJSLIB's Box Model STYLE

Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans

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


The Network for Technology Professionals

Search:

About Internet.com

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

webref The latest from WebReference.com Browse >
Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger


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

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