Dynamic Headline Fader, Version 2.0
The Complete Code 2/2

The fader.js External File

This file, plus a sample HTML page and news array may be downloaded in ZIP format.

/*fader.js
 * by Peter Belesis. v2.0 990907
 * Originally published and documented at http://www.dhtmlab.com/
 * Copyright (c) 1999 internet.com Corp. All Rights Reserved.
 * You may re-use this code on a public Web site only if this entire
 * copyright notice appears unchanged and you publicly display
 * on the Web page a link to http://www.dhtmlab.com/.
 *
 * Contact pbel@internet.com for all other uses.
*/

finite = (maxLoops > 0);
isOver = false;
loadCount = 0;
if (!window.prefix) prefix = "";

window.onload = countLoads;

if (NS4) {
   fadeImg = new Image();
   fadeImg.onload = countLoads;
   fadeImg.src = gifSrc;
}

function countLoads() {
   if (IE4) {
      setTimeout("initIt()");
   }
   else {
      loadCount++;
      if (loadCount==2) {
         origWidth = innerWidth;
         origHeight = innerHeight;
         window.onresize = function(){
            if (innerWidth==origWidth && innerHeight==origHeight) return;
            location.reload();
         }
         initIt();
      }
   }
}

function initIt(){
   if (!window.arNews) return;
   if (NS4) {
      if (!document.elFader) return;
      with(document.classes.newslink.A) {
         textDecoration = lnkDec;
         color = lnkCol;
         fontWeight = fntWgh;
         fontSize = fntSiz;
         fontStyle = fntSty;
         fontFamily = fntFam;
         lineHeight = linHgt;
         textAlign = txtAln;
      }
      with(document.classes.nolink.P) {
         color = fntCol;
         fontWeight = fntWgh;
         fontSize = fntSiz;
         fontStyle = fntSty;
         fontFamily = fntFam;
         lineHeight = linHgt;
         textAlign = txtAln;
      }
      elFader = document.elFader;
      with (elFader) {
         document.write(" ");
         document.close();
         bgColor = borCol;
         clip.width = boxWid;
         clip.height = boxHgt;
      }

      contWidth = boxWid - (borWid*2);
      contHeight = boxHgt - (borWid*2);
      elCont = new Layer(contWidth,elFader);
      with (elCont) {
         top = borWid;
         left = borWid;
         clip.width = contWidth;
         clip.height = contHeight;
         bgColor = backCol;
         visibility = "inherit";
      }

      newsWidth = contWidth - (boxPad*2);
      newsHeight = contHeight - (boxPad*2);
      elNews = new Layer(newsWidth,elCont);
      with (elNews) {
         top = boxPad;
         left = boxPad;
         clip.width = newsWidth ;
         clip.height = newsHeight;
      }
      
      elGif = new Layer(contWidth,elCont); 
        imStr = "<IMG SRC=" + gifSrc +" WIDTH="+ Math.max(fadeImg.width,(boxWid - (borWid*2))) +">"
        with (elGif) {
         document.write(imStr);
           document.close();
         moveAbove(elNews);
      }

      imgHeight = elGif.document.height;
   
      slideInc = (imgHeight/(blendDur*1000/gifInt));
      startTop = -(imgHeight - boxHgt);

      elFader.visibility =  "show";
    }
    else {
      if (!window.elFader) return;
      elFader.innerHTML ="";
      if (!document.styleSheets.length) document.createStyleSheet();
      with (document.styleSheets(document.styleSheets.length-1)) {
         addRule("A.newslink","text-decoration:"+lnkDec+";color:"+ lnkCol);
         addRule("A.newslink:hover","color:"+ hovCol);
      }

      with (elFader.style) {
         width = boxWid;
         height = boxHgt;
         backgroundColor = backCol;
         overflow = "hidden";
         color = fntCol;
         fontWeight = fntWgh;
         fontSize = fntSiz;
         fontStyle = fntSty;
         fontFamily = fntFam;
         lineHeight = linHgt;
         textAlign = txtAln;
         cursor = "default";
         visibility = "visible";
         borderWidth = borWid;
         borderStyle = borSty;
         borderColor = borCol;
         padding  = boxPad;   
         filter = "blendTrans(duration=" + blendDur + ")";
      }
      elFader.onselectstart = function(){return false};
    }

   elFader.onmouseover = function(){
      isOver = true;
   }
   elFader.onmouseout = function(){
      isOver = false;
      status = "";
   }

   startIt(0);
}

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

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

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();
}

function slideIt(){
   elGif.top += slideInc;
   if (elGif.top >= 0) {elGif.visibility = "hide";return}
   setTimeout("slideIt()",gifInt);
}

function endIt(){
   clearInterval(blendTimer);
   if (endWithFirst) {
      newsCount = 0;
      fadeIt();
   }
   if (replayOnClick) {
      startIndex = endWithFirst ? 2 : 0;
      if (IE4) {
         elFader.title = "Double click to replay";
         elFader.ondblclick = function(){
            this.ondblclick = null;
            this.title = "";
            startIt(startIndex);
         }
      }
      else {
         elFader.captureEvents(Event.DBLCLICK);
         elFader.ondblclick = function(){
            this.releaseEvents(Event.DBLCLICK);
            startIt(startIndex);
            return false;
         }
      }
    }
}

//end

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