Marketers all over the Internet has been using
countdown scripts and pre-launches to build anticipation. The problem
is they use a countdown clock that uses the user's computer. This
countdown uses the host's clock for consistancy.
COMMON PROBLEM WITH MOST COUNTDOWN SCRIPTS
Marketers all over the Internet has been using countdown scripts and
pre-launches to build anticipation. And it’s a great strategy to build
interest around your product while creating buzz.
I am sure you can find a few if you Google for it. But here’s the
problem with most of those scripts. It runs on your visitor’s computer
clock…
You may have set your countdown at a specific date and time like 10
September 2008, 9.00 am. But you didn’t set the timezone? Without that
answer, a visitor in Sydney, Australia may see the countdown ending 17
hours earlier than people in New York, USA. The guy in Australia could
see that the countdown ended when your website is not ready yet — you
don’t want that!
The safest method for this is to make sure that your script uses the
date and time of your server, one specific clock that everyone refers
to, and not time from the visitors’ personal computer. So some
server-side programming like PHP is required.
A PHP-JAVASCRIPT COUNTDOWN SOLUTION
Alright, obviously I have a solution for you.
Before I get into the details, let me first tell you how it works.
I am assuming that you are total newbie at this. So please bear with
all the details that I am about to share. With any server-side
programming like PHP, ASP, Perl and the rest, the data that you send to
the web browser does not always have to be a HTML.
For example, I can write a PHP script to read actual binary data
from an image file and send it to the browser. For the browser to know
that what you are sending is not HTML, all that I need to do is just
add some extra HTTP header information. For a JPEG image file, in PHP
code, it will be something like this…
header("Content-type: image/jpeg");
Now, I can do the same when I want to send in Javascript instead of HTML…
header("Content-type: text/javascript");
We all know that you can use Javascript to create an animated
countdown on your website. The problem is that when we choose the date
and time to countdown to, the Javascript will refer to date and time on
your computer, and not from the server
Now that we know PHP can deliver Javascript codes, we can first let
PHP get the date and time from the server, generate the Javascript, and
then deliver it to the browser.
Assuming that you are building a web page to display the countdown.
Let say that it’s index.html. Inside that file, we can call our
PHP-Javascript using a simple code like this…
<SCRIPT language="JavaScript" src="http://domain.com/countdown.php"></SCRIPT>
Can you see that we are actually calling a PHP file? The external Javascript is actually countdown.php.
Alright, now that you know how to call the script from your web page, the next thing is about what is in our countdown.php?
HOW TO USE THE COUNTDOWN SCRIPT
There are two important information that you need to prepare to make
the countdown script works. First is the date and time that you are
counting down to. Second is the timezone you want to use as your clock.
When you have those two, all that you need to do is include those
two information when you call the script from your web page. Here’s an
example.
<SCRIPT language="JavaScript" src="countdown.php?timezone=Asia/Kuala_Lumpur&countto=2020-01-01
00:00:00&do=t&data=HAPPY NEW YEAR MALAYSIA!"></SCRIPT>
You can put that code anywhere between your <BODY>…</BODY>. It should work just fine.
Just a little explanation… In the above example, I have set the
timezone to Asia/Kuala_Lumpur. It’s a city in Malaysia, is the South
East Asia. You can choose from other timezones.
Some common ones would something like:
US/Eastern
US/Pacific
US/Central
Europe/London
Asia/Hong_Kong
Asia/Tokyo
Australia/Sydney
Australia/Melbourne
After that, I put in the date and time that I am counting down to.
You have to use this format – “YYYY-MM-DD HH:MM:SS”. It will not work
if you got any of these wrong.
You also need to define what you want to happen after the countdown
is over. If you look through the short code again, you will find do=t.
The script takes in either a “t”, “u” or an “r”. For text or
redirection, you need to supply extra information using the data
variable.
do=u&data=[URL], to redirect to a specific URL.
do=t&data=[text], display a text.
do=r, reload the web page, data variable is not need.
CUSTOMIZING YOUR COUNTDOWN LOOK AND FEEL
For this, you need to use CSS. The countdown timer is built with a
<div id=’cd’></div>. The DIV has in ID, which is ‘cd’. So
now you can also apply some CSS to the element.
You can simply put CSS definition in your web page between the
<HEAD>…</HEAD>. A simple code would be something like:
<style>
#cd {
width: 200px; height: 50px;
margin: auto; padding: 5px;
font-family: Arial; font-size: 18pt;
}
</style>
You can go wild with the CSS. Some really crazy things that you can
do is like assigning a background graphic, make it float on a special
layer, or anything else you can think of.
WARNING…
This script is not created with proper error trapping. If it’s not
working, then something is wrong with your implementation. And I can’t
provide support for it either. Oh yeah, it’s poorly documented to.
So use at in anyway you want but don’t bug me with it.
Alright, I guess that’s all then… go wild!!
|
