I am currently in the states and as a result I have been communicating with my family using Skype. With the O’Connor clan spread across three time zones I have been confused by the time difference on more than a few occasions. Sure I could just check on google whenever I wanted to call but where’s the fun in that:)
In this post I will describe how I built a page that displays each family members time and locations in a clear, intuitive and fun way.
1. Raphaël and an updated Analog clock.
3. Debugging in JS
While applying the principles learned in section 2 to make the code more object orientated I got my feet wet with the chrome JS console for debugging.
Firebug appears like it could be an option worth considering in the future.
4. Time out function issues
While writing the code I had issues with the setInterval() method. It appears that when using it with OO code the method passed in to set Interval would be called from a global scope and not the class instance scope . I used the work around at http://www.vonloesch.de/node/32 which allowed me to get multiple clock instances displaying and updating correctly.
For more in depth understanding this article was also very informative on this topic.
5. Float the divs
Being out of practice with css It took me 5 minutes(too long) to figure out to float the divs to get my clock displaying side by side. This article got me going in the right direction.
6. Time: it’s all relative baby.
Lifted the code from this script and adjusted to suit my needs eg: to get the clocks displaying times in different time zones.
Did a bit of restructuring, based the layout on the webpage http://html5boilerplate.com/ .
- There appears to be an issue with synchronisation at times. Possibly because the library is asynchronous.
- It could be prettier, I’m happy that there is enough functionality and I will make it look good in the future if I can find the time.
- I could also improve the code structure as this is only the minimum working version.