Dynamic Headline Fader, Version 2.0
the actual fade transition

fadeIt()

The complete fadeIt() looks like this:

function fadeIt(){
   dispStr = arNews[newsCount];
   linkStr = arNews[newsCount+1];
   isLink = linkStr.length;
   if (isLink) {
      newsStr = "<A CLASS=newslink "
              + "HREF=" + prefix + linkStr + ">"
              + arNews[newsCount] + "</A>"
   }
   else {
      newsStr = (NS4) ? ("<P CLASS=nolink>"+dispStr+"</P>") : dispStr;
   }

   if (NS4) {
      elGif.top = startTop;
      elGif.visibility = "inherit";
      elNews.visibility = "hide";
         with (elNews.document) {
            write(newsStr);
            close();
         }
      elNews.visibility = "inherit";
   }
   else {
      elFader.filters.blendTrans.Apply();
      elFader.innerHTML = newsStr;
      elFader.filters.blendTrans.Play();
   }

   window.status = (isOver && isLink) ? (prefix + linkStr) : "";
   if (NS4) slideIt();
}

Whenever fadeIt() is called it finds the current display text and URL strings in arNews and assigns them to dispStr and linkStr, respectively:

dispStr = arNews[newsCount];
linkStr = arNews[newsCount+1];

If linkStr is not an empty string, then the item is a link. We declare isLink to identify the item as a link.

isLink = linkStr.length;

Our next task is to create the string that will be written into the fader. We call this string, newsStr. If the item is a link, then newsStr will include the display text enclosed in an A tag. If not, then, in the case of Navigator, the display text is enclosed in a P tag, and in the case of Explorer in no tag:

if (isLink) {
   newsStr = "<A CLASS=newslink "
           + "HREF=" + prefix + linkStr + ">"
           + arNews[newsCount] + "</A>"
}
else {
   newsStr = (NS4) ? ("<P CLASS=nolink>"+dispStr+"</P>") : dispStr;
}

Notice the use of the classes defined earlier in the CLASS= attribute.

We now know what we have to write into the fader. So, for Navigator, we position elGif at startTop, and make it visible. We hide elNews and update it with the string we created. Then we make elNews visible, but elGif is still hiding it:

if (NS4) {
   elGif.top = startTop;
   elGif.visibility = "inherit";
   elNews.visibility = "hide";
      with (elNews.document) {
         write(newsStr);
         close();
      }
   elNews.visibility = "inherit";
}

For Explorer, we apply the Blend Transition, which freezes the current state of the fader display. Then we update elFader with our string, and play the transition.

else {
   elFader.filters.blendTrans.Apply();
   elFader.innerHTML = newsStr;
   elFader.filters.blendTrans.Play();
}

At this point, we check to see if the user has the mouse over the fader. If so, and the fader is displaying a link, then we update the browser status bar to display the linked-to URL.

window.status = (isOver && isLink) ? (prefix + linkStr) : "";

Finally, if Navigator is being used, slideIt() is called to start the Navigator version of the transition:

if (NS4) slideIt();

Which, of course, we will discuss on the next page.

Produced by Peter Belesis and

The latest from WebReference.com Browse > Site Contents - - - - - Experts * 3D Animation * Design * DHTML * Graphics * HTML * JavaScript * Perl * XML - - - - - Web Resources * Authoring * Design * Internet * Multimedia * Programming * Promotion - - - - - Services * Interviews * Newsletters * Reviews * Search * Tools Search Engine Optimization: Selecting and Embedding Keywords · Are Google's Language Translation Web Services Ready for Prime Time? · Installing and Using Meeplace, the Business Review CMS Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters >   The latest from internet.com IBM DB2 10 for z/OS: Justifying the Upgrade · Living La Vida Colo: Choosing the Right Colocation Facility · FTC Concerns over Social Media Privacy Linger

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

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