Comments on: A Colorful Clock With CSS & jQuery

By: Chris

Chris — Sat, 05 May 2012 20:27:48 +0000

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.

By: CK

CK — Thu, 26 Apr 2012 10:50:03 +0000

the time of day (AM/PM) would be awesome (displayed in the middle od the hours circle)...

By: Muhammad Qasim

Muhammad Qasim — Sun, 22 Apr 2012 10:28:15 +0000

Hi, The countdown is no longer available at the provided site as its launched now. Have you got it posted somewhere else?

Regards

By: proball

proball — Sat, 14 Apr 2012 05:55:22 +0000

Any one know how to display time of day (AM or PM).

By: John M

John M — Fri, 13 Apr 2012 16:37:56 +0000

Thanks for consolidating what eight bit studios published. Don't forget to make this changw if you add an additional circle:

line: 62: for(var i=0;i<3;i++)
to
line: 62: for(var i=0;i<4;i++)

If you don't make that change, it will not work.

Thanks dude!

By: peter piper

peter piper — Mon, 09 Apr 2012 00:11:48 +0000

Anyone know of a tweek to get this looking OK in IE as well, its disjointed in IE and jumps about

By: Colby

Colby — Fri, 06 Apr 2012 01:34:19 +0000

I just finished getting this to work as a countdown timer. All you need to do is: Change:

setInterval(function(){
		
	var currentTime = new Date();
	var h = currentTime.getHours();
	var m = currentTime.getMinutes();
	var s = currentTime.getSeconds();
			
	animation(gVars.green, s, 60);
	animation(gVars.blue, m, 60);
	animation(gVars.orange, h, 24);
		
	},1000);
}

to:

setInterval(function(){
  var currentTime   = new Date();
  var futureTime = new Date('May 28, 2012');
  var dd = futureTime-currentTime;

  var h=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
  var m=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
  var s=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

  animation(gVars.green, s, 60);
  animation(gVars.orange, m, 60);
  animation(gVars.blue, h, 24);

 },1000);
}

as well as Change:

if(angle<=180)
{
	// The left part is rotated, and the right is currently hidden:
	element = clock.rotateLeft;
}

to:

if(angle<=180)
{
	// The left part is rotated, and the right is currently hidden:
	element = clock.rotateLeft;
	clock.rotateRight.hide();
}

With that you can also add in the days if you want which you would just add a new color to the : // The colors of the dials:

var colors = ['orange','blue','green'];

and then add the days to the code above which would make it:

setInterval(function(){
   var currentTime   = new Date();
   var futureTime = new Date('May 28, 2012');
   var dd = futureTime-currentTime;

   var d=Math.floor((dd%(60*60*1000*24*365))/(24*60*60*1000)*1);
   var h=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
   var m=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
   var s=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

   animation(gVars.green, s, 60);
   animation(gVars.orange, m, 60);
   animation(gVars.blue, h, 24);
   animation(gVars.pink, d, 85);

  },1000);	
}

Also for scaling it down what you do is: Change:

element.css("left",-Math.floor((element.width()-200)/2));
element.css("top",-Math.floor((element.height()-200)/2));

to:

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

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.

By: maor

maor — Fri, 30 Mar 2012 13:52:54 +0000

how can i put multi number of clocks in the same webpage??

By: maor

maor — Fri, 30 Mar 2012 13:49:49 +0000

currentTime.getHours()%12

By: Maddy

Maddy — Wed, 21 Mar 2012 00:38:27 +0000

Does anyone have a working version of the 50px plugin, or know precisely how to scale it down? I love this, but I can't get the rings to work in place in Safari or Mozilla.