DHTML Lab: Dynamic Headline Fader; Navigator

Dynamic Headline Fader
faking a blend in Navigator 4

Navigator does not presently support transition filters, so we have two options:

• simply update the contents of elNews and have one headline instantly replace another. This method is discussed in detail in Doc JavaScript's Rotating Text Banners.
• fake a transition, using methods available to Navigator.

We, of course, select the second option.

First create a two-color GIF image. One color must be the same as the fader background. The other color can be anything, but it must be designated transparent. The transparent color must be scarce on one horizontal edge (top or bottom) and increase steadily in density moving toward the opposite edge. Consider these two examples:

  
black is transparent       gray is transparent

The above images are not transparent for demonstration purposes,
nor should they have a border.

If we place this transparent image over our headline, it will block full visibility of the text. If we then move the image down incrementally, more of the text will become visible through the transparent parts of the image. Depending on the type of image used, a particular transition effect will be achieved. For example, the first image above gives us a speckled transition, the second a blind transition.

If you are using Navigator 4, glance at the in-page example to the left, above. This time the image used has no transparency, to easier demonstrate the technique.

With transparency, our headline looks like this, at different stages of the effect:

1.   2.   3.   4. 

1. placed over headline.
2. moved down 10 pixels.
3. moved down 20 pixels.
4. moved down 30 pixels.

Our image is exactly the same size as our fader box. This makes our routine a little easier. You can modify the routines to accomodate larger image heights for smoother transitions.

Credit: This Navigator effect was first viewed at the Taboca Entertainment Technology Corporation website, in a LAYERs version, named "Transpray."

A New CSS Element

Our GIF can be moved dynamically, only if it is enclosed in a CSS-positioned element. This new element, elGif, is nested in elAll, the fader container element.

The Navigator-specific stylesheet, therefore, becomes:

<STYLE TYPE="text/css">
<--
#elAll {
    position: relative;
    width: 130;
    layer-background-color: white;
    clip: rect(0 130 40 0);
}
#elNews {
    position: absolute;
    width: 130;
    layer-background-color: white;
    clip: rect(0 130 40 0);
}
#elGif {position:absolute;}
A.newslink {
    text-decoration: none;
    text-align: left;
    color: black;
    font-size: 8pt;
    font-weight: bold;
    font-style: normal;
    font-family: Arial,Geneva,sans-serif;
    line-height: 9pt;
}
-->
</STYLE>

• We have omitted the height property, which does not affect Navigator. The clip property sizes our box, instead.
• The proprietary layer-background-color has been substituted for background-color, which, although fine in regular CSS declarations, does not color to the edges in a positioned element.
• The width property is retained, but for a completely different purpose than Explorer. In Navigator, width specifies the wrapping width of the contained HTML, only, not the element's width. That is achieved by the clip property.
• The newslink class remains the same.

In our HTML, we make sure that elGif is correctly nested:

.
. preceding page HTML
.
<DIV ID="elAll">
    <DIV ID="elNews"></DIV>
    <DIV ID="elGif"></DIV>
</DIV>
.
. subsequent page HTML
.

Regular readers of this column will find the Navigator-specific script extremely straight-forward.