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

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

Logo

Dynamic Headline Fader, Version 2.0
starting the transitions


startIt()

The Version 2 startIt() function is almost identical to its Version 1 predecessor. The one major difference is that startIt() now has one argument, the arNews index:

function startIt(ind){
   newsCount = ind;
   if (finite) loopCount = 0;
   doIt();
   blendTimer = setInterval("doIt()",blendInt*1000)
}

This argument is assigned to newsCount, which will track our position in the array as we move through it. If finite is true, then we should also be counting the full loops through the array. To this end, we declare loopCount.

We then begin the transitions by calling doIt() once to display the first text. When we return from the first display, we use setInterval() to call doIt() repeatedly. We assign this timer to the blendTimer variable.

doIt()

Unlike startIt(), doIt() is quite different from its earlier incarnation. It is much shorter, and relies on two new functions, endIt() and fadeIt(), to perform tasks it once did.

function doIt() {
   if (finite && loopCount==maxLoops) {
      endIt();
      return;
   }
   fadeIt();
   newsCount+=2;
   if (newsCount == arNews.length) {
      newsCount = 0;
      if (finite) loopCount++;
   }
}

First doIt() determines if it should proceed. If finite is false, and endless loops are called for, it proceeds. If finite is true, it compares loopCount and maxLoops. If they are the same, then the transitions should be halted, endIt() is called, and doIt() returns.

If doIt() proceeds, it calls fadeIt() to perform the transition. Once the transition is done, newsCount is incremented by 2 (two array elements for every fader item), and compared to the length of arNews. If they are equal, the end of the array has been reached, so a new loop through the array is called for. newsCount is reinitialized to 0, and loopCount is conditionally incremented.

Simple as that. Now, let's look at fadeIt(), which actually performs the transitions.


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/fade2start.html