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

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

Professional JavaScript 2nd Edition

Browser Test

During the initial page loading, several functions are declared, and a browser test forces a redirect to an alternative ticker written in Java if the browser is other than IE or older than IE 4. Here is the fragment of JavaScript code that carries out the test and redirect:

// --- Check for old browser and force load the applet
theBrowserVersion = parseInt(navigator.appVersion);
if (theBrowserVersion < 4)
{
   location.href = "/ticker/ticker_applet.252.htm";
}

Remember, that this is assumed to only be running on IE. Now that Opera and Netscape 6 support IFRAME tags, this browser test requires some modification. The smallest change we could make to the ticker script, is to test for non-IE browsers here and force the applet to load, but that's not a very nice way to solve the problem. It is far better to get the ticker to work on those other browsers instead.

Ticker Startup

Once the BODY is fully loaded, we can trigger the ticker start-up. It is important to wait until this time, because we need the BODY loading to be complete, so that we can extract the story text from the DIV blocks at the end of the page.

The ticker startup is called like this:

<BODY onLoad="startTicker();">

Here, is that startup function code:

// --- Only run for V4 browsers (check browser again here - 
//   some old browsers won't do this inline)
   function startTicker()
   {
      theBrowserVersion = parseInt(navigator.appVersion);
      if (theBrowserVersion < 4)
      {
         location.href = "/ticker/ticker_applet.252.htm";
          return;
      }
// ------ Check and fixup incoming data block
         if(!document.body.children.incoming.children.properties)
         {
            document.all.incoming.innerHTML = "… default data …";
         }
// ------ Set up initial values - behavior
         theCharacterTimeout = 50;
         theStoryTimeout     = 5000;
         theWidgetOne        = "_";
         theWidgetTwo        = "-";
// ------ Set up initial values - content
         theStoryState       = 1;
         theItemCount        = document.all.itemcount.innerText;
         theCurrentStory     = -1;
         theCurrentLength    = 0;
         theLeadString       = "  …  ";
         theSpaceFiller      = "    …  <BR><BR><BR>";
// ------ Begin the ticker
         runTheTicker();
      }

Due to some browsers that support IFRAME tags not also supporting the earlier inline browser test and redirect, we also do that again here to catch them. This is mostly for the benefit of preventing IE 3 browsers from trying to run the ticker.

The next fragment of code checks that the data in the DIV blocks actually exists. This is a work around for a problem that occurred in the publishing system where an empty data feed was routed to the server. It resulted in the DIV blocks being present, but containing no data. This tests for that and reconstructs some default data if necessary. The code has been simplified to save a little space.

There are two blocks of global variable initialization. They are separated simply, because one set describes how the ticker works, while the other relates to the ticker data. The values in those variables control the ticker as follows:

VariablePurpose
theCharacterTimeoutThis is the time in milliseconds between drawing one character and the next. The value is used to determine the delay before calling the next cycle of the ticker.
theStoryTimeoutWhen a headline is complete, this delay in milliseconds determines how long the story dwells on the screen, before the next story begins to tick out.
theWidgetOneThe bouncing golf ball effect requires two characters to be alternately appended to the end of the ticker. This is the first.
theWidgetTwoThis is the other golf ball effect character. The two characters need to differ in their perceived shape. One needs to be elevated while the other needs to be low down. An underscore and a minus sign work quite well together. A more gross effect can be obtained with an underscore and an asterisk. You could experiment with HTML character entities as well.
theStoryStateThe story state indicates whether we are currently playing out the headline text as a ticker, or whether it is completed.
theItemCountThe total number of stories available is stored here.
theCurrentStoryThis determines which one of several stories is the one currently being played out.
theCurrentLengthThe current ticker length enumerator variable.
theLeadStringIn the News Online ticker, we must indent the text to avoid overwriting the 'Latest:' text that is part of the background. That spacer must be a series of HTML character entities that represent non-breaking-spaces. This is important, so that the mouse can enter and click on any part of the ticker.
theSpaceFillerThe as yet unfilled part of the ticker must also be filled with non-breaking space characters so that it can be clicked on.

The last line in the ticker startup function runs the first cycle of the ticker.


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

Created: November 5, 2001
Revised: November 5, 2001


URL: http://webreference.com/programming/javascript/professional/chap21/1/3.html