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

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

Logo

Dynamic Headline Fader, Version 2.0
introduction


Important Note:
This tutorial discusses Version 2.0 of the Fader script. The most recent version is Version 2.01, introduced in the first addendum to this column.
The script is constantly under revision, with new features added, problems fixed and new browser versions addressed.
Read this column, and future columns and addendi, to learn how we built the fader script. However, always use the most recent version of the script in your web pages.

This tutorial can be appreciated by users of any browser, any version. The in-line examples will work only in Netscape Navigator 4 and Microsoft Internet Explorer 4+.

 
double click fader to replay

Yes, at long last, a new version of our Dynamic Headline Fader, first introduced in Column 13.

We've made the script more elegant, added versatility and several new features.




Prerequisites

  1. An understanding of Explorer Blend Transition Filter. This was discussed and demonstrated in Column 13.

  2. An understanding of the Navigator GIF-based workaround we developed for the original fader. Please review the relevant pages.

    In the interest of space, the above two points will not be repeated in this column. It will be assumed that the reader is aware of their logic.

Version 2 Improvements

  1. Only one element, the fader element, is hardcoded in the page's HTML. The Navigator-specific nested elements are created dynamically, after page load.
  2. The fader may be absolutely or relatively positioned in the page.
  3. More parameter variables for fader styling, including border variables
  4. A single array for both the display text and link URLs.
  5. Delayed Navigator start until GIF is fully loaded.
  6. Dynamic class creation and styling for Navigator.
  7. Dynamic class creation and styling for Explorer.
  8. Ability to display any combination of link items and static items.
  9. Choice of ending loops with last item or first item.
  10. Optional replay upon user double click.
  11. A new GIF for the Navigator effect.
  12. and more...

So, if your comfortable with the two prerequisites, above, let's start with the fader's page-inclusion HTML.

**
Don't know what a Burma Shave message is?
Check out Grant's Central Station

Produced by Peter Belesis and

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

URL: https://www.webreference.com/dhtml/column25/