Usage
There is one required file: countdown.js. Include it on your page with a line
like this:
<script type="text/javascript" src="countdown.js"></script>
Then, to use the CountdownTimer object, you will need another script
block on your page to create an instance of the CountdownTimer, like this:
<script type="text/javascript">
var Countdown = new CountdownTimer();
</script>
Once you have created the CountdownTimer, you will need to render
countdown timers wherever you want in your HTML source.
The text timer is rendered with the RenderText method. Simply call
this method wherever you want the countdown text placed in your document, like
this:
<script type="text/javascript">
dtStart = new Date("9/1/2003");
dtStop = new Date("1/1/2004");
Countdown.RenderText
("timerTextNewYear", dtStart, dtStop, "");
</script>
The horizontal bar CountdownTimer does not position itself or control
its size. To do this, you need to enclose the call to the RenderHorizontalBar
method inside an HTML element that establishes the size of the bar.
Additionally, if you plan to have a thin bar, you will need to limit the size of
the horizontal bar with the overflow attribute. To display a horizontal bar
countdown timer within a DIV element, use the RenderHorizontalBar method,
like this:
<div id="bar" style="position: relative;
width: 100%; height: 12px; overflow: hidden; ">
<script type="text/javascript">
dtStart = new Date("9/1/2003");
dtStop = new Date("1/1/2004");
Countdown.RenderHorizontalBar
("timerBar", dtStart, dtStop, "black", "silver");
</script>
</div>
The string "timerBar" is used to provide the unique ID for the HTML element
that will be inserted into the page. It is also the ID you will use to add the
details of the times that the horizontal bar will change its appearance. It is
up to you to decide how to initialize the start and stop times. The example here
starts the countdown on an arbitrary date and stops it at the end of the year.
The string "black" is used for the foreground color of the countdown, and the
string "silver" is used as the background color.
If you would rather display a series of images which change over time, use
the RenderImage method instead, like this:
<script type="text/javascript">
dtNow = new Date();
dtTenSeconds = dtNow.valueOf() + 10000; // 10000 ms =
ten seconds
Countdown.RenderImage
("timerImage", dtNow, dtTenSeconds,
"countdown1.gif", 126, 126);
</script>
The string "timerImage" is used to provide the unique ID for the HTML element
that will be inserted into the page. It is also the ID you will use to add the
details of the times that the image will change its appearance. It is up to you
to decide how to initialize the start and stop times. The example here starts
the countdown when the page is loaded, and stop it ten seconds later. The string
"countdown1.gif" is the initial image displayed, and the values 126 and 126 are
the width and height, respectively, of the image.
Next, you will provide the details of the times where the countdown timer
should change its appearance. You have two ways to do this. The first way is to
provide specific dates and times when the timer will change. The second way is
to provide the percentage between the start time and the end time when the timer
will change. The first way looks like this:
<script type="text/javascript">
Countdown.AddColorChangeTime
("timerBar", new Date("10/1/2003"), "blue", "silver");
Countdown.AddColorChangeTime
("timerBar", new Date("11/1/2003"), "green", "silver");
Countdown.AddColorChangeTime
("timerBar", new Date("12/1/2003"), "yellow", "silver");
Countdown.AddColorChangeTime
("timerBar", new Date("1/1/2004"), "red", "silver");
</script>
Note that the last date listed here is the stop date of our previous example.
In this example, this has the effect of making the horizontal bar remain red
after the stop date has passed. You do not need to repeatedly call the
AddColorChangeTime method in any particular order; the CountdownTimer
will change based on the times provided.
The second way to provide the times when the timer should change its
appearance is by percentage. The previous example, rewritten to use percentages
instead of specific times, looks like this:
<script type="text/javascript">
Countdown.AddColorChangePercent
("timerBar", 100, "red", "silver");
Countdown.AddColorChangePercent
("timerBar", 25, "blue", "silver");
Countdown.AddColorChangePercent
("timerBar", 75, "yellow", "silver");
Countdown.AddColorChangePercent
("timerBar", 50, "green", "silver");
</script>
The numbers 100, 25, 75, and 50 are the percentages (100%, 25%, 75%, and 50%)
between the start time and the end time which were provided when you created the
horizontal bar countdown timer.
Finally, call the StartAutoRefresh method to begin having the
CountdownTimer update all of the elements that you have rendered on the
page, like this:
<script type="text/javascript">
Countdown.StartAutoRefresh(500);
</script>
This begins updating all of the elements on the page every 500 milliseconds
(every 0.5 seconds).
| 
