World Time Zone Clock ~ Get The Time From Anywhere In The World ~ Tested in IE6.0, Netscape8.1, Opera9.0, Firefox1.5.0.4 and AOL Explorer1.2

* The reason we have this effect located on a separate page is because it is quite large and would take up alot of space on this page. If you would like to see howto add this popup window to house this effect, see [ further down ] the page.

G et the time for anywhere in the world. Just select from the dropdown menus to find a place you want to know the time.

We have tested the code in IE6.0, Firefox1.5.0.4, Opera9.0, Netscape8.1 and AOL Explorer1.2. This script worked in IE and AOL Explorer1.2. All other platforms tested you will get an erroneous reading. It degrades well and you will not get any error messages.

D epending on your knowledge of HTML and java scripts, this is an easy, three (3) part copy and paste code with cosmetic reconfigurations only within the <BODY> section.

Copy/Cut & Paste the coding into the <HEAD> section of your HTML document.

Add the onLoad event handler directly into the <BODY> tag.

Copy/Cut & paste the coding anywhere into the <BODY> section of your HTML document you want the effect to appear.

I f you need a little refresher on howto add the onload event handler directly into the <BODY> tag, see the below examples:

Default Complete <BODY> Tag ~ No onload event handler

Reconfigured Complete <BODY> Tag ~ onload Event Handler Inserted

For your Information: The site you get the script from will have you download a zip file (worldclock.zip) containing two (2) files:

This file is the complete HTML document
This is the .txt document with all the coding for the effect.

Select either of the two to see what they contain.

O nce you have downloaded the worldclock.zip file, open either of the two files. The worldclock.htm document will be the effect itself and the worldclock.txt document will be the copy and paste code in the form of a complete HTML document. Just study the code and copy each individual section* into your document in the prescribed locations (<HEAD>, <BODY> tag and <BODY> sections).

* The onload event handler is very easy to miss if you are not careful. It is tucked away and disguised as an "Incomplete" <BODY> tag without any attributes of it's own. See below where it is located within the complete HTML document code:

</script>
</head>

<body ONLOAD="SystemClock()">

<form NAME="clockForm">

In reference to the above "Incomplete" <BODY> tag. As silly as it may sound and we have had questions on it. "Do Not" attempt to paste that entire line of code into your <BODY> tag. Just paste the "Color Coded" section. See below.

Right Way

Wrong Way

<body <body ONLOAD="SystemClock()"> bgcolor="#000000" text="#ba55dc" link="#fff8dc" alink="#fff8dc" vlink="#fff8dc">

A s we stated earlier, the only reconfigurations are "Cosmetic" changes that can be made to fit more into your site. These are all made within the <BODY> section. See below a small section of where and howto reconfigure the colors within the <table> </table> that the effect is located.

<form NAME="clockForm">
<div align="center"><center><table BORDER="1" cellpadding="2" cellspacing="10">
<tr>
<td ALIGN="center" VALIGN="CENTER" COLSPAN="2" bgcolor="#000000"><font SIZE="+3"
FACE="Verdana, Arial, Helvetica" color="#FFFF00"><b>World Time Zone</b></font></td>
</tr>
<tr>
<td ALIGN="left" VALIGN="CENTER" bgcolor="#FFFF00"> <b><font COLOR="#FF0000"
FACE="Verdana, Arial, Helvetica">Your Sytem Time:</font></b></td>
<td ALIGN="left" bgcolor="#FF0000"><input TYPE="text" NAME="digits" SIZE="32" VALUE></td>
</tr>
<tr>
<td ALIGN="center" VALIGN="CENTER" COLSPAN="2" bgcolor="#000000"><script
language="JavaScript">

J ust follow the pattern throughout the <table> </table> code within the <BODY> section until the colors, etc. fit your site.

Note Of Professionalism: In regards to the little "Close Window" button located on the page we have the effect. It elevates your site's level of professionalism by adding the little "Close Window" button or link on the linked-to page (only if you have it open in a new window). It may not seem like much but little things such as this stick in people's minds as a little convenience not required but done anyway. Below are the codes for the link, button and a linkto another page for the effect of closing the page by clicking on a graphic. These buttons are placed anywhere in the <BODY> section of your document you want it to appear.

CLOSE WINDOW FORM BUTTON

<form>
<input type=button value="Close Window" onClick="javascript:top.window.close();">
</form>

CLOSE WINDOW LINK

<a href="javascript:window.close();">Close Window</a>

[ Close Window ]

[ Linkto Close Window By Clicking Graphic ]

Little Extra Not Included In The Script: To add the little pop up window, just build a separate page with nothing on it but the "World Time Zone Clock" and the little "Close Window" button. Once this is done, use the below little javascript link to call the page.

<A HREF="javascript:void(0)" ONCLICK="open('URL To World Time Zone Clock', 'myannouncer','toolbar=0,menubar=1,location=0,resizable=0,width=600,height=350')">
Open World Time Zone Clock</A>

Define Above Areas Of Reconfiguration

URL To World Time Zone Clock This is the address of the page you have built to house the effect.
If the attribute is defined with a zero (0), that arrtibute will "Not" be visible.
If the attribute is defined with a one (1), that arrtibute "Will" be visible.
The width and height set in pixel (px) size.

[ Return From Whence You Came ]

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 ]