PHP-Javascript Countdown Script With Timezone Setting
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?
Without going into much detail, so here’s the script.
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/MelbourneMore list can be found at http://www.php.net/manual/en/timezones.php
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!!
This entry was posted
on Thursday, September 11th, 2008 at 5:01 am and is filed under Web Tricks.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Great Stuff
thanks
Thanks for the free scripts..
~maverick~
http://www.pjlighthouse.com
I’ve been looking for this for a very long time, it’ll be great to have it on my “time limited” promotion.
Thank you!
Eric
thanks for the great script
Good stuff!
Love it, thank you.
I have been searching for the countdown script in google, now i got Thanks alot for the script
The script didn’t work out-of-the-box because many PHP tags were open. After closing them (and sometimes opening) them it works fine.
Thanks for the script,
Roy.
just what i was looking for but there is an error:
do=u&data=[URL], to redirect to a specific URL.
u actually isn’t defined but r is and instead of reload it is actually for redirect.
so i made it
do=r&data=[URL], to redirect to a specific URL
it works
go to my site at 1-1-09 EST