Update: you can find a simpler to use solution here.
From time to time I find myself reading a blog post which makes a reference to a give date / time (for example when a live stream will be activated). However the problem is that most of the time this reference is not given in my time-zone. So I’ve put together a little widget which you can see in the side-bar which displays the time in my time-zone (assuming that the clock and the timezone is correctly set on the viewers computer). It is also able to convert time references in the post to the time-zone of the reader (again, assuming that the reader has the correct date/time and timezone set and javascript activated), like the date / time when I’m writing this post (click on it to see the converted version – you must have javascript enabled and viewing this from my blog – not from the RSS feed).
Now for the main thing: how can you use it on your own blog? The easiest way is to go to the Widgetbox version (even more so if you are already using other widgets from the site), however that code has two limitations (because of the security model used by the site): (a) no clickable links will be generated for the date/time references (b) there is no iframe fallback support for browsers which have javascript disabled (because the site itself uses javascript to install the widgets in the blog, there would be no point in trying to create a no-javascript version).
The more complicated way would be to do a manual install. You will need some basic knowledge, access to your blog templates and to a host which can serve up PHP content (if you want to use the iframe fallback mechanism). In this case the steps would be the following:
- Upload PHP file to your host. You can see the source code below, or download it from here.
- Upload the javascript or you can directly include it in the page (between
<script></script>tags of course). The source code can be seen below:
Edit the last line (where it says
.init(2);) so that in place of 2 you put your own time zone (offset from GMT) - Finally insert the following code where you wish to show the clock:
<!-- The url in the SRC attribute should poin where you updated the PHP file -->
<!-- The offset is the time zone offset from GMT, the color the background color of the fallback IFRAME -->
<!-- This can be ignored if you don't want an IFRAME fallback mechanism -->
<iframe frameborder="0" marginheight="0" marginwidth="0" src="http://cdman83.byethost9.com/dateTime.php?offset=2&bgcolor=dfffbf" id="staticDisplayTime" style="width: 12em; height: 5em; border: none;" scrolling="no"
></iframe><!-- This is where the javascript will display the date/time. Style it accordingly-->
<div style="text-align: center; width: 10em;">
<div id="displayAuthorsTime" style="font-size: xx-large;"></div>
<div id="displayAuthorsDate" style=""></div>
</div><!-- The script. You can use an external file or include the script directly -->
<script src="http://hype.free.googlepages.com/dateTime.js"></script>
- To insert an date element, format it like the following code:
<span class="date"><!--Dec 08 2006 14:34:15-->click here to get the date/time written in the comment</span>