A Colorful Clock With CSS & jQuery

The first wave of Christmas holidays passed and we are looking forward to New Year’s Eve for a fresh start at all those things we failed to do the last 12 months.

And in the mood of the upcoming holiday, this week we are going to make a colorful jQuery & CSS clock, which will help you keep track of those precious last seconds of the year.

This is also the first tutorial that features our first very own jQuery plug-in – tzineClock (soon to be released officially in a post of its own).

Go ahead, download the demo files and continue with step one.

Step 1 – XHTML

As usual, we start with the XHTML markup. The difference is, that the XHTML is not contained in demo.html, but is dynamically inserted into the page by jQuery (well there is some markup left there after all we need at least one container div for the clock to be inserted in).

This saves us from having to manually type similar blocks of code for each one of the dials (there are three of them, one for the hours, the minutes and the seconds).

Lets take a look at the XHTML that is inserted by jQuery:

jquery.tzineClock.js

<!-- The first class (green in this case) is assigned dynamically -->
<div class="green clock"</div>
<!-- This div holds the value of the unit monitored - seconds, minutes or hours -->
<div class="display"></div>
<!-- A black area that hides the underlying background -->
<div class="front left"></div>
<!-- The left part of the background: -->
<div class="rotate left">
<div class="bg left"></div>
</div>
<!-- The right part of the background: -->
<div class="rotate right">
<div class="bg right"></div>
</div>
</div>

This code is contained in jquery.tzineClock/jquery.tzineClock.js. It is generated three times – once for the hours, minutes and seconds. Those are later animated and updated every second, as you’ll see in a moment.

There are three classes that are assigned to the topmost container during the generation process – green, blue and orange. Just by assigning one of those classes, we change the color of the dial.

Lets continue with the next step.

A Colorful jQuery & CSS Clock

Step 2 – CSS

Before our style sheets can have any effect on the page, we have to include them in the head section of the file:

Making a plug-in for jQuery comes down to defining a custom function through the jQuery.fn method. This way your function is available on any elements that you normally use jQuery on.

For example, in script.js we select the div width an id of fancyClock and use the tzineClock() method on it: $(‘#fancyClock’).tzineClock();. The elements we selected are later passed to the tzineClock function and are available through the “this” property.

I have left place for future improvements of the plugin, like passing configuration options for the dimensions of the clock, color themes etc. Those will however be implemented in future releases of the plugin.

Because there might be more than one element selected, we extract only the first one of the set with the eq(0) method. Later we have the setUp() function that inserts the markup for the dials and sets up the interval which will update the figures every second.

The last two of the functions used by the plug-in are animation and rotateElement. The first one updates the dials according to the value passed (we also pass a parameter with the maximum value so that the function can calculate the rotation).

The next function is the one that actually rotates the passed element. The rotation works only for Firefox, Safari, Chrome and IE6+. Internet Explorer does not support the CSS3 rotation used by the other browsers, but provides a proprietary filter property which allows for a similar transformation.

With this our colorful jQuery clock is complete!

Conclusion

Today we created a colorful clock with the help of CSS, jQuery and our first plug-in. You are free to use the code given here in your own projects. As a bonus, I’ve included the PSD file that I used to make the backgrounds, so you can easily create new colors and designs for the dials.

What do you think? How would you improve this code?

Presenting Bootstrap Studio

a revolutionary tool that developers and designers use to createbeautiful interfaces using the Bootstrap Framework.

Actually the "off by one" bug is by design - it looks empty when the value of the dial is zero and the colorful ring around it is completely gone (and given it is midnight it would stay like this for an hour).

However you are free to change it - you'll just need to tweak line four of the second part of jquery.tzineClock.js:

Hey, Martin
Just discovered this tut/plugin very nice idea and design. Congrats.
But i missed the possibility to place the "wheels" in each other, just like an actual wall clock. So I changed a lot in the css and js, and by the way added some new functions. I would be glad if you will take a look at my changes, so if you email me I will send you my version.
Sincerely , Valerij Primachenko.

Love this, Martin. Super nice work. I made a few edits to make things countdown properly and give days leading up to the event. Thought I'd share my edits here and many thanks to Kris for getting things started!

added another dial:

// The colors of the dials:
var colors = ['pink','blue','orange','green'];

So nice..... First thanks to Martin for this nice article .. I have a small problem. Ii changed the images into 50 X 50 size and modifies some of the css of the timer ( jquery.tzineClock.css file) like below..... for getting a small timer...

Then it is working fine for Moziall firefox and Google chrome. but it is not working correctly in IE.It just displays the digits... not the circle images..... I have spent lot of time.... but no use... what is the problem with my code.

IE6 does not like the CSS class selectors used within the plugin, such as leading to z-index not being applied correctly, mangled animations, pain, misery, suffering - the usual when dealing with IE6.

Replacing them with ID selectors, while a complete pain, does fix the problem with the animation.

Also, I have been unable to get the TwinHelix IE PNG Fix to work correctly with this plugin and IE6, so grey backgrounds made everything rather ugly, but working around that was much easier - I just replaced the PNG files with transparent GIFs. Job done!

Thank you very much for the code, as well as its excellent documentation. I am currently in the process of mangling it into a countdown timer for use within our system.

Awesome Clock!I'm trying to use it on a theme for my iPhone,but i have a problem and I need help :)
My problem is this:i have to put this clock on an image,so in jquery.tzine.css in class .clock .bg, .clock .front i've set no background.The problem now is that the part of the image that sould be hidden it is no longer hidden.
Thanks for your help and great work!

Hey, all I did was go through the css and change anything with a 200 to 50, and anything with a 100 to 25. Assuming that each image is 50x50px. However, I did run into a problem with the rotating of the images. The right div shows all the time, aka the left div does not cover it. So <30 seconds you can see the whole image rotating but once it hits 30 it will stop and the left part of the image will start moving. I didn't touch any of the z index values and I have gone through everything but still no luck, still looks good, but it would be nice to have that part working.

if thats the size you want. Whatever the size you want that is where you need to change it as well as in the stylesheet. Anywhere it says 200 change to 50 and anywhere it says 100 change to 25. Basically the size you want it and half of the size you want it.

I hope this was helpful : )

If you go to http://www.idance-productions.com you can see a working example of it.

Really awesome! Fantastic work! The only problme i have is that it will always display the users system time. I guess everybody know the time of the place her or she is living. How to show the time of any other place? I would like to show the time of a country i am writing about but my users are maybe from all over the world. All should see the same time ...

Is it just more or do the minute and hour circles swap places when you turn it into a countdown. As a clock it goes hour, minute, second, but as a countdown it goes minute, hour, second. Any ideas on how to fix that? I'm going to give it a try...

For those wishing to get the clock working in Document mode: IE8 standards (ie, the X-UA-Compatible meta tag set to IE=EmulateIE8 rather than IE=EmulateIE7 as in this example), just add the following rule:

i also wanted to add a dial. i'm following the input from peep's above; eight bit studio's, kittu, jlam, colby and john m (cheers guy's). i'm not doing it for count down just a normal clock. just wanted to know that this was the correct script additions or if anything else is needed to run an extra (day) dial?

real good mate. tried implementing a similar concept animating a circular infographic element keeping count of users online... havent managed much though.. any ideas on how to animate infographic elements dynamically? thanks for the great tut.

element.css("filter","progid:DXImageTransform.Microsoft.Matrix(M11="+cos+",M12=-"+sin+",M21="+sin+",M22="+cos+",SizingMethod='auto expand',FilterType='nearest neighbor')");
in jquery.tzineClock.js with this
element.css('transform', rotate);
btw, nice job dude for making this clock