DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 2.0 | 10 | WebReference

DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 2.0 | 10

Logo

Dynamic Headline Fader, Version 2.0
placing the fader in your page


The page BODY

In version 1, the fader HTML included all the component elements. That is, the HTML included the main fader element (elAll), as well as nested elements for:

  1. old browser alternate content (elNoDHTML)
  2. the displayed text (elNews)
  3. the NS-specific GIF used for the fading effect (elGif)

Deprecated Version 1 Fader Page Inclusion:

.
. preceding page HTML
.
<DIV ID="elAll">
    <DIV ID="elNoDHTML">alternate HTML goes here</DIV>
    <DIV ID="elNews"></DIV>
    <DIV ID="elGif"></DIV>
</DIV>
.
. subsequent page HTML
.

Version 2 makes things easier. You need to include only ONE element, which we call elFader:

<DIV ID="elFader"
     STYLE="position:relative;visibility:hidden;">
</DIV>

or:

<DIV ID="elFader"
     STYLE="position:absolute;visibility:hidden;">
</DIV>

Notes:

  1. elFader must be defined as a positioned element with the STYLE= attribute. This saves us a <STYLE> tag in the HEAD, and makes our HTML more elegant.

  2. The position property can be either relative or absolute.

    1. Use absolute when you know the exact desired page coordinates for the fader. You can then add left and top properties:

      <DIV ID="elFader"
      STYLE="position:absolute;left:100;top:120;visibility:hidden;">
      </DIV>

    2. Use relative when you want the fader to appear within the page flow. Always use relative if you are including the fader in a TABLE. For example:
      <TABLE><TR><TD><DIV ID="elFader"
           STYLE="position:relative;visibility:hidden;">
      </DIV></TD></TR></TABLE>
  3. Always include the visibility property with a value of hidden. This will allow you to elegantly include alternate HTML to be displayed by non-DHTML browsers. For example:

    <DIV ID="elFader"
    STYLE="position:relative;visibility:hidden;">
        Fader for DHTML browsers
    </DIV>

    Since the visibility is hidden, the contained content will not be displayed by DHTML browsers during page load. As we shall see later, the script will erase the content before making the fader visible. This solution is much more elegant than Version 1, where a completely separate element for backward-compatible content was included.

  4. Avoid using other CSS style properties in-line. The fader will be styled later using JavaScript. Additional CSS styles will be lost in Navigator.

The Complete Fader Tag

Our fader-inclusion tag should, therefore look like one of the following:

<DIV ID="elFader"
     STYLE="position:relative;visibility:hidden;">
        HTML for non DHTML browsers included here
</DIV>

or:

<DIV ID="elFader"
     STYLE="position:absolute;
            left:leftpixelvalue;top:toppixelvalue;
            visibility:hidden;">
        HTML for non DHTML browsers included here
</DIV>

Next, let's look at the in-page script, to be placed in the HEAD of all pages with a fader.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Sep 07, 1999
Revised: Sep 07, 1999

URL: http://www.webreference.com/dhtml/column25/fade2inpage.html