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
Justo lo que estaba buscando.
Mil gracias.
[...] 22. Create a Countdown Using PHP [...]
This script is brilliant.
I’m trying to use multiple calls on a page, and it’s only returning the latest incident. Any suggestions?
Ta.
Is there a way to embed it in a website? specifically Livejournal? Thanks
Thanks!
Is perfect. Although how can i remove it from the i need the count in line with some other text.
Thanks a billion !!!
Your solution solved my problem.
I appreciate your effort.
Thanks again.
not working on IE 6.0.
it reported “unterminated string constant” error
Hi I have a small question and was wondering if you would be able to help me out.
I am wanting to set the counter for 8 hours.
Software on the server automatically creates static pages from sql database every 8 hours. So if it is possible to replace xxxx-xx-xx with current/today’s time and set the clock to +4 hours of current time.
Do you think its possible? Any tips would be very much appreciated.
Thanks.
Hi,
I tried using direct time input after stripping the date, something like
However it does not produce anything.
Do you know how it would be possible to make this work?
Thanks again.
hum.. seems like the input does not allow any url.. Here is the sample I was referring to
SRC=”/test/countdown/countdown.php?countto=23:00:00
Very nice information. Thanks for this.
Can you please post the countdown.php exactly as seen in the demo
any one who has this working 100% could they please send me the countdown.php hackalive(at)gmail(dot)com
hello
I need more than one page, right now I am only getting one clock at a time, how can a multiple clocks be configured?
Sincerely
Mordechay
I mean: I need more than one clock per page, can it be done?
Sincerely
Mordechay
if you know how multiple countdowns can be done please e-mail me at: tamord@gmail.com
Thanks
Well, I found most the php-part pretty boring and useless.
If I got right the idea, you use the php to get the server time, and start counting using the javascript on the screen. Awful. Then you certainly dont need all that php stuff including the difference function and all those mktime variables.
I cut ‘em out, it still works same way )))
Dont waste your time bro next time, start counting in a more efficient way
Using server time instead of client machine time will create a single point of reference for everybody, no matter where they are in the world. Yep, the JS is for the animation and the PHP is for deriving server time.
As I mentioned, the objective for this is so that people in Australia (or other locations) will more or less see the same countdown as the people in China, or any parts of the world for that matter.
Read about the problems again above… maybe you’ll understand the reason for this script.
And of course, there other ways to do this - Flash, Java Applet, Ajax … this is just an option of how I would tackle the problem.
Again, read about the problem…
your 5 star.
take it.
best in my favorite thanks a lot.
sorry i cant donate it very simple and best.
your 5 star.
take it.
best in my favorite thanks a lot.
sorry i cant donate it very simple and best.
your 5 star.
take it.
best in my favorite thanks a lot.
sorry i cant donate it very simple and best.
gostaria de saber se o IPN PHP Script para Download
se é possivel usar ele em sites brasileiros?
se possivel me mande um e-mail,desde ja agradeço!sou visitante assiduo do seu site,esta de parabens tem otimos assuntos,olhe eu preciso muito deste script se possivel me ajude.
obrigado pela atenção.