DHTML Lab: Dynamic Page Segments; The Stylesheet

Dynamic Page Segments
the dynamic stylesheet

Our technique uses this column's front page as a live example. If you wish to follow the tutorial with the front page visible for reference, you may view it:

in a new window (all)

in-page as an IFRAME
to be inserted at
page top or
page bottom (IE4 only)

When you are done, you may:
close the window or
remove the IFRAME.

In longer script listings, cross-browser code is blue, Navigator-specific code is red, and Explorer code is green.

Border/
Background Color/
Padding
Combinations in Navigator 4:

1.

border-width:2;
background-color:#CCCCCC;
padding:0;

2.

border-width:2;
background-color:#CCCCCC;
padding:5;

3.

border-width:2;
layer-background-color:
  #CCCCCC;
padding:0;

4.

border-width:2;
layer-background-color:
  #CCCCCC;
padding:5;

5.

border-width:0;
background-color:#CCCCCC;
padding:0;

6.

border-width:0;
background-color:#CCCCCC;
padding:5;

7.

border-width:0;
layer-background-color:
  #CCCCCC;
padding:0;

8.

border-width:0;
layer-background-color:
  #CCCCCC;
padding:5;

The External Script

When our script is loaded into our page in the HEAD of our document, it first creates the CSS STYLE rules that define the positioned elements. Two classes of elements are created, segment, for all page segments, and last, for any possible footer. Unlike previous examples of dynamic style creation, this one has several declarations based on conditions:

semi = ";";
styStr = "<STYLE TYPE='text/css'>"
styStr += ".segment{";
styStr += "position:absolute;";
styStr += "visibility:hidden;";
if (NS4) styStr += "width:"  // keep with next line
    + (innerWidth-leftPos-margRight) + semi;
if (borWid > 0) {
  styStr += "border-width:" + borWid + semi;
  styStr += "border-color:" + borCol + semi;
  styStr += "border-style:" + borSty + semi;
}
if (NS4) {
  if (borWid > 0 && padding <= 3)
    styStr += "padding: 0;";
  if (borWid > 0 && padding > 3)
    styStr += "padding:" + (padding-3) + semi;
  if (borWid == 0)
    styStr += "padding:" + padding + semi;
}
else {
  styStr += "padding:" + padding + semi;
}
if (backCol != null) {
  if (NS4) {
    if (borWid > 0 && padding <= 3) {
       styStr +=// keep with next line
         "layer-background-color:" + backCol + semi;
    }
  
    if (borWid > 0 && padding > 3) {
      styStr += "background-color:" + backCol + semi;
    }
  
    if (borWid == 0) {
      styStr +=// keep with next line
        "layer-background-color:" + backCol + semi;
    }
  }
  else {
    styStr += "background-color:" + backCol + semi;
  }
}
styStr += "}";
styStr += ".last{position:absolute;visibility:hidden}";
styStr += "</STYLE>";
document.write(styStr);

The .segment Class

Since we are defining positioned elements, the first two declaration are for position and visibility. We need all our segments to be initially hidden, to allow for their overlapping positioning and footer placement, before the user sees them.

The width property
As we know, Navigator needs to know the wrapping width of an element before it is created. If omitted, it will wrap at the right of the page, but elements with short lines might end up with a narrower width. We need all our elements to have the same width. Also, we need to account for the right margin parameter, which may be used by some of you. Therefore, a value for the width property is mandatory in the style declaration.

For Navigator, we simply take the window's innerWidth, and subtract from that the horizontal space we require on the left (leftPos) and right (margRight).

Explorer can assign a value to the width property at any time, so we will do it programmatically later. If, however, we wanted to assign a value at this time, using the same method as Navigator, it would be difficult, because we cannot yet determine the inner width of the client window. In the past, we have used the Explorer property, document.body.clientWidth, as the equivalent of Navigator's window.innerWidth. This is true, only if the page body has started loading. Navigator bases its property on the window, which, of course, always exists. Explorer bases its property on the page body width, derived from the BODY tag, which in this case, because the STYLE is in the HEAD of the document, has not yet been parsed.

The border property
The border properties, border-width, border-color and border-style are assigned values only if the borWid parameter variable has been given a value greater than 0, in the in-page script earlier.

The padding problem in Navigator

In our previous column, Cross-Browser Hierarchical Menus, we illustrated and discussed the 3-pixel addition to element dimensions when a border is assigned. We also demonstrated the two background color options available, how they affect padding and the final display. If you are not familiar with this problem, please take the time to read the relevant page in the above article. A supplementary illustration is provided in the left column.

In our style definition above, we apply padding to the segment elements, in Navigator, depending on the border variable and the padding variable:

if (NS4) {
  if (borWid > 0 && padding <= 3)
    styStr += "padding: 0;";
  if (borWid > 0 && padding > 3)
    styStr += "padding:" + (padding-3) + semi;
  if (borWid == 0)
    styStr += "padding:" + padding + semi;
}
else {
  styStr += "padding:" + padding + semi;
}

If we have specified a border, then three extra pixels of padding are automatically added, so we add padding only if more than three are called for, and then it is always three less. This will make our Navigator and Explorer elements look the same. If there is no border then padding is added normally.

In the case of Explorer, the padding works as expected.

The background-color problem in Navigator
If we have a border, and want to avoid the three extra pixels being displayed as white space, then we use layer-background-color. If we use padding, then the background color may be "padded" instead of the content. See illustration #3 in the left column. Our rule for Navigator is therefore: Use layer-background-color with no border or with border and padding less than 3. Use background-color with border and padding greater than 3:

if (backCol != null) {
  if (NS4) {
    if (borWid > 0 && padding <= 3) {
       styStr +=// keep with next line
         "layer-background-color:" + backCol + semi;
    }
  
    if (borWid > 0 && padding > 3) {
      styStr += "background-color:" + backCol + semi;
    }
  
    if (borWid == 0) {
      styStr +=// keep with next line
        "layer-background-color:" + backCol + semi;
    }
  }
  else {
    styStr += "background-color:" + backCol + semi;
  }
}

The left column illustrates all the possible combinations. Our script allows only those that will display well. Explorer handles the background-color property as expected.

The .last Class

If we have a footer in our document, we have assigned a class of last to it, as you recall. The only properties necessary are position and visibility. The initial visibility value is hidden, since this element will be the last to be positioned, and the user must be spared unnecessary "jerking" of the elements on-screen as they move to their final positions.

The remainder of our external script contains functions. The first to execute, as we know, is initIt(), called just before the page has finished loading.