Drop Down World Clock. Tested in IE6.0, Netscape8.1, Opera8.54, Firefox1.5.0.1 and AOL Explorer1.2

L ook up the time of various cities around the world easily with this useful script! Configurable to use cities of your choice. Just use the drop down menu to select the part of the world you want to know the time and it will digitally display it. The "Local Time" is based on the settings in the computer that is viewing the time.

We have tested the code in IE6.0, Firefox1.5.0.1, Opera8.54, Netscape8.0.4 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

D epending on your knowledge of HTML and java scripts, the default is a one part copy and paste code that is inserted anywhere in the <BODY> section of your document where you want the effect to appear.

A s you can notice, this effect only takes up very little space on the page. If you notice the "color" of the time display, it is dictated by the default color within your <BODY> tag. We have for this example have our default text in the body tag set for the color of #00ff7f. See the below body tag.

</head>
<body bgcolor="#000000" text="#00ff7f" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">

O nce you have the code inserted in the <BODY> section of your document, you are basically done.

T o use your own cities, simply add them into the drop down menu (via <OPTION> tags), and specify the city's offset (from GMT) inside each tag's value attribute. See the below example including a link to the different time zones and offset numbers you require.

<td width="100%">
<select name="city" size="1" onchange="updateclock(this);">
<option value="" selected>Local time</option>
<option value="0">London GMT</option>
<option value="1">Rome</option>
</select>

F or example, lets say we want to add the time for "Kabul". We know that the offset for "Kabul" is GMT* +4. We found this by following the below link:
[ GMT Offset ]
* [ Define GMT ]

And once this page opened we scrolled down until we found the place we wanted to add and saw the offset in relationship to GMT. In this case it is +4 for Kabul.

S o now that we have the information we need, lets add another option value into the script for the time zone we want.

<option value="4">Kabul</option>

N otice since it is a +4 for Kabul, we do not have to add the plus sign (+) into the code. It is a "given". You only add the minus - sign if it applies. (See below for Hawaii)

N ow the below will now reflect the addition of a new time zone into the script. Also be sure it is inserted above the closing </select> tag.

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]