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

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

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

Professional JavaScript 2nd Edition

Visual Effects and Presentation

To create the effect of an old-fashioned golf ball teletypewriter, the last character of the headline string is alternately replaced by an underscore (_) or a hyphen (-). You can experiment with using other characters to make the effect more obvious, but this seems effective and reasonably subtle. Using an asterisk instead of the hyphen, makes the effect much more noticeable.

Here is how two adjacent characters are painted in with the golf ball effect:

Golfball Effect Example Images

To determine which of the two characters to use, we perform a modulo 2 operation on the length of the output string to yield either a value of 1 or 0. This can then be used to select one or other of the widget characters. The code in the ticker is used inline, but can be wrapped in a function that returns one or other character. We'll use a function like this later on in our new ticker design:

function makeWidget()
      {
         if((theCurrentLength % 2) == 1)
         {
            return theWidgetOne;
         }
         else
         {
            return theWidgetTwo;
         }
      }

The string that is stored in the innerHTML of the target object needs to be constructed with the minimum amount of string construction/destruction possible. This is because garbage collection on some browsers does not reuse memory that is freed up by discarded strings until the page is cleared. The content of the ticker is manufactured when needed and is not stored in a string variable at all:

target.innerHTML = theLeadString + 
theStorySummary.substring(0,theCurrentLength) + makeWidget() + 
theSpaceFiller;

Styling the Output

The appearance can be controlled with some simple CSS style settings at the top of the file. We just need to create a style for the anchor and define the hover effect. Here is the CSS style to define just those attributes:

<STYLE TYPE='text/css'>
   <!--
      A
      {
         font-family: Verdana, Arial, Helvetica, sans-serif;
         font-size: 11px;
         line-height: 11px;
         text-decoration: none;
         color: #333366;
         font-weight: bold;
      }
      A:hover
      {
         color: #CC3300;
      } 
   -->
</STYLE>

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

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


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