Javascript Graphic Clock

Written by Kendal Van Dyke

Background
Version History
Known errors
Adding the Clock to your page
Receiving Updates via E-mail
Sites using the clock
Additional Resources

Netscape's Javascript, originally created as a scaled down version of Sun's Java, provides a powerful scripting language that can be used to create more user friendly and appealing HTML documents by providing access to GUI events and window elements inclu ding widgits, frames, and internal document storage arrays. One of these arrays in particular is the document.images[] array. One feature of access to this array is that the source of an image contained within the array can be changed. This is a very powerful feature because it allows a user to create dynamic documents in which the visible images in the document can be changed based on window events or results of a call to a function. One popular example of this in action is changing an image that is part of a menu so that when the mouse pointer is over the image it will "light up" or perform some other effect to signify which menu item is currently chosen. The Javascipt graphic clock takes advantage of the ability to change an image source in order to constantly update to reflect the current time. It works by using a function to update the clock that does not depend on any GUI event and is self sufficient by calling itself recursively.

VERSION HISTORY

Version 1.0

Version 1.0 was the first attempt to get an updating clock working. And, it worked. The code for version 1.0 is not much different from the currently existing version's code. One minor thing about version 1.0 was that the images were not pre-loaded. This means that if one of the digits changed to a digit that had not previously been loaded that the script would call the new image from the server on which it resided. The same follows for the "am" and "pm" images. Not a big deal, however it required that the viewer of the script be online for it to get an image previously unviewed.

Version 2.0

Version 2.0 added an array and pre-loaded all digit images as well as the "am" and "pm" images into the array when the script was initially loaded so that the viewer did not have to be online in order for the clock to run and update digits with previously unviewed digits.

Version 2.1

Version 2.1 fixed a small bug that caused the clock to show a "0" if the time were 12 am. This occurred because of an error when converting from military time (24 hour clock) to the "standard" time (12 hour clock) that the clock uses.

Version 2.11

Version 2.11 changes the URL of the link for the page you are viewing right now that is associated with when a person clicks somewhere on the clock.

Version 2.2

Version 2.2 fixed a bug that caused a Javascript error that occured when the hour switched from a double digit hour to a single digit hour (i.e. 12 AM or PM to 1 AM or PM)

Version 2.3

Version 2.3 fixed a bug that caused a Javascript error that occured when the user resized their broswer window. This fix eliminated the need for the findIndexOf function, which has been removed from this version.

KNOWN ERRORS

There have been a few concerns expressed to me that when the clock script is placed inside a set of tables that the user will occasionally see a duplicate set of clock images in the upper left corner of the screen. I have seen this happen, and I am not quite sure of exactly why it happens to tell the truth. I think it has something to do with how Netscape handles the Javascript code, but I could very well be wrong.
In any case, there are no other known errors at the present time. If you happen to experience the problem described above, or you find some other error, please report it to me!

ADDING THE CLOCK TO YOUR WEB PAGE

Adding the Graphic Clock to your page is very easy. Follow these simple steps and you too can have a graphic clock on your web page:

First you will need to find or create for yourself a set of digit images 0-9, a separator image (in most cases an image of a colon), "am" and "pm" images, and a blank spacer image. All of these images need to be of the same height. The digit images all need to be of the same width, as do the "am" and "pm" images. Once you have these images, place them all in a directory together where they can be referenced by the HTML document that will display the clock.

Next, you will need to copy the script to your HTML document. When you copy the code into the document, you should place it at the point in the document where you want the clock to appear. You might have to play with the alignment (ie. Place CENTER tags around the start and end of the script) to get it to appear in the right place. For even better layout control, you could create a table and then in the table data place the script. The code for the script can be viewed HERE.

Once you have copied the code into your document, you will need to change a few things in the code itself. Don't worry, it's not hard - you're only changing a few numbers around. Here are the things that you need to change:

Go to the line in the script that contains var image_base = "graphics/clock/"; You will need to change "graphics/clock/" to reflect the directory where you have the images stored. This directory should be the directory in relation to where the HTML document you want the clock to appear on resides.
On the line containing var image_type = ".gif";, change ".gif" to reflect the type of images you are using (e.g. .gif, .jpg).
On the line containing var image_height = 18;, change the number 18 to the height in pixels of all of your images.
On the line containing var digit_width = 13 , change the number 13 to reflect the width in pixels of your digit images.
On the line containing var ampm_width = 38, change the number 38 to the width of your "am" and "pm" images in pixels.
On the line containing var separator_width = 6, change the number 6 to reflect the width in pixels of your separator image.
Finally, the line which contains var clockDelay = 900; controls the amount of time between when the clock switches the separator image from your separator image to your blank image, and vice-versa. Keep this number at 900 for the change to occur every second, or change 900 to 400 for the change to occur every half second.

And, believe it or not, you're now done! Assuming you put the images in the correct place and properly changed the code, your clock should now appear in your document.

RECEIVING UPDATES VIA E-MAIL

To save yourself the trouble of having to revisit this page every so often to see if the code has been updated, you can add your name to a distribution list to receive updates automatically through E-mail. Updates include version changes and announcements of new digit packages (digit packages coming soon!). If you would like to add your name to the distribution list, please submit your E-mail address using the form below.

Email:

SITES USING THE CLOCK

Here are known sites that currently use the clock script:

http://op.nas.net - Opinion Piece
http://info-s.com - The Info. Service
http://www.helsinki.fi/~pkaki/ - Cage's Pages
http://www.conn2000.com/personal/sluebbe/index.htm - Welcome to M.I.D.I.
http://www.netcade.com - The Netcade Wholesale Computer Parts
If you would like to have your site listed here for others to see (and visit) then please send E-mail to kendal@freenet.tlh.fl.us.

ADDITIONAL RESOURCES

There are all kinds of resources for Javascript available on the net. Here are what I would consider a few of the better ones to get more information about the language:

Digit Mania - OK, so this isn't necessarily a Javascript resource...but you'll find a section here devoted entirely to digits you can use for a clock. A real time saver if you don't care (or don't know how) to make your own digits.
Javascript Authoring Guide - straight from Netscape, the creator of Javascript
comp.lang.javascript - The Javascript Usenet group

Do you have any comments, questions, or anything about the clock that you can't figure out? If so, you can email me, Kendal Van Dyke, at: kendal@freenet.tlh.fl.us

Last Modified: August 6^th, 1997