*: Unless you’re Internet Explorer, then not so much.
Every so often a designer asks for something a little different, this time it was for an animated clock that sits in the top right corner of a website. Usually that means looking for a Flash based solution, but Canvas is the new Flash… apparently; luckily Coolclock is available to plug the no-flash gap.
Coolclock is a fantastic little script that will generate a canvas based clock from the parameters you pass it via the class attribute (I don’t agree with that, but it works). It’s fully customisable by way of a little JSON data, allowing you to create your own skins. There are quite a few user submitted skins available to use on the Coolclock homepage if you don’t want to create your own.
I needed the clock to be able to change depending on the country that’s chosen from a dropdown list, here’s how I achieved it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | //Generate the clock var generateClock = function(){ //Create our dropdown, time difference compared to GMT as a value var dropHTML = "<select id='localTime'>"; dropHTML += "<option value='0'>United Kingdom</option>"; dropHTML += "<option value='+1'>France</option>"; dropHTML += "<option value='-4'>New York</option>"; dropHTML += "</select>"; //Append to the container $("#time").append(dropHTML); //Initial clock appended to the page (local time) var clockHTML = '<canvas id="clk1" class="CoolClock:swissRail:27:noSeconds"></canvas>'; $("#clock").append(clockHTML); //When the dropdown changes $("#localTime").bind("change", function(){ var value = $(this).val(); var localClockHTML = '<canvas id="clk1" class="CoolClock:swissRail:27:noSeconds:' + value + '"></canvas>'; //Empty the old clock, append the new clock $("#clock").empty().append(localClockHTML); //Fire the coolclock function to generate the new clock CoolClock.findAndCreateClocks(); }); }(); |
Very simple, the relevant HTML code is generated with JavaScript as to not leave a pointless dropdown on the page when it’s turned off. The key to the solution was calling the CoolClock.findAndCreateClocks() function from the coolclock.js file, without that the clock isn’t recreated when the dropdown is changed.
As mentioned above, the script seems to come unstuck when viewed in Internet Explorer, since IE doesn’t support the canvas tag. You can plug the lack of canvas support using ExplorerCanvas, but even then coolclock is a little quirky. I managed to get the clock working with IE6 & IE7 but IE8 wasn’t having any of it; bit of of shame as it’s a nice solution. Good news is on the horizon though, IE9 will support canvas by default so no nasty JavaScript hacks.
Eventually I decided to add the clock as a type of ‘progressive enhancement’ by wrapping the function in the following:
1 2 3 4 | //IE returns false since it uses 'styleFloat'. if(jQuery.support.cssFloat){ //IE can't see this code } |
It’s not great, and I hate having to do it but if users want to see a cool clock they will have to upgrade to a modern browser (that’s not IE8).
For those who are interested, here’s a quick demo of the code in action.
