A Colorful Clock With CSS and jQuery

[eastlinkage]

http://tutorialzine.com/2009/12/colorful-clock-jquery-css

[NathanKP]

It seems to me that the gauges are off by one value. For example at 11:00 it is showing a full half circle around the hour value rather than a half circle minus one notch.

In addition when it hits 45 seconds the second gauge is one notch past 3/4 of a minute rather than right at 3/4 of a minute.

I am viewing the clock with the latest version of Safari: Version 4.0.4 (6531.21.10)

Edit: Looks like I might have found the bug in the file jquery.tzineClock.js:

  function animation(clock, current, total)
  {
    // Calculating the current angle:
    var angle = (360/total)*(current+1);
    ....

There isn't any reason to add one to the current value. That makes the gauges one interval ahead of where they should be. I'm surprised that the author didn't notice this.

Edit #2:

Verified. I downloaded the sample source code, made the change and now the code operates as I would have expected it to. I left a comment on the original article telling the author about the bug.

[Tutorialzine → NathanKP]

Hello Nathan, and thank you for the comment.

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 change the line above from:

    var angle = (360/total)*(current+1); 

To something like this:

    var angle = (360/(total-1))*current;

[NathanKP → Tutorialzine]

Hmm, that is a good point about the "empty ring" but it looks bad when the ring is off by one for the entire rest of the day.

[sam_in_nyc]

I was unaware that you could rotate things.

[fnid]

Doesn't work in Opera.