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

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

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

Professional JavaScript 2nd Edition

The first SCRIPT block contains the ticker data:

<SCRIPT SRC="data.js">
</SCRIPT>

Note that it includes an external file. This provides a good way to integrate things with your content management system. It also separates content from functionality. In this implementation, we can also control rather more of the stylistic appearance than we could with the original BBC News Online ticker. Here is the content of the data.js file. The story texts and URLs have been shortened to save space here:

// Control parameters
var theCharacterTimeout = 50;
var theStoryTimeout     = 5000;
var theWidgetOne        =  "_";
var theWidgetTwo        =  "-";
var theWidgetNone       =  "";
var theLeadString       = "LATEST: ";
// Styling parameters
var theBackgroundColor  = "white";
var theForegroundColor  = "#333366";
var theFontFamily       = "Verdana, Arial, Helvetica, sans-serif";
var theFontSize         = "11px";
var theLineHeight       = "11px";
var theFontWeight       = "bold";
var theTextDecoration   = "none";
var theHoverColor       = "#CC3300";
// Content parameters
var theSummaries = new Array();
var theSiteLinks = new Array();
var theItemCount = 4;
theSummaries[0] = "This is the stext for story 1";
theSiteLinks[0] = story1.htm";
theSummaries[1] = "Here is story 2.";
theSiteLinks[1] = "/newsid_1405000/1405821.htm";
theSummaries[2] = "Story three has its headline here";
theSiteLinks[2] = "./Story3.html";
theSummaries[3] = "This is headline number four";
theSiteLinks[3] = "/stories/Four.htm";

The variable names should be fairly obvious. The control variables are similar to the ones that existed before, except that we can access them externally. There is an additional widget value that is placed at the end of the text, only when the story headline is complete. The leading string is also defined here instead of requiring a background image.

The CSS style property names are reflected in the variables that contain their values. These are assigned to the appropriate properties belonging to the style objects for the A rule, the A:hover rule and the document body object. This will become apparent shortly when we walk through the code.

The second SCRIPT block contains the functional code that makes the ticker work. This is much simpler than the original design we looked at. We'll work through the various components in there, starting with the more basic ones first.

It is necessary to construct a series of non-breaking spaces separated by breaking spaces so that they can be placed on the end of the anchor text so as to completely fill the IFRAME. This helps the UI to be a little more responsive and because of memory leak avoidance, this was done as a constant in the BBC ticker. Here it is created with a small function. There might be a memory leak due to the string concatenations, but because this is called only once it should not cause a serious problem. Here is the function that builds the space filler:

function buildSpaceFiller(aCount)
{
   var myResult = "";
   
   for(var ii=0; ii<aCount; ii++)
   {
      myResult = myResult + "  ";
   }
   
   return myResult;
}

We need to generate a widget character to create an animated golf ball effect, while the text 'teletypes' out. This function does the same job as the earlier example with one difference. Here we also return a special widget if we are at the end of the line which allows us to place a trailing symbol on the output if we want to. That could be done with a small IMG item. Here is the widget generator:

function whatWidget()
{
   if(theCurrentLength == theStorySummary.length)
   {
      return theWidgetNone;
   }
   if((theCurrentLength % 2) == 1)
   {
      return theWidgetOne;
   }
   else
   {
      return theWidgetTwo;
   }
}

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

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


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