spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column60


Persistent Random Banners

Developer News
Microsoft Shows Off Silverlight 4, IE9 Plans
Metasploit Expands Vulnerability Test Framework
HyperCard Reborn?

Embedding the Banner

As suggested in Jamie Jaworski's SuperScripter, we embed the banner in one of cell of a table. You can design your own table and fill its cells as you see fit. In our table, there is one column with two cells. The top cell includes a fixed banner, Doc JavaScript Tip of the Day. The bottom cell includes a JavaScript call to the function refreshDocJSTOD() which writes out a persistent random message. You can place the table anywhere in your page. Here is our TABLE definition:

<TABLE align=right cellpadding=4 cellspacing=1 border=2 width="40%"> 
<TR><TD align=center bgcolor="#000099">
<B><font face="Verdana,sans-serif" color="#ffcc00" size=-1>
Doc JavaScript Tip of the Day
</font></B></TD></TR> 
<TR><TD align=center bgcolor="#ffffcc">
<font face="Arial,sans-serif" size=-1>
<SCRIPT LANGUAGE="JavaScript">
refreshDocJSTOD("now");
</SCRIPT>
</font></TD></TR> 
</TABLE>

Notice that we call the function refreshDocJSTOD() with the string argument "now". The argument can take one of the following values:

  • "now": pick a random message from the feed and display it now.
  • "month": pick a message based on the number of the month, i.e. between 0 to 11. The same message will be displayed throughout the month. If the feed is longer than 12 messages, the excess messages will never show up.
  • "dayOfTheMonth": pick a message based on the day of the month, i.e. between 0 and 30. The same message will be displayed throughout the day (24 hours beginning at midnight). If the feed is longer than 31 messages, the excess messages will never be seen. If the feed is shorter than 31, the same message will be displayed in different days.
  • "dayOfTheWeek": pick a message based on the day of the week, i.e. between 0 and 6. The same message will be displayed throughout this day of the week, every week. The same message will be shown every Monday, another message every Friday, etc. If the feed is longer than 7 messages, the excess messages will never be displayed.
  • "hour": pick a message based on the hour of the day, i.e. between 0 and 23. The same message will be displayed throughout this hour of the day, every day. If the feed is longer than 24 messages, the excess messages will never appear.

Two more elements are needed for our banner. First, the JavaScript code itself. We placed it in an external file, code.js. We explain this code and give its listing later in this column. Here is how you include it in your page (in the HEAD section):

<SCRIPT language="JavaScript" src="code.js"></SCRIPT>

The second missing necessity is the message feed. The messages are stored in an external file, feed.js. The messages are HTML-formatted as we explain later in this column. To include the feed in your page, you need to call the external file somewhere in your page's HEAD section:

<SCRIPT language="JavaScript" src="feed.js"></SCRIPT>

To summarize, you need to take care of three elements in order to embed a persistent random banner in your page:

  • Call refreshDocJSTOD().
  • Include code.js.
  • Include feed.js.

Next: How to select a message

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Rolling Out Your Own HTML Application Version Control · HTML 5: Client-side Storage · Working with Ajax Server Extensions
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Wi-Fi Product Watch, November 2009 · Chip Market Recovering From '08 Collapse · Low-Cost Tools to Kickstart Your New Business


Created: March 27, 2000
Revised: April 26, 2000

URL: http://www.webreference.com/js/column60/2.html