| home / programming / javascript / professional / chap21 / 2 |   
[previous] [next] |
|
|
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.
| home / programming / javascript / professional / chap21 / 2 |
[previous] [next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
|
Video: How System Center Helps Reduce IT Costs IBM Cloud Computing for Developers Virtual Event, April 6-8 |
Microsoft Video: OCS and Exchange: Platform Futures MORE WEBCASTS, PODCASTS, AND VIDEOS |
Created: November 8, 2001
Revised: November 8, 2001
URL: http://webreference.com/programming/javascript/professional/chap21/2/4.html
