Those who need it please email on sandip@avigma.com (Plugin is free, we are planning to upload on wordpress, but need to check with author first)

And this coding is plain fantastic. I haven’t read much here, yet, but the few articles I’ve seen are top notch.

Keep up the good work!

Add this line to jquery.tzoneClock.js at line 100:

if( h >= 12 ){ h = h-12; } else if( h ==0 ){ h = 12; }

Then adjust the line at 103 to read:

animation(gVars.orange, h, 12);

That’s what I did and it works great.

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.

element.css(“left”,-Math.floor((element.width()-50)/2));
element.css(“top”,-Math.floor((element.height()-50)/2));

#fancyClock{
height:50px;
border:0px;
width:150px;
}
.clock{
/* The .clock div. Created dynamically by jQuery */
background-color:white;
height:50px;
width:50px;
position:relative;
overflow:hidden;
float:left;
}

.clock .rotate{
/* There are two .rotate divs – one for each half of the background */
position:absolute;
width:50px;
height:50px;
top:0;
left:0;
}

.rotate.right{
display:none;
z-index:9;
}

.clock .bg, .clock .front{
width:25px;
height:50px;
background-color:white;
position:absolute;
top:0;
}

.clock .display{
/* Holds the number of seconds, minutes or hours respectfully */
position:absolute;
width:50px;
font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
z-index:20;
color:black;/*#F5F5F5;*/
font-size:15px;
text-align:center;
top:15px;
left:0;

/* CSS3 text shadow: */
text-shadow:4px 4px 5px #333333;
}

/* The left part of the background: */

.clock .bg.left{ left:0; }

/* Individual styles for each color: */
.orange .bg.left{ background:url(img/bg_orange.png) no-repeat left top; }
.green .bg.left{ background:url(img/bg_green.png) no-repeat left top; }
.blue .bg.left{ background:url(img/bg_blue.png) no-repeat left top; }

/* The right part of the background: */
.clock .bg.right{ left:25px; }

.orange .bg.right{ background:url(img/bg_orange.png) no-repeat right top; }
.green .bg.right{ background:url(img/bg_green.png) no-repeat right top; }
.blue .bg.right{ background:url(img/bg_blue.png) no-repeat right top; }

.clock .front.left{
left:0;
z-index:8;
}

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.