Friday, August 11, 2006
CoolClock
I made this totally sweet javascript analog clock. Geeky types like me can design their own clock just by editing a little bit of javascript. Works best in FireFox. To use in your blogspot blog you can add this to your template in the <head> section:
<!--[if IE]> <script type="text/javascript" src="http://simonbaird.com/coolclock/excanvas.js"></script> <![endif]-->
<script src="http://simonbaird.com/coolclock/coolclock.js" type="text/javascript"></script>
Then do something like this to make a clock:
<canvas id="c2" class="CoolClock:chunkySwiss:65"></canvas>
Also available as a TiddlyWiki plugin. For more information go to CoolClock.
Subscribe to:
Post Comments (Atom)
126 comments:
I notice that the current Google ad (which is supposed to be relevent to site content) is for a job seeking website. Does this mean the all knowing Google machine reads your site and thinks "Only an unemployed person would spend their time reading this."?
Yeah, I think that's it.. :)
Hi,
great job, it's a wonderful script. I'm trying to modify it to allow setting hours and minutes to, for example, show time from diferent countries. I'm trying also to create a button on the html page to change hours and minutes, so i created setHours() and setMinutes() methods, but i don't know how to call this methods from a html button, for example. Can anybody help me?, thanks.
This script is by far the best I have seen out there yet. The only flaw is that it doesn't work a 100% in M$-IE.
I was wondering: mayby if you put only one clock on a webpage, IE could handle it. On every page I have seen so far there were multiple clocks (messing up each other ?)
Greetings
Dennis,
The Netherlands
1. Good idea. I added a parameter that you can use to display a timezone specified as relative to GMT. Grab version 1.0.3 if you want to use that. To set a specific time you could comment out the "setTimeout" in the "nextTick" method and use "render" to draw the clock at whatever time you want.
2. Dennis, did you try IE with just one clock? Perhaps it is fast enough if you have a reasonable CPU. Also you can try with the second hand disabled.
Hi,
thanks for the modifications. Here is your script in use, a little bit modified:
Clock test
Alex.
Hi Simon,
I tested it in IE6 with only one clock. It just keeps on "hicking up". I think there is something one the code that isn't IE fiendly.
Would love to helpyou out, because I think this is a very nice user-friendly script, but your capabilities in the field of Javascript exceed mine (far ;))
I really hope you can solve the IE bug in time. This truly a nice script which I think can set a new standard! If you look in google you find most scripts 'bit crappy', not flexible (positioning in XHTML->CSS), not 'skinnable' etc.
More Greeting from Holland!
Dennis
By the way,
sorry for my typing-errors. Enjoying a bit of beers now ;)
Greetz,
Dennis
Alex, thanks for sharing that. It's pretty cool. I might use your ideas, especially for having an option for creating a stopped clock. Maybe draggable hands would be fun.
Dennis, maybe IE7 will either support canvas or run excanvas faster. Also I recently learned there is another version of canvas support in IE that I can try to see if it's faster. Finally maybe I can render more efficiently but not redrawing the whole clock each tick. Ps, upgrade to Firefox! ;)
would be great if the clock could
sync to server time (i.e. by doing an ajax request once a minute).
i'd like to display the "company time" on our intranet but the local windows clocks are off all the time which makes it kinda pointless...
Simon, great work!
Just two questions: how do you know in which timezone the clock is called from? In other words: what is the locale of the browser/PC?
You need that in order to be able to handle the GMTOffset. Otherwise the clock for New York would show a different time for me (in Holland) as it does for you in Australia.
Besides this a minor issue: I guess you didn't take daylight savind into account did you. Your clocks for New York and London are 1 hour off.
Thanks!
Marcel.
Marcel, the javascript Date method getUTCHours() knows about your local timezone. So the GMT offset should be okay no matter where you are. It's hours from GMT, not from local. Thanks for the daylight savings tip! I should change the examples to cities without daylight savings. :)
Anon, I agree, ajax fetch of the time would be cool and not too hard I don't think.
Thanks for your response Simon! Clears things up for me. Should you at anytime decide to take daylight savings into account, do let me know. Not sure if there are easy-to-follow guidelines to determine this, though http://www.timeanddate.com/ would suggest so.
Regards,
Marcel.
Have you looked into Opera support. It seems to almost work. There is just a minor display issue.
Also have you considered adding the ability to also display a digital clock (24h style and pm/am style)?
This is so sweet! ...but, I of course where I want to use it has several onload events already.
I moved them out of the body tag into a javascript in the head. The code inside the javascript was
function runIt(){
myfunction1()
myfunction2()
myfunction3(11,1)
}
onload=runIt;
But CoolClock still interferes with it. I know nothing about javascript. Do you see anything I could call from your script to have it work with the above -- or better yet, have a fix for the addLoadEvent yet.
I do so want to use this for a site that was due, like, a few weeks ago...
Jes
Hi, top marks for mr analog himself, this is by far the best analog clock I've seen. I have just created a new skin called 'clean' which is just what I wanted and its so easy to do.
I do however have a slight problem with pluginlabs horizontal menus and the:
body onload="PLHFO_onload()" tag
When this is present it stops the clock showing. any tips for a work-around or a better way to make it work would be appreciated. I can understand a bit, but, I'm not a programmer; I'm a designer, so scripts are difficult for me; I just don't have a logical mind so i struggle with all this code.
best regrads Lee
PS: maybe we ought to have a section for skin code here, what do you think?
How hard would it be to change it up just a bit so the largeIndicator is a number instead of a bar?
I am trying to have drop menu besides this Clock, which would have different time Zones and on clicking that it would render it.
Well I get the GMTOffset part. I am changing the css class on click on the drop down. I am not being able to call render method to refresh the display.
How do i change offset on runtime and not doing a browser reload and still refresh the time on analog clock.
Alex has an example of it but its just tht there is lot gng on there which is kidna hard to figure out.
thanks
bazztrap
Simon I must say great job.
I'm going to use the clock on an upcoming commercial website and it's perfect for what we have in mind. There was one bug we found during testing, though... a weird line across the clockface when viewed in Opera 9.10. I don't know if you are aware of this rendering bug and its cause but I thought I draw it to your attention.
To assist here is the info from the test system where the bug was spotted:
[Opera data]
Version: 9.10
Build: 8679
Platform: Win32
System: Windows XP
Java: Sun Java Runtime Environment version 1.6
XHTML+Voice: Plug-in not loaded
[/Opera data]
Cheers,
diJenerate
This looks wonderful. I saw the comment about draggable hands, that might make a great timepicker control.
Great job! Still a little slow updating in IE (jumps a couple of seconds every so often), but the bigger problem is in Safari - the clock diameter doesn't seem to scale. The clock over the PrizeByte logo in the banner here shows the problem:
www.prizebyte.com
Hey, fantastic work! Works perfectly in my Firefox :)
Is there a way to determine daylight savings change?
Hey Simon, This is a really cool script I must say. I am building a small little app that could potentially use this. I am using a browser control to show the clock. But the clock like others have mentioned, ticks every 3 - 5 seconds only. Its the same issue as the one on IE. did you manage to find a fix for that? Or is it try not to use the seconds hand, and use one clock only?
Cheers,
Umar
Great script, thanks a lot! I used it to create a really huge Dashboard Clock Widget for my wife. I made a "Transparent" skin and set it over a clock face I created with Adobe PS and it works great.
Works great, but I get a large padding around the clock when I try and make it smaller. I placed it in a HTML page and I have been able to make the clock the smaller size I want, but there's still space around the clock. Any suggestions on how to get rid of it? Thanks!
Molly
hi,it's a great script.but there's a problem.when i use onload at body section, the script doesn't work.can you help me?i can not erase onload at body section, because i need it for other javascript.thx
There's a simple fix for this "onload" problem for those of you interested:
In the coolclock.js file you need to go to the following line:
CoolClock.addLoadEvent( CoolClock.findAndCreateClocks);
and comment that out/replace it with
CoolClock.findAndCreateClocks()
Of course with this, that means your javascript must be called at the end of the file, so that the Canvas elements are already created.
Greetings... Thank you so much for creating this and allowing others like me to use this.
I only have one question, and that is, how to adjust the layers of the elements. I want to use the outterborder as a center circle over the Hour, Minute and Second hands elements. Basically, haveing it as the same color as the Seconds hand, so that it all rotates around this center piece, which makes it look like it's part of the seconds hand.
With regards to the annoying onLoad issue....
UMANG said...
There's a simple fix for this "onload" problem for those of you interested:
In the coolclock.js file you need to go to the following line:
CoolClock.addLoadEvent( CoolClock.findandCreateClocks);
and comment that out/replace it with
CoolClock.findAndCreateClocks()
The Real Solution
I tried UMANGS solution and it didn'nt work. So I commented out line: CoolClock.addLoadEvent( CoolClock.findandCreateClocks);
I then added the extrnal script calls to the bottom of my HTML document.
Finally... I added: < script type=" text/ javascript" >CoolClock.findAndCreateClocks();< / script > as the last line of my HTML page, CoolClock is now cool again!!!
:D
--Doctor Filter
Hi,
I like your clock, thanks for your work.
But currently I'm having some display errors when using Firefox 3:
CoolClock draws a line connecting the 3 o'clock tick and the hand.
I also observe this behavior when accessing your web page http://randomibis.com/coolclock/
Do you have a solution for this?
Best Regards,
Christoph
At this point in time I'm not really maintaining CoolClock any more. It's possible that I will give it some attention when Firefox 3.0 comes out of beta but I can't promise anything. Processing.js is far more interesting at the moment. See here and here.
Please, don't go! :)
Safari 4 Developer Preview (5526.11.2) does not render your clock right!
Is it Apple to blame, or?
There seem to be a few rendering issues with some of the designs on the demo page when running in Firefox 3 (at least on my Vista PC).
Still, an excellent application.
If cross-browser compatibility is an issue, it would probably be best to go for a pure JavaScript solution. See the analog clock demo at www.gapjumper.com
I think I found the bug, but I dont know anything about this stuff. I'm just a C++ programmer that was sufficient;y annoyed by this. :)
It looks like the function "fullCircleAt" is missing a beginPath(). If I slip one of those in there, the rendering seems to work much better.
I've put a fixed version up at www.bunkmonkey.com/coolclock.js
Thanks Joe,
Adding 'beginPath();' after 'lineWidth = skin.lineWidth;' in the 'fullCircleAt' method fixed the issue indeed.
thanks guys. i've added your fix in version 1.0.5.
This is great! so nice! I like it! But it will not display on IE.
Thanks anonymous. The beginPath fix for Firefox 3.0 in version 1.0.5 broke IE. Please update to version 1.0.6 which works in both Firefox and IE.
I also updated the TiddlyWiki plugin in case anyone is using that.
Can it have a background image instead? I'd like to create a neat bg image for the clock and just have the hands...
What a great looking clock, and it even seems to work as it should. It would be perfect if it was possible to add numbers to the clock, and I do know this is on your TODO-list.
I just want to say thank you for all the work. This clock will probably find its way into one of my commercial projects :)
Thanks!
Cool indeed!!!
And I would also love to have a background-image, especially one that scales with the radius ;-)
Keep it up!
Hey, Simon;
THanks for a handy nd tasteful clock! - It works just fine and looks really nice. I did want to let you know that you might consider using IBM Notation for the description of the syntax - I found that if you follow your directions 'to the letter', and leave '::' on the ned of the message to the CoolClock class to instantiate itself, rather than specifying a GMT offset for the server & a declaration for no Seconds, it paints the bezel (border) and bails out. The tricky little optional brackets might elucidate that the colon placeholders are still necessary.
Still, & once again - thanks for a clean and tasteful analog clock. It really spruces up my fallow site.
Happy holidays.
Hi Simon,
I would like to add your clock into my widget. Now. everything works fine with firefox. But, there is a problem with IE.
Regarding my widget, users can refresh or config each widget individually. I found that when I click refresh or config and then go back to the widget, the clock doesnot dis play in IE, and there is this error pop up "CoolClock.config.clockTracker.myClock is null or not an object."
Note that this problem did not happen with firefox.
Any ideas? I stuck with this issue for a while.
Thanks
Andy
Sweet goody gum drops it's cute. I modified it adding two features and fixing a bug:
1. Read time from variable
2. Animate changes between time
3. Fixed bug in blank GMT parameter handling
Code and example on my site: http://lonbinder.com/coolclock/
Thank you for the script!
I fixed up the initialization piece so that it uses Dean Edwards' elegant cross-browser "DOM ready" solution. I verified that it works with IE7, FF3, and Safari 3. I also added a check in the findAndCreateClocks function which calls excanvas' initElement function, if the canvas element hasn't been initialized yet. This can happen when excanvas' initialization (handled via DOM loading events) occurs AFTER CoolClock's initialization.
For anyone interested, it's here
I've been using a VML analog clock on my site, but it didn't work in Firefox.
I put the
-[if IE] ... all the VML code ...
![endif]-for Internet Explorer and
[if ! IE] ... coolclock code[endif]
for Firefox.
They don't look the same, but probably could with work. I just put in enough time to get it to work.
This is really a cool work. But I've noticed that it does not work on IE8. Is there a way make it work on it?
Nice! I'm using it with latest exCanvas and it works well (but no second hand decoration on IE6..8)
please remove me from this listing!!!
hi...i realy like your clock...i want to use it on my iphone theme but i need to resize it...its to big :(
i made smaller image and that is all ok but can you please tell me how to make hour Hand minute Hand and second Hand smaller...
Sorry for my stupidity. Where is the html file that was mentioned in your instruction how to add those three javascripts file? under \Program Files\Mozilla Firefox ? I have firefox 3.10
Thanks for the clock.
I've put a wrapper round it so that it can be run in Songbird - the open source media player.
You can see/download it here: http://addons.songbirdnest.com/addon/1633
Works Great on Opera 9.63
Check others on browsershots.org
Thank
Kapil
Hi, Pick, and others,
I finally got background working! And it scales with the radius! :-)
Please have a look here:
http://www.debrouwer.org/dayclock/
Cheers,
Steven
ive been using this clock for well over a year coming up to 2 on one of my sites, and its perfect for my needs.
is anyone still maintaining the code?
with ie 8 it only displays on the page when using compatibility mode, does anyoen know of a fix i can use for that please?
Thanks
Love this bit of script!
I'm trying to make the clock size dynamic to the entire browser window. I have javascript that checks the browser window size and sets a varable, clocksize, to the radius that should be set. However, the radius is set with a string literal in the class= string.
I'm not a javascript programmer so I don't know how to pass a variable value into the class="CoolClock:chunkySwiss:...." string.
How do I get a variable value in there?
does not work on IE8 :(
Brilliant script. Many thanks for this. I've been having the same problem with IE8 but i've used the latest version of excanvas and it seems to be working for me now.
replace the excanvas.js with this one....
http://code.google.com/p/explorercanvas/downloads/list
Using RC3 of excanvas results in weird line drawing. So what, no clocks for IE8, who cares …
I would like to show the day for each country based on the coolClock time like what is shown in http://www.albanyairport.com website. Any help please?
Thank you again for the clock. I contacted you a few weeks ago about using it with my iPod Touch theme. Antiquity was released yesterday, and here is an image of the lock screen.
http://www.ethereal.net/~magusxxx/theme/IMG_0033.PNG
Hello. I live in Republic of Korea is an iPhone user. apply to the
iPhone's lock screen coolclock it was surprised to see. A very good
source to say thanks for coming to disclose he'd charge. Gunggum
anything of which one kinds of watches, designed as an image, insert
the needle, I want to do is show how to appreciate. South Korea's
iPhone, which enabled communities to help a lot if you keep Maybe it's
a great honor. IPhone developers, the user places a dream.
Please please reply here.
kopome@naver.com
happy!
Hello. I live in Republic of Korea is an iPhone user. apply to the iPhone's lock screen coolclock it was surprised to see. A very good source to say thanks for coming to disclose he'd charge. i have one question of a clock designed as an image, insert the needle, I want to do is show how to appreciate. South Korea's iPhone, which enabled communities to help a lot if you keep Maybe it's a great honor. IPhone developers, the user places a dream.
How can I change the second hand tick to a more fluid motion? using it on my iphone and scrolling seems to react with a jerky motion when the second hand "ticks"
Hi, magusxxx
I did quite some stuff with the script... so now I can also show the date! :-)
http://www.debrouwer.org/dayclock/
and then click on 'DateClock'.
See Private message I sent you :-)
it works great under Safari 4.0.4 on Mac OS X Snow Leopard. I'm running a 2.4 GHz processor, with 2 GB ram, so maybe its just my Mac.
Great creation, BTW!
-Johnny
Hi Simon,
My site has been using a hacked version of your script to display static clocks demonstrating a movie's start time (e.g. http://www.filmsonfreeview.com/day.php?day=0). However since I have so many CoolClocks on the page, rendering them can take a while for the user, so I'd like to pre-render them as image files and display those instead.
I was wondering if you had any thoughts on how I might achieve this?
Thanks, George
Hello,
I am trying to use this clock for my site but no matter what I try the clock is not displaying.
I am testing on FF 3.5.9.
Any helps will be much appreciated.
Thanks,
Rijan
Excellent script! Will use it. Do you have any plans on integrating DST? Would be nice to have this option visual for users. Maybe something in text shape and/or the theme of the clock that gets a different color. Like white if it's DST and dark when it's night.
There's a new version. No new features, just cleaner looking code and some jQuery awareness. Note you have to add your own body onload now if you aren't using jQuery, so please read the notes about that if you plan to upgrade.
Hi Simon,
just modified your code a little for displaying the time just below the center of the clock. This were only a few lines in the render function.
Size is hardcoded, but it should go to the clock definition. Alas I neded a quick solution, not a beautiful one.
Here it comes
---- code snippet ----
var skin = CoolClock.config.skins[this.skinId];
var currenttime;
var hours = hour + '';
var mins = min + '';
var secs = sec + '';
-> render function here <-
// Print Time just below the center
if ( hours.length < 2 ) { hours = "0" + hours };
if ( mins.length < 2 ) { mins = "0" + mins };
if ( secs.length < 2 ) { secs = "0" + secs };
currenttime = hours + ":" + mins + ":" + secs;
this.ctx.font = '15px sans-serif';
this.ctx.fillText(currenttime,this.renderRadius - this.ctx.measureText(currenttime).width/2,this.renderRadius+this.renderRadius/2);
-> Draw the hands afterwards <-
---- code end ----
Hope this helps you finishing one item on your todo list.
Johanes
is there a way i could make it a pointed short and long hand of the clock?
thanks for this great clock :)
and thanks for the unexpected 2.0 version.
speed improvements are ALWAYS well accepted :)
@genim, no, there's no triangle support
Thanks. I have enhanced the script to also render clocks that go backwards. And will incorporate this in my page that shows off some of my backwards clocks. Thanks.
good but in IE :(
is this compatible with mootools?
I second the vote for adding DST, b/c clocks are off by an hour for much of the year, and setting them by hand every few months is a pain. I do realize the DST is different in various places around the year, so I am not sure if there would have to be some function to deal with that, but it would be very useful.
How do i change the month and the day to English ?????
The script is great but the hour hand rotation is figured wrong. In 'coolclock.js' the hour rotation is figured by the hour plus minutes divided by 60. This will never return a number greater than 1. The result was the hour hand on the clock would only get to a little past the hour, then jump to the next hour. ie: XX:45 looked funny because the hour hand was still in a 10-after position. We need a number from 1-5 to account for the 5 ticks in between each hour marker.
I changed the minutes to divide by 12. This returns a number from 0-5, thus giving me the correct position for the hour hand based on the minute time.
if (skin.hourHand)
this.radialLineAtAngle(this.tickAngle(((hour%12)*5 + min/12.0)),skin.hourHand);
Hi Simon ,
I am trying to use your clock in my project. It works perfectly fine for IE and Firefox.
I want to implement world clock functionality. for that I'm using one drop down and changing offset value.
Some how the clock size reduces after every select. Can you please help me out here.
Here basically I'm changing the class value of canvas and calling CoolClock.findAndCreateClocks(); method again on drop down selection change event.
ex:
onchange="UpdateTime()"
function UpdateTime() {
var dropdownvalue;
debugger
var canvas = document.getElementById('clockid');
var dropdown = document.getElementById('UC_World_Clock1_time');
if (dropdown) dropdownvalue = dropdown.options[dropdown.selectedIndex].value;
if (dropdownvalue != '') {
var TimeUpdate = 'CoolClock:mySkin:43::' + dropdownvalue;
}
else {
var TimeUpdate = 'CoolClock:mySkin:43::';
}
if (canvas) {
canvas.className = TimeUpdate;
}
CoolClock.findAndCreateClocks();
return true;
}
Am I missing something, or other work around for dynamically changing offset value?
clock size reduces after every call of CoolClock.findAndCreateClocks()
This problem exist for IE only. Any fix in excanvas.js ?
I don't have a fix for this. But I don't think you should need to call that findAndCreateClocks just to change the parameters.
Try this:
CoolClock.config.clockTracker['some_element_id'].gmtOffset = 2.0;
Where 2.0 is the new timezone you want and some_element_id is the id of the canvas element with the clock. Untested, but something like this should work.
Ohhh..great !!! it worked for me..Thanks Simon.
I have spent so much lookig for a fix so that the clock works in IE 8, I tried the lastest version of excanvas but that didn't help too, Has anyone found a solution yet? Please help! I would hate to take this clock off my website.
Thanks
Hi, I like your clock but small bug in this script when i select last four country then it shows in <-> value. can you help me on this.
( Is there an official fix for the hour hand positioning yet? )
Ah, same conclusion as SGLPGT, change the hour angle calculation in coolclock.js
from: ((hour%12)*5 + min/60.0)
to:((hour%12)*5 + min/12.0)
Thanks guys. Have fixed the hour hand position bug. (Version 2.1.4)
Hi, First of all, great script. Secondly, I am a bit curious about daylight savings. Norway which is GMT+1 comes out one hour wrong when parsing thru +1 in the GMToffset. It will ofc work if I send +2, but this will give me headaches since I am getting it out of a database. The question, any idea how to take Daylight savings into this?
Hi Simon! I want place the clocks in my site. In IE and Chrome it work nice, but in Opera and Firefox have a problem with display it, like this screen: http://img828.imageshack.us/img828/4659/coolclock.jpg My settings: . I use the latest version of browsers and CoolClock 2.1.4.
Whether probably to correct it? Thanks.
P.S. Sorry for my English;)
To previous message: I using this settings: id="clk1" style="display:block;" class="CoolClock:classic:32:0:+9"
Implemented DST switches, and displaying the date depending on selected timezone.
Demo is at http://clocklist.com/transitions.html
Be careful to understand what you're looking at :-) .... The time is supplied by the server, together with date information, and when when display time changes.
Still struggling with IE though.
Stephan
how do i modify the position of my clock? Give me some exmple,ok?
tickAngle: function(second)
This "tweak" varible is useless.
Reason 4/6 = (4*2)/(6*2) = (4/6)*(2/2) = (4/6)*1 = 2/3
Fraction multiplied by number will give you the same proportion.
excellent code. Its nice to see such technical help out there for free. A little over complex for my needs. i was researching how to have a dynamic clock in a js file without using a form. Keep up the good work, its appreciated by all :-)
Hello! It's a great and simple work the one you did here.
I just want to ask you how can I put three or more clocks in my website with different GMT?
I tried everything but I'll end up with three clocks showing the same time.
Thanks in advance.
Federico
Today, I made "Enlightenment Clock" with more detail on this page:
http://www.aeon.lt/daytime/
It displays all 24 hours on one analog clock. It is best for time management in the day.
On facebook: http://www.facebook.com/pages/Enlightenment-Clock/166405253411861?ref=ts
I wish to share how I added the numbers to clock (took me quite some time to figure out):
// Draw numbers of hours
for (var i=1;i<=12;i++) {
!(i%2) && skin.largeIndicator && this.drawTextAt(
i,
this.renderRadius+this.renderRadius*Math.cos(i*Math.PI/6+Math.PI/2*3)/1.5,
this.renderRadius+16+this.renderRadius*Math.sin(i*Math.PI/6+Math.PI/2*3)/1.5 );
}
// Draw numbers of minutes or seconds
for (var i=10;i<=50;i++) {
!(i%10) && (i%3) &&skin.largeIndicator && this.drawTextAt(
i,
this.renderRadius+this.renderRadius*Math.cos(i*Math.PI/30+Math.PI/2*3)/0.94,
this.renderRadius+14+this.renderRadius*Math.sin(i*Math.PI/30+Math.PI/2*3)/0.94 );
}
And before, I searched many javascript clocks, your is one of the most coolest, Simon!
Hi,
I'm trying to use the clock in an ASP.Net application, not sure if you guys are familiar with .Net updatepanels but I can't get it to work when the clock is inside one of these. I think I need to re-initialize the clock after postbacks but I'm not sure how to do it. At the moment I run
// Provided by .Net, runs
//on every postback
function pageLoad() {
CoolClock.findAndCreateClocks;
}
with no luck.
Any ideas?
Thanks
You need some round brackets in order to call that. Try like this:
function pageLoad() {
CoolClock.findAndCreateClocks();
}
Sadly your Clock looks like this http://img838.imageshack.us/i/coolclock.jpg/ in IE 9 (Final)
Please could you provide any advice.
Thx Ronny
not sure, i will try to fix it soon, thanks for the report
Please add the feature to tell AM or PM
Hey there I am trying to use the clock in a webpart to be deployed on SharePoint. Some how the canvas does not render on Sharepoint. Is this a known problem. Please let me know
just wanted to say thanks for your splendid clock, it was exactly what i was looking for!
I really like CoolClock, well done!
My only concern is that I see there's a memory leak in Firefox.
I try to display the clock with IE8 but it does not work. I use the latest exCanvas and line out the second hand direction but I get allways a javascript error.
Details zum Fehler auf der Webseite
Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Zeitstempel: Thu, 14 Jul 2011 08:03:10 UTC
Meldung: '}' erwartet
Zeile: 212
Zeichen: 2
Code: 0
URI: http://localhost/qrcode/js/moreskins.js
Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 102
Zeichen: 3
Code: 0
URI: http://localhost/qrcode/js/coolclock.js
I looked into this mentioned line but I can't find the problem.
Firefox works fine.
Is there a solution for IE8?
Thanks a lot for your help.
I fixed one problem but it still wont work in IE8:
Current error message:
Details zum Fehler auf der Webseite
Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Zeitstempel: Thu, 14 Jul 2011 08:20:55 UTC
Meldung: Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
Zeile: 102
Zeichen: 3
Code: 0
URI: http://localhost/qrcode/js/coolclock.js
Please forget my last two posts. Now it works fine. I forget to include the excanvas.js in my header ;)
Hi,
Really great clock application. However we have a few minor modifications for you.
First day/night coloring of the background:
In fullCircleAt, add 'hour' as a attribute:
fullCircleAt: function(x,y,skin, hour) {
----------
then change the lines you have to:
if(hour!==undefined)
{
this.ctx.fillStyle = '#'+(Array(4).join('66789ABCDEFFFFFEDCBA9876'.charAt(hour)));
this.ctx.fill();
}
this.ctx.strokeStyle = skin.color;
this.ctx.stroke();
----------
then in the render function , change the line:
if (skin.outerBorder) this.fullCircleAt(this.renderRadius,this.renderRadius,skin.outerBorder, hour);
----------
You might want to reorganise the code to enable the set background colors that are also possible. However we've hacked this to out own requirements.
Finally, add a title with the current time in text. So also in the hover function just add:
this.canvas.title=this.timeText(hour,min,sec);
Now users can get the exact time when they move their mouse over the clock.
Really appreciate the work you've put into this.
Will
Sweet script indeed. I'm very thankful. made this with it: https://bitly.com/nQqYqO
Hi!
That is a cool app! But sadly I have problems integrating with wordpress. I copied the files into folder and the code into the header.
But after that I don't see which code is right for my purposes. I'd like to put a clock into the sidebar. Could you help me with that?
Cheers,
Andek
Thanks a ton, it suits my requirement perfectly. Thanks again!!
I love your clock. The interface is nice and clean. I noticed that you plan to add a way to tell AM/PM in your to-do list. May I suggest having the clock(s) turn dark if it's PM?
Please add timezone Indonesia, Jakarta
but it still wont work in IE8!!!
nice one ! Since the development of Html5 and Css3 the photoshop affords has been reduced.
You can learn more about Html5 and Css3 here:
Html5 Tutorial
Hi i love your clocks plugin and i am using it in one of my site. I have a query about the clocks. I want to use the clocks with the hands not moving. I mean i want to set some fixed time for five clocks and want that the set time is fixed and dont change with time updates.
Can you help me please about this.?
Thanks
Imran
Imran, see here:
https://github.com/simonbaird/CoolClock/issues/14
Hi Simon,
How do I add a custom background image? It states that I need the pro extension but the link does not lead to a page where I can get it?
I made some changes so that the offset can be from UTC or local time; which makes daylight/standard time changes automatic.
In the HTML, the offset field is preceded by a field of "local" or "UTC".
I fear that posting the diff here isn't going to be very readable.
setting the options section:
< this.gmtOffset = (options.gmtOffset != null && options.gmtOffset != '') ? parseFloat(options.gmtOffset) : null;
---
> this.offsetIsLocal = typeof options.offsetIsLocal == "boolean" ? options.offsetIsLocal : true;
> this.hoursOffset = (options.hoursOffset != null && options.hoursOffset != '') ? parseFloat(options.hoursOffset) : 0.0;
the render section:
< if (this.gmtOffset != null) {
< // Use GMT + gmtOffset
< var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60));
< this.render(offsetNow.getUTCHours(),offsetNow.getUTCMinutes(),offsetNow.getUTCSeconds());
< }
< else {
< // Use local time
< this.render(now.getHours(),now.getMinutes(),now.getSeconds());
---
> var nowPlusOffset = new Date( now.valueOf() + ( this.hoursOffset * 1000 * 60 * 60 ) );
> if ( this.offsetIsLocal ) {
> this.render( nowPlusOffset.getHours(), nowPlusOffset.getMinutes(), nowPlusOffset.getSeconds() );
> } else {
> this.render( nowPlusOffset.getUTCHours(), nowPlusOffset.getUTCMinutes(), nowPlusOffset.getUTCSeconds() );
the options parse section:
< gmtOffset: fields[4],
< showDigital: fields[5]=='showDigital',
< logClock: fields[6]=='logClock',
< logClockRev: fields[6]=='logClockRev'
---
> offsetIsLocal: fields[4]=='local',
> hoursOffset: fields[5],
> showDigital: fields[6]=='showDigital',
> logClock: fields[7]=='logClock',
> logClockRev: fields[8]=='logClockRev'
Thank you for your great clock code. I found it by chance through the wunderground google app website; they use it in their page and when I looked at the source code, I learned it was your code. Then I added it to my site, just for fun. But I made some modifications: I added an "axle dot" because my skin required it (a variation of your Swiss skin but that tries to be more faithful to the Mondaine design), shadow and a brand name. I also made the hour and minute hands an isosceles trapezoid again to be more faithful to Mondaine. Most of these mods were hardcoded, very specific to my needs. I love it even more now! Thank you again. You can see my customized clock at oneoakway dot com.
Post a Comment