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

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

To page 1To page 2To page 3To page 4To page 5current pageTo page 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
      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

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 % 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)
      myTimeout = theCharacterTimeout;
      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.

To page 1To page 2To page 3To page 4To page 5current pageTo page 7
[previous] [next]

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

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