DHTML Easy Countdown Pro — v1.53

Summary

A free DHTML counter that is designed to be the advanced version of the popular DHTML Easy Countdown. This advanced version supports a wide range of customisations including a number of actions when a counter reaches zero.

Check out the basic version if you haven't already — it may be all you need, is easier to use and faster to download.

‘Pro’ Features

• All of the listed features from DHTML Easy Countdown:
  • Easy to use; No need to edit any Javascript at all, only needs simple HTML
  • Multiple counters: Supports multiple counters per webpage
  • The counter always stays in step with the computers clock and won't “tick” any faster or slower
  • Each counter can be styled independently through CSS
  • It's accessible to everyone. Users without javascript still get to see the date that is being counted down to, so no information is lost for those users that either choose not to have javascript enabled, or that don't have that capability because they use special-needs web browsers, etc.
• Optionally display a message if the counter reaches zero
• Optionally redirect to another webpage if the counter reaches zero
• Optionally invoke a javascript function of your choosing when the counter reaches zero
• Optionally play audio content (customisable mime-type) if the counter reaches zero
• Customisable "day", "hour", "minute" and "second" unit labels including support for plural units and optional white space (or other content) before the number or after after the unit text
• Customisable digit display, allows optional padding with zeros to allow display formats such as "00:00:00"
• Optionally hide digits and unit label text if the digit reads zero, allowing display formats such as "1 day, 30 seconds"
• Optionally re-style the counter if the counter reads zero
• Instruct the script to use the webservers value of UTC time (requires a server-side language)
• All of these options/customisations apply to individual counters, so you can have multiple counters per page and customise them all independently.

Examples

In the following examples the countdown date is “2008-10-11 16:15:12 GMT+00:00”, the same date has been used for all of the counters merely for comparison purposes, in reality you can have any number of counters countdown to any number of dates all on the same page. Again, I've also used the same styling throughout, if you want to see other styles checkout the examples in the basic version. However, the format of each counter is different, some counters will stop at zero and display messages, some are time-synchronised with the webserver, etc.

Default-Format Counter

2008-10-11 16:15:12 GMT+00:00

Example 2 (message at zero)

2008-10-11 16:15:12 GMT+00:00

Example 3 (users clock synchronised to webserver's time)

2008-10-11 16:15:12 GMT+00:00

Example 4 (en Français)

2008-10-11 16:15:12 GMT+00:00

Example 5 (message and tune at zero, plus clock synchronised to webserver)

2008-10-11 16:15:12 GMT+00:00

Example 6 (triggers function ‘doDhtmlEasyCountdownEvent’ at zero)

2008-10-11 16:15:12 GMT+00:00

Note: Sometimes the clock on the computer hosting this website runs a little fast or slow. When this happens the counters in the above examples that are not synchronised to the webserver's clock will also run fast or slow. If the webserver's clock is quite a bit slower than your own computer's clock, then the non-synchronised counters may have already counted past zero when the page loads! Obviously it's best only to use the synchronised clocks feature of the ‘pro’ countdown script if your webservers own clock is accurate!

Download

Download the script [4.39 KB], then upload it to your own website. I recommend you upload it to a folder named “scripts” where that folder lives at the top-level of your website (AKA the root of your website). The instructions below are written with this location for the uploaded script in mind. This version of the script has been 'reduced' to make it download faster, if you would like a copy that can be read and edited you can download the expanded version [9.22 KB].

Instructions

Download

Download the script (see above) and follow the instructions on uploading it to your own website.

Include The Script In Your Webpage

Follow all of the installation instruction as per the basic version, but note that the name of the download script file is countdownpro.js and not countdown.js as in those instructions, come back here once the countdown is ticking (in the default formatting).

Customisations

All customisation is performed through the use of meta tags added to the head section of your webpage, at no point do you have to edit any javascript. There are a lot of possible options, but you can choose to use as many or as few as you wish. The complete list of options and explanations follows.

Displaying A Message When The Counter Reaches Zero

Add the following meta tag to the head section of your webpage source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
  <title>My webpage</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <script type="text/javascript" src="/scripts/countdownpro.js" defer="defer"></script>
  <meta scheme="countdown1" name="event_msg" content="Happy New Year!">
</head>
<body>

As Above, But Also Play Some Music When The Counter Reaches Zero

Add two more meta tags to the head section of your webpage source:

  <script type="text/javascript" src="/scripts/countdownpro.js" defer="defer"></script>
  <meta scheme="countdown1" name="event_msg" content="Happy New Year!">
  <meta scheme="countdown1" name="event_audio_src" content="happynewyear.mid">
  <meta scheme="countdown1" name="event_audio_mimetype" content="audio/x-midi">
</head>

Note: To play music you must have a message defined as well, else the counter will not stop counting at zero but will instead start counting up.

Redirect To Another Page When The Counter Reaches Zero

Just add this meta tag to the head section of your webpage source:

  <script type="text/javascript" src="/scripts/countdownpro.js" defer="defer"></script>
  <meta scheme="countdown1" name="event_redirecturl" content="happynewyear.html">
</head>

Add Padding '0's to a Number (e.g. '05' instead of '5')

For each number in any given countdown timer you can turn on or off padding zeros. For example you might want hours, minutes and seconds each to display as 2 digits (like in a wrist-watch display) but have no padding on the days digits — 9 days 03:08:42. The example below does just that:

  <script type="text/javascript" src="/scripts/countdownpro.js" defer="defer"></script>
  <meta scheme="countdown1" name="h_mindigits" content="2">
  <meta scheme="countdown1" name="m_mindigits" content="2">
  <meta scheme="countdown1" name="s_mindigits" content="2">
  <meta scheme="countdown1" name="d_mindigits" content="1">
</head>

Note: A given number can have a maximum of ten padding zeros, but you're likely to only ever use 1 or 2 of them in practice.

Trigger a Javascript Function of Your Choosing When The Counter Reaches Zero

Just add this meta tag to the head section of your webpage source:

  <script type="text/javascript" src="/scripts/countdownpro.js" defer="defer"></script>
  <meta scheme="countdown1" name="event_functionhandler" content="myFunctionName">
</head>

In this example when the counter reaches zero the function named ‘myFunctionName’ will be invoked (provided that the function exists in the document — if it doesn't exist then this part will fail silently). The countdown script automatically passes one argument to the invoked function — a javascript Date object containing the date/time of the moment the counter reached zero. Do not include brackets when specifying the function name.

Here's an example of ‘myFunctionName’:

<script type="text/javascript" defer="defer">//<![CDATA[
function myFunctionName(objDateEvent) {
    alert("Hello World!");
}
//]]>
</script>

Customising Text

All of the text in every countdown timer can be customised individually. For every number in a countdown timer (i.e. day, hour, minute and second) there are three pieces of optional text you can place around it. Here's a breakdown for one number:

textbefore + number + (unit or units) + textafter

The number and the text parts are concatenated in the order seen above.

textbefore

Text that appears before the number, e.g. "Hours: ", some white space " " or nothing at all "":

<meta scheme="countdown1" name="h_before" content="Hours: ">

unit

The singular unit of measurement for the number, e.g. " hour", " second", "m", etc.

<meta scheme="countdown1" name="h_unit" content=" hour">

units

The plural version of the above unit. So if the previous unit is " hour" then units could be " hours".

The script automatically displays the plural version of the time unit when the number is 0 or greater than 1. When the time unit is exactly 1 the singular unit text is displayed instead. E.g. "1 hour" versus "0 hours" or "14 hours".

<meta scheme="countdown1" name="h_units" content=" hours">

If you wish to display the singular unit value at all times regardless of whether the time number is equal to 1 or not, simply make the text in the "unit" and "units" parts identical. E.g. "H" and "H".

textafter

Text that appears at the end of the number after either the units or unit text. Typically this is where you'd put ":" or "." characters, other punctuation and/or white-space.

<meta scheme="countdown1" name="h_after" content=", ">

Remember: Each of the examples above specifies the formatting for just one number in a countdown timer. So as well as h_before, h_unit, h_units and h_after there are also settings to customise the text for the other time units (minutes, seconds and days):
m_before, m_unit, m_units and m_after for minutes and
s_before, s_unit, s_units and s_after for seconds and
d_before, d_unit, d_units and d_after for days. This hopefully provides for all your text formatting requirements!

Hiding Numbers That Have Zero Value

If the counter displays "0 days 00h 00m 5s" and you would like it to read "5s" then you can use the following meta tags:

  <script type="text/javascript" src="/scripts/countdownpro.js" defer="defer"></script>
  <meta scheme="countdown1" name="d_hidezero" content="1">
  <meta scheme="countdown1" name="h_hidezero" content="1">
  <meta scheme="countdown1" name="m_hidezero" content="1">
  <meta scheme="countdown1" name="s_hidezero" content="1">
</head>

A content value of "1" means hide a number (and all of its associated text) if the value of the number is equal to 0. A value of "0" means that the number (and its associated text) will always be displayed. "0" is the default behaviour if you don't specify this meta tag setting.
Note: if this option is set for all numbers then the counter will disappear if it reaches zero!

Re-Styling The Counter When It Stops At Zero

If and when the counter reaches zero and if it configured to stop, then the message that is displayed inside your countdown timer is wrapped in another element — a “span” tag containing an “id” like so: “<span id="countdownX_complete">Message</span>” where “X” is the same number as that of the particular countdown. Example: If you only have one counter in your webpage (“countdown1”) and wish to re-style it when it stops, then create CSS rules for class “countdown1_complete”. An example of the HTML structure follows:

<div id="countdown1">2008-10-11 16:15:12 GMT+00:00</div>

would become:

<div id="countdown1">
  <span id="countdown1_complete">Your Message Here</span>
</div>

Compensating For The User's Clock Running Fast Or Slow

Since the end-users computer or internet device may have its clock set incorrectly, webpage authors with access to a time-synchronised web server can specify the true value of UTC time for the script. If set, the script will use this time value as the reference clock for it's calculations instead of that of the users clock. Setting this value does not update the end-users actual computer clock, just the clock seen in the end-users web browser whilst viewing the specific webpage. The meta tag is as follows:

<meta scheme="countdown1" name="servertime" content="2008-10-11 16:13:52 GMT+00:00">

The value set here is the current time when this web page was requested. You must use GMT (UTC) time for the value, do not use the local time of the webserver! The time format should be as seen in the example, e.g. “YYYY-MM-DD HH:MM:SS GMT+HH:MM” If you use multiple counters per page and wish to synchronise them all with the webserver, you'll need to specify the GMT time for each counter individually as there currently isn't a master countdown meta tag.
NB: You need access to server-side technologies to dynamically populate the value of this meta tag, it cannot be done with client-side javascript alone.

Big List Of All Available Meta Tags

In summary, here is the complete list of supported meta tags. The "X" should be replaced with the number of the countdown timer as explained by the naming convention outlined in the basic version. The values of the content attributes have been populated with the default settings as pre-programmed into the script. If you wanted to reproduce the default settings by explicitly writing your own meta tags, this is what they would look like. So, if you don't specify any meta tags of your own then these are the values used to display the countdown timer. If you don't want a given value then simply add your own version of the meta tag to your webpage as already described in the above examples, any meta tags you specify will override these defaults.

<meta scheme="countdownX" name="d_mindigits"    content="1">
<meta scheme="countdownX" name="d_unit"         content=" day">
<meta scheme="countdownX" name="d_units"        content=" days">
<meta scheme="countdownX" name="d_before"       content="">
<meta scheme="countdownX" name="d_after"        content=" ">
<meta scheme="countdownX" name="d_hidezero"     content="0">
<meta scheme="countdownX" name="h_mindigits"    content="2">
<meta scheme="countdownX" name="h_unit"         content="h">
<meta scheme="countdownX" name="h_units"        content="h">
<meta scheme="countdownX" name="h_before"       content="">
<meta scheme="countdownX" name="h_after"        content=" ">
<meta scheme="countdownX" name="h_hidezero"     content="0">
<meta scheme="countdownX" name="m_mindigits"    content="2">
<meta scheme="countdownX" name="m_unit"         content="m">
<meta scheme="countdownX" name="m_units"        content="m">
<meta scheme="countdownX" name="m_before"       content="">
<meta scheme="countdownX" name="m_after"        content=" ">
<meta scheme="countdownX" name="m_hidezero"     content="0">
<meta scheme="countdownX" name="s_mindigits"    content="2">
<meta scheme="countdownX" name="s_unit"         content="s">
<meta scheme="countdownX" name="s_units"        content="s">
<meta scheme="countdownX" name="s_before"       content="">
<meta scheme="countdownX" name="s_after"        content=" ">
<meta scheme="countdownX" name="s_hidezero"     content="0">
<meta scheme="countdownX" name="servertime"     content="">
<meta scheme="countdownX" name="event_msg"      content="">
<meta scheme="countdownX" name="event_audio_src"        content="">
<meta scheme="countdownX" name="event_audio_mimetype"   content="">
<meta scheme="countdownX" name="event_redirecturl"      content="">
<meta scheme="countdownX" name="event_functionhandler"  content="">

Things You Might Have Missed

• All of the meta tag customisations shown so far have been for a single countdown timer. This is why in the big list above the “scheme” attribute has a value of “countdownX”. The is because “X” is the number of the countdown timer you wish to customise. If you only have one timer in your webpage, then the value of “X” would be “1”. In this explanatory webpage there are 6 counters and if you view the webpage source you'll see groups of meta tags with X values from 1 to 6 showing which meta tags apply to which counter.
• If the counter is to stop counting when it reaches zero, you must have either an “event_msg” meta tag with non-empty value or an “event_redirecturl” meta tag with a non-empty value, otherwise the counter will start counting up.
• If you specify an audio file to play you must specify both “event_audio_src” and “event_audio_mimetype” meta tags as well as an “event_msg” meta tag, all with non-empty values. Choose an audio file with a small file-size otherwise there will be too long a wait between the counter reaching zero and the music being played. The audio player controls are hidden during playback. Audio may not work on all browsers and platforms. The audio file is only downloaded once the counter reaches zero, it is not 'cached' beforehand.
• If your webpage is written to XHTML standards, you'll want to use the closed single tag notation of the meta tag like so: “<meta scheme="countdownX" name="NAME" content="DATA" />”. Note that if you serve the page with an XML prologue then the script will likely not function due its use of the “innerHTML” — the script uses this proprietary but well-supported method for faster rendering. An XML-compatible version of the script may be made in the future, but will be significantly larger in size than the current one.
• When setting a value of UTC time via the “servertime” meta tag, there will be a time delay between the page being produced on the webserver and the countdown timer(s) starting. This is because the webpage needs to finish loading before the countdown timer(s) starts. This delay is likely to be of the order of a few seconds but will vary due to the speed of the end-users Internet connection, size of webpage and number of images etc., browser version and more. Thus, unfortunately an end-user with a time-synchronised computer will get a timer that counts a few seconds slow. However, on average more users will see a more accurate time than not.

Troubleshooting

See the troubleshooting section in the basic script version, except:

It Didn't Work But Two “**” Did Appear After The Date

If you saw two asterisks it means that the script is working fine but that the servertime meta tag has an incorrectly written date string. See the documentation for the basic version: “What Kind Of Dates Can I Use?”.

I need an example of how to populate the “servertime” meta-tag

For an ASP page written in JScript, the following will create the correct UTC date (provided that the webserver's clock is correct!):

<%@Language="JScript" CodePage="65001"%>
<%
function getCountdownServerTime() {
    function zeroPrefix(intNum) {
        return (intNum < 10 ? "0" + intNum : "" + intNum);
    }

    var objDteNow = new Date();
    return objDteNow.getUTCFullYear() + "-" + zeroPrefix(objDteNow.getUTCMonth()+1) + "-" + zeroPrefix(objDteNow.getUTCDate()) + " " + zeroPrefix(objDteNow.getUTCHours()) + ":" + zeroPrefix(objDteNow.getUTCMinutes()) + ":" + zeroPrefix(objDteNow.getUTCSeconds()) + " GMT+00:00";
}
%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
    <title>Your webpage title</title>
    <meta scheme="countdown1" name="servertime" content="<%=getCountdownServerTime()%>" />
    <script type="text/javascript" src="/scripts/countdownpro.js"></script>
</head>
<body>
    <h1>My webpage</h1>
    <p id="countdown1">2009-01-01 00:00:00 GMT+00:00</p>
</body>
</html>

I Have Not Been Able to Get Any Sound to Play

Trying to get embedded audio to work in a webpage is a bit of a minefield as it depends on individual web browsers and one or more installed plugins or ActiveX controls. Due to the complexity of all possible configurations of browsers and controls I cannot provide much advice. If it works, it works, if it doesn't it doesn't. I've had success testing with Opera and Firefox web browsers (no surprises there!) but Internet Explorer 6 is not compatible with the web standards in this area. You could always try invoking audio via Flash via the ‘event_functionhandler’ meta-tag.

Multiple Counters

Yes, see the multiple counters section in the basic script version.

Miscellaneous

See the miscellaneous section in the basic script version.

Advertisement