We seem to be getting more and more requests recently for countdown timers on our websites, whether it’s counting down to the next KidStuf Live, the next Drive Conference, or the next service for North Point Online. If you’ve ever had to deal with calendars and dates you know that creating something automated can become pretty complex. In this post I hope to help you with some of the lessons we’ve learned by building some of these countdown timers.
First, an outstanding jQuery plugin that gives you the capability of having a running timer on your site can be found at http://keith-wood.name/countdown.html. This very flexible plugin allows you to easily create a timer - just pass in the date you want to countdown to and the name of the div, and you’ve got yourself a countdown. There are great options to customize the layout and labels, and to setup actions or callbacks for when the timer hits zero. The link above is full of examples that you can use for your site.
On the server side we have used the PHP DateTime class to build some algorithms that contain the logic required to determine the dates to countdown to. For North Point Online, this is fairly simple since it’s every week at 6pm. For KidStuf it becomes a bit more complicated since it’s the first Sunday of every month. And, of course, there are the exceptions that must be accounted for, like KidStuf in September - we’re having it the week after Labor Day weekend, so there had to be a fairly straightforward way to override the date. The main functions we use from the DateTime class are format and modify.
So this is all well and good until you run up against time zones. In the case of North Point Online it was critical to get this right since it’s a live environment that people can watch from anywhere. The event happens at 6pm Eastern Daylight Time, but our servers are in Central Time. And we have had viewers from as far away as Australia, and since the jQuery plugin runs on the browser, this all has to work from the user’s time zone. So we had to translate from Eastern to Central on the server, then to the client’s time zone on the browser, and make sure all of this was counting down to the same exact time so that people can tune in when the broadcast begins. And if that’s not enough, don’t forget that JavaScript uses 0-based months but PHP does not.
Let us know if you’re interested in any of the gory details.
August 28th, 2009 at 3:34 pm
Good stuff, Russell!
peace | dewde
September 8th, 2009 at 8:17 pm
As a follow up, after this post was written our team had a chance to look back from a higher level and came up with a better solution to the time zone problem. The issue with using the client’s time zone is that it is completely dependent on the user’s computer to have the time zone and time correct. If the time on their computer is off a few minutes or their time zone is not set correctly, then they could miss the start of the event.
So to simplify things we decided to just calculate the number of seconds from the time the page is built until the time of the event and just pass that raw number to the client. The jQuery countdown timer takes either a Date object or a number of hours or seconds, so this solution works perfectly, regardless of the client’s computer settings.
Another example of coming up with a better solution when you take a look at it from “out of the weeds”.
September 10th, 2009 at 11:30 pm
Cool. I had also thought of sniffing the end user’s IP and deriving the time zone from that, instead of the client’s browser. At first it seemed like that would be more reliable, but I don’t think the IP is always available/accurate in the HTTP request and so you’d need a fallback plan.
Your solution is much cleaner.
peace | dewde