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

[previous] [next]

Professional JavaScript 2nd Edition

Insetting the Ticker Into the page

We need to find a way to embed the ticker into a page so that our target browser invokes the JavaScript version, while any others call in the Java version.

Remember, that this decision was being made in 1999 when only IE supported the IFRAME tag and all other browsers ignored it. Yes, we did expect that other browsers might implement it in the future and now that future has arrived, we will review this later on in the chapter, when we develop a new ticker for contemporary browsers. For now, we are looking at the live deployed ticker.

The IFRAME tag was assembled in such a way as to call in the ticker HTML document only on IE. The other browsers would ignore the IFRAME tag and see the HTML contained within it. This fragment of HTML is taken from the News Online front page:

<IFRAME SRC='/ticker/ticker.stm' WIDTH='315' HEIGHT='30' 
   SCROLLING='no' FRAMEBORDER='0'>
   <APPLET CODE='ticker.class' CODEBASE='/java/' 
          WIDTH='300' HEIGHT='50'>
      <PARAM NAME='bgcolor'     VALUE='255,255,255'></PARAM>
      <PARAM NAME='linkcolor'   VALUE='255,0,0'></PARAM>
      <PARAM NAME='textcolor'   VALUE='0,0,0'></PARAM>
      <PARAM NAME='SectionID'   VALUE='252'></PARAM>
      <PARAM NAME='LanguageID'  VALUE='3'></PARAM>
      <PARAM NAME='RegionID'    VALUE='-1'></PARAM>
      <PARAM NAME='SubRegionID' VALUE='-1'></PARAM>
   </APPLET>
</IFRAME>

Conveniently, IE ignores the HTML between the IFRAME and /IFRAME tags, while still implementing the IFRAME. Netscape ignores the IFRAME tags and sees the APPLET element inside. The applet parameters are not important to us here and are provided to allow the tickers to be customized for different language variants of News Online.

So, the ticker runs within a frame that is placed at the top of the page (or wherever we like).

How It Works

The workings are fairly simple:

• Test that we are running in the correct browser
• Initialize any data structures
• Construct an interval timer that plays out the ticker text
• On each cycle, pick up a new headline and play it out
• After a pre-defined number of cycles, reload the ticker page

We will now take a closer look at these steps to consider the design choices and compromises that were made.

[previous] [next]

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

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