WebReference.com - Part 2 of Chapter 21: Professional JavaScript, from Wrox Press Ltd (6/7)

[previous] [next]

Professional JavaScript 2nd Edition

There are just two functions left to describe. One starts the ticker after initializing all the style settings, while the other is the ticker run loop that calls itself with the setTimeout() function. Let's look at the start up function first:

function startTicker()
{
   // Define run time values
   theCurrentStory     = -1;
   theCurrentLength    = 0;
   theSpaceFiller      = buildSpaceFiller(200);
          
          
   // Locate base objects
   theAnchorObject     = document.getElementById("Anchor");
   // Locate style sheet objects
   theStyleSheet = document.styleSheets[0];
          
          
   // Fix the missing cssRules property for MSIE
   if(!theStyleSheet.cssRules)
   {
      theStyleSheet.cssRules = theStyleSheet.rules;
   }
   // Locate the style objects we want to modify
   theBodyStyle   = document.body.style;
   theAnchorStyle = theStyleSheet.cssRules[0].style;
   theHoverStyle  = theStyleSheet.cssRules[1].style;
          
   // Apply data driven style changes          
   theBodyStyle.backgroundColor = theBackgroundColor;
   theAnchorStyle.color = theForegroundColor;
   theAnchorStyle.fontFamily = theFontFamily;          
   theAnchorStyle.fontSize = theFontSize;          
   theAnchorStyle.lineHeight = theLineHeight;          
   theAnchorStyle.fontWeight = theFontWeight;          
   theAnchorStyle.textDecoration = theTextDecoration;          
   theHoverStyle.color = theHoverColor;
   // Fire up the ticker
   runTheTicker();
}

First, we call the spaceFiller and define some initial default values. Then we locate the anchor object using the getElementById() method. We then locate the styleSheets collection for the document and fix it up to correct the missing cssRules property on IE browsers.

Following that fix, we can then locate the style objects for the two CSS rules in the STYLE tags, one for all anchor elements, and the other for the pseudo element that applies style to anchors when they are being hovered over. We also locate the style object for the document body.

Having located all of these style objects, we now assign values to various properties, using the variables that were defined in the included content file (data.js).

Finally, we call the main ticker run loop to start things rolling.

Here is the code for that main animation function:

function runTheTicker()
{
   var myTimeout;
   
   // Go for the next story data block
   if(theCurrentLength == 0)
   {
      theCurrentStory++;
      theCurrentStory      = theCurrentStory % theItemCount;
      theStorySummary      = theSummaries[theCurrentStory];
      theTargetLink        = theSiteLinks[theCurrentStory];
      theAnchorObject.href = theTargetLink;
   }
   // Stuff the current ticker text into the anchor
   theAnchorObject.innerHTML = theLeadString + 
                               theStorySummary.substring(0,theCurrentLength) + 
                               whatWidget() + theSpaceFiller;
   // Modify the length for the substring and define the timer
   if(theCurrentLength != theStorySummary.length)
   {
      theCurrentLength++;
      myTimeout = theCharacterTimeout;
   }
   else
   {
      theCurrentLength = 0;
      myTimeout = theStoryTimeout;
   }
   
   // Call up the next cycle of the ticker
   setTimeout("runTheTicker()", myTimeout);
}

This is much simpler than the earlier version. Several unnecessary variables are eliminated and all state preservation is accomplished using theCurrentLength value. Several duplicate fragments of code have been eliminated by moving the widget generator into a function as well as by pulling common code outside of the conditional test for whether we are at the end or in the middle of a line of ticker playout.

As we have totally eliminated all the DOM childNodes problems, this now works fine on IE and Netscape 6, although there are still some necessary functionalities missing from the Opera browser's JavaScript implementation that prevents the ticker from running.

[previous] [next]

Created: November 8, 2001
Revised: November 8, 2001

URL: http://webreference.com/programming/javascript/professional/chap21/2/6.html