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

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

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

Professional JavaScript 2nd Edition

Implementing Our New Ticker Design

We need a way to include our ticker into a page. The IFRAME technique was good, and although it doesn't work on some older Netscape browsers, we can work around that. We can put in some kind of link that takes the user to a static page containing the headlines. Assuming we are driving this all from a content management system, creating the page containing the headlines should be fairly easy.

So, first of all, here is the code that you need to place into your page to include the ticker:

<HTML>
<BODY>
<IFRAME SRC='ticker.html' WIDTH='315' HEIGHT='60' 
      SCROLLING='no' FRAMEBORDER='0'>
      <A HREF='headlines.html'>Click here for headlines</A>
</IFRAME>
</BODY>
</HTML>

The content of the ticker.html file is a combination of HTML, JavaScript, and CSS style control. Here is the main HTML structure with the CSS and JavaScript blocks condensed so you can see the overall layout:

<HTML>
<HEAD>
   <STYLE TYPE='text/css'>
      … CSS Styles here …
   </STYLE>
   <SCRIPT SRC="data.js">
   </SCRIPT>
   <SCRIPT LANGUAGE="JavaScript">
      … Ticker execution script here …
   </SCRIPT>
</HEAD>
<BODY onLoad='startTicker();'>
<A ID='Anchor' HREF='/' target=_top></A>
</BODY>
</HTML>

In the HEAD section, there is a STYLE block and two independent SCRIPT blocks.

The CSS block is for styling control. The two separate SCRIPT blocks are provided to abstract the executable ticker code from the data. The data block is included from a separate file so your content management system can publish new ticker data without having to republish the ticker code. We talked about this a little while ago when we discussed different ways of passing data to the ticker.

The BODY of the document is very simple; it's just the anchor tag. We set as a criterion the simplification of the design if it was possible. This is a much simpler BODY than the original News Online ticker.

The CSS styling is necessary to give us control over the hovering appearance, and to give us a way to eliminate the underscore that the browser automatically places on a link. This reveals a small bug in the Netscape 6 CSS object model, which requires that implemented CSS style properties must be specified, otherwise the rules are not created. This results in an empty cssRules collection and crashes the browser:

A
{
   display: none;
}

The following instantiates a rule and the browser works fine:

A
{
   text-decoration: none;
}

Here is the content of the STYLE block in the HEAD section of our new ticker:

<STYLE TYPE='text/css'>
A 
{
   text-decoration: none;
}
A:hover 
{
   text-decoration: none;
}
</STYLE>

Note that we only define the text-decoration: property. All the others will be defined from script, having located the style object that each of these rules instantiates. You could define more default values here and set up fewer properties in the script.


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

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


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