World Times- Tested in IE7.0, Netscape8.1.2, Opera9.10, Firefox2.0.0.1 and AOL Explorer1.5

This is the World-Times script. You can simultaneously view the time in 5 different cities covering 5 different continents. In all you can find out the time in 130 given cities situated in the 6 major continents. Just choose the city from the respective drop down menu and the time will automatically be displayed in the text box immediately below. This script supports Daylight Saving Time.

We have tested the code in IE7.0, Firefox2.0.0.1, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy four (4) part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document. It also makes use of an onload event handler inserted directly into the <BODY> tag and an external .js script you need to upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

Since this is a four (4) part code, we will address each part separately.

Step One: You need to download from the script site a zip file containing three 3 files as shown below. You can click on the below individual icons to see what is contained within the three files.

1. timecode.js File

This is the external.js file that you need to upload into your directory. There are "No" reconfigurations to be made to this file.

2. wldtimes.html

This is the complete HTML document that when you open it, you will see the effect. You need to view the source code to acquire the coding needed to paste into your own document.

3. readMe.txt

This is just read me text about the author, the effect etc. This does not need to be incorpororated into the script in any way.

Step Two: Once you have the above files on your harddrive, now you need to upload the timecode.js file into your directory.

Step Three: Once the above is uploaded into your directory, you now need to add a snipplet of code into the <HEAD> section of your document to call the external .js file. See below;

Step Four: Now you need to add the onload event habdler directly into the <HEAD> tag of your document. If you are unsure or need a little refresher on howto, see the below example.

Default <BODY> Tag ~ No onload event handler

Reconfigured <BODY> Tag ~ onload Event Handler Inserted

Step Five: Once that is done, all that is left is to insert the <BODY> section of code anywhere in your document you want it to appear.

The <BODY> section of code does have some reconfigurations that can be made. They are all cosmetic pertaining to the color(s) of the effect itself. Just study this portion of code and play around with it unil if fits your site.

Little Extra Not Included In The Script: The <BODY> section of code is rather large and takes up lots of space in your document. If you would prefer to make this section of code into an external.js file (after you make your cosmetic reconfigurations*) and have only a snipplet of code in the <BODY> section as opposed to the bloated overweight code, this is no problem. We have a Generator/Converter that takes the work out of converting all the code into an external file. All you need to do is copy and paste the <BODY> section of code into our converter and follow the steps. If you would like to see our example of making use of the external .js file in both the <HEAD> and <BODY> sections, grab the respective link. To access our Generator/Converter, grab that link.
[ Generator/Converter ]
[ External .js Files <Head> and <BODY> Sections ]

* Once you put the <BODY> section of code into the converter, you can not make any more reconfigurations. That is why it is imperative you make your reconfigurations prior to adding the code into the converter.

For your Information: You may want to keep a copy of the original <BODY> section of code if at any time you may decide to change the color scheme. This way you will have the code to reconfigure then replace the external file with the updated one.

We 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 ]

World-Times
Africa	The Americas	Asia	Australasia	Europe


Local Time:		Date: