

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
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
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.

