Cool Countdown

Cool Countdown is a JavaScript script that allows you to place a digital countdown timer on your website.

Cool Countdown is portable, easy to configure, completely customizable, supports foreign languages, and best of all, it's free!

A countdown timer which was created by Cool Countdown will appear below when it has fully loaded.

Download cool_countdown.zip

Download cool_countdown.zip to your computer. cool_countdown.zip contains the following files:

coolCount.js
stop_alarm.htm
beep.wav
demo_down.htm

coolCount.js is the script that runs the program. stop_alarm.htm is called by coolCount.js to display the "Stop Alarm" dialog. beep.wav is the audio file that is played when the countdown timer reaches zero. demo_down.htm is a demo web page that is pre-configured to run Cool Countdown. You may not be able to hear the audio file using the Netscape browsers unless the files are installed on a web server. Please see the Audio Compatibility section for more information.

You're free to modify demo_down.htm for your own use. This is probably the easiest way to get started. You are also free to modify stop_alarm.htm, except where indicated in the file's contents.

Unzip cool_countdown.zip. Create an HTML file in the same directory as the one you just unzipped the contents of cool_count.zip. We will refer to this HTML file as the Target Page. Instead of creating a new Target Page, you can use a preexisting HTML file. Open the Target Page in an editor.

This step involves pasting the HTML elements used by Cool Countdown into the Target Page.

Press the "Select Text" button below. This will select the text in the text area below. Copy the text to the clipboard and then paste it in between the opening and closing <body></body> tags of the Target Page.

In Windows operating systems, you can do this by pressing Control—>C to copy the text into the clipboard from the text area and Control—>V to paste the text from the clipboard into your HTML editor.

<table id="CH_dtimer1" class="timer">
<tr>
<td class="timer_pad">
<div class="title">Countdown Timer</div>

<div class="field_cont">
   <label class="field">Hours:
      <input id="CH_dtimer1_hours" class="hours"
	         type="text" size="2" disabled="disabled" />
   </label>

<label class="field">Minutes:
      <input id="CH_dtimer1_minutes" class="minutes"
	         type="text" size="2" disabled="disabled" />
   </label>

<label class="field">Seconds:
      <input id="CH_dtimer1_seconds" class="seconds"
	         type="text" size="2" disabled="disabled" />
   </label>
</div>

Note: In the HTML code above, you may not modify the id attribute or disabled attribute for any HTML elements that have these attributes set to a value. If you do, Cool Countdown will not work properly. Otherwise, you are free to alter all HTML elements in any way that you wish. HTML elements that don't have an id attribute set to a value are not necessary for the operation of Cool Countdown and may be removed.

This step involves setting the format of the HTML elements you pasted into the Target Page in Step 2 with the Cascading Style Sheet (CSS) styles we've provided.

Press the "Select Text" button below. This will select the text in the text area below. Copy the text to the clipboard and then paste it in between the opening and closing <head></head> tags of the Target Page.

You are not required to use the CSS styles we've provided above. You are free to modify them or use your own classes.

Note that if the visibility style of the the top-level element — the one with the id attribute set to the value of CH_dtimer1 is set to hidden, Cool Countdown will automatically set the visibility style back to visible. This is so that the timer will not appear until it has loaded into memory. It is not necessary to set the visibility style to hidden.

Upload the Target Page, coolCount.js, stop_alarm.htm, and beep.wav to your website. Place them in the same directory.

Cool Countdown does not actually play the audio file itself. Instead it opens the page stop_alarm.htm when the countdown timer reaches zero and relies on the <embed> tag of this file's HTML code to automatically play the audio file. This does not guarantee that the audio file will actually be played since the user's browser must have a plug-in which supports the MIME type of the audio file.

One problem with the <embed> tag is that while it is widely used, it is not standard HTML. Your page will not pass an HTML 4.0 or XHTML validation test. An alternative to using the <embed> tag for loading audio files which is standard HTML is the <object> tag. We have opted to use <embed> over the <object> tag however, because we've had problems getting Internet Explorer to play the audio file using the <object> tag when using the QuickTime plug-in, which happens to be the one favored by Netscape. A workaround for the problem of getting your page to pass an HTML/XHTML validation test is to write the <embed> tag to the page dynamically using JavaScript. The example in the next section, Tweaking Performance uses this technique.

We would like to point out a Netscape peculiarity regarding the <embed> tag that could be mind-boggling if you are not aware of it. At least on our system, the <embed> tag fails to play the audio file on Netscape unless the HTML file containing the <embed> tag is opened from a server.

As mentioned in the previous section, Audio Compatibility, Cool Countdown relies on stop_alarm.htm to play the audio file. Because stop_alarm.htm isn't opened until the timer reaches zero, that means the audio file isn't downloaded until this point as well. The time the browser takes to parse stop_alarm.htm and then download the audio file may result in a delay of several seconds. The duration of the delay will depend largely on how how fast your user's modem is.

To avoid this potential delay at a time when it is least desired, you can load the audio file into the browser's cache. We use the following JavaScript code to accomplish this. It should be placed in between the opening and closing <head></head> tags of the Target Page.

All of Cool Countdown's user messages are stored in JavaScript strings which are accessible and modifiable from outside of the program. This is so that Cool Countdown can be easily adapted to support a foreign language. The User Message variables which must be changed, and their default values, are supplied in the table below:

User Message Variable	User Message String
$UMSG_INVALID_HOURS	'You have entered invalid input into the hours field.\nEnter an amount of hours in the range of 0 - 99'
$UMSG_INVALID_MINUTES	'You have entered invalid input into the minutes field.\nEnter an amount of minutes in the range of 0 - 59'
$UMSG_INVALID_SECONDS	'You have entered invalid input into the seconds field.\nEnter an amount of minutes in the range of 0 - 59'
$UMSG_NO_INPUT	'You have not entered a desired countdown time'
$UMSG_CLOSE_ACTIVE	'You are attempting to exit this page while a timer is still active.\nDoing so will cause the timer to terminate. When you press the "OK"\nbutton, you will be given an opportunity to abort exiting this page'

The follow example code demonstrates how to change the default value of the $UMSG_NO_INPUT variable so that it uses all capital letters. The $UMSG_NO_INPUT message is generated when the user attempts to start a countdown without first entering a countdown time.