Determining Your Visitor's Time Zone

Determining Your Visitor's
Time Zone
by
William Bontrager

Permission is granted to reprint the article below in its entirety provided no changes are made to the article text and the author's name, signature lines, and copyright line are printed with the article. However, you may change the article's title.

You can capture your visitor's time and time zone for your own information. And you can let your visitor know the current time on your business office clocks.

But why would you want to?

You can determine what time of day (their time) your visitors are most active (for your feedback forms, your page statistics, information for your marketing strategies, etc.) Do they visit your page soon after they get to the office? Maybe most do so on their lunch break? Or, possibly, your site is visited most often after their kids are put to bed?
If your visitors email you in the middle of your sleep period, they may understand not receiving an answer right away.
Your visitors can determine your office hours translated to their own time zone.
You can provide your visitor with that extra tidbit of information which you, yourself, have probably wanted to know when viewing someone's website: "Gee, I wonder what time it is where they're from."

The idea of time zones is a wonderful solution for coordinating time worldwide. However, when governments got their paws on it, it became confusing to the logical brain.

Explanations of time zones can be found at http://tycho.usno.navy.mil/tzones.html and http://times.clari.net.au/Australia.html

You can look up the Universal and local time for most regions of the world at http://www.cstv.to.cnr.it/toi/uk/timezone.html

The JavaScript code in this article will put order into the confusions:

Your visitors' time is the correct time. For them. Which probably is different than yours. And your website could be on a server in a different time zone altogether. And, any could be on either side of the International Date Line.
(It took over a century for all countries to adopt the Gregorian Calendar. Thus, it may be a bit much to expect every political power to agree on what time it is.)

The answer is to base these time calculations on the clock and time zone information contained within the visitor's own computer.

You know what time it is for you. Your visitors know what time it is for them. Now, both of you can know both.

There are two separate, independent, sets of code presented in this article. (1) How to gather your visitor's time zone information. (2) How to present your visitor with your own local time.

(1)
How to gather your visitor's time zone information:

Use your existing website forms -- feedback, subscription, recommend, etc. -- and place a hidden form field into them. The hidden field gathers the information and transmits it to your CGI program whenever the submit button is clicked. The hidden field's name can be anything your program can use.

The following works just fine with MasterFeedback. See the documentation of your CGI programs to determine whether they will accept additional hidden form fields and what the fields should be called; and modify the name="..." portion as needed.

Insert the code anywhere between your <form... and </form> tags:

<script language="JavaScript">
<!-- 
var visitortime = new Date();
document.write('<input type="hidden" name="x-VisitorTimeZoneOffset" ');
if(visitortime) {
document.write('value="' + visitortime.getTimezoneOffset()/60 + '">');
}
else {
document.write('value="JavaScript not Date() enabled">');
}// -->
</script>
<noscript>
<input type="hidden" name="x-VisitorTimeZoneOffset" 
value="Browser not JavaScript enabled">
</noscript>

If your visitor's browser is JavaScript enabled and can handle the Date() function, then the code will provide a hidden field containing the number of hours your visitor's location is from Greenwich Mean Time. Otherwise, the hidden field contains a descriptive message.

The number of hours contained in the hidden field is either positive or negative. If positive, it represents the number of hours earlier than Greenwich Mean Time. If negative, later. (Note: This is opposite of most time zone maps; an idiosyncrasy of JavaScript.)

http://swissinfo.net/cgi/worldtime/ and http://www.worldtimezone.com/ provide time zone maps from which you can view your visitor's geographical time zone location.

FYI, MasterFeedback is free and can be obtained from http://www.willmaster.com/MasterFeedback

(2) This requires placing JavaScript in two places on your HTML page:

between your <head... and </head> tags, and
between your <body... and </body> tags.

It also requires you to customize one line. To do that, you need to know how many minutes you are from Greenwich Mean Time. The number could be either positive or negative. If your time is earlier than Greenwich Mean Time then the number is positive. If your time is later, the number is negative. (Again, this is opposite of most time zone maps; an idiosyncrasy of JavaScript.)

Get the number quick and easy! You can get it from http://willmaster.com/possibilities/demo/timezoneoffset.html or, if you would rather, you can place the following 15 lines of code into your browser:

<HTML>
<HEAD>
</HEAD>
<BODY>
The line should read:
<pre>
<script language="JavaScript">
<!-- 
var offset = new Date();
document.write('var officeoffset = ' + offset.getTimezoneOffset() + ';');
// -->
</script>
</pre>
</BODY>
</HTML>

Either way, you will have obtained the number you need to customize the one line.

The JavaScript code presented below will render a page similar to the demonstration page at http://willmaster.com/possibilities/demo/timezone.html

Here is the first part, which belongs between your <head... and </head> tags (the third line will need to be customized):

<script language="JavaScript">
<!-- 
var officeoffset = 300;
browser = (parseInt(navigator.appVersion) >= 4)
var weekdays=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
if(! weekdays) { browser = 0; }
if(browser) {
var visitortime = new Date();
var visitoroffset = visitortime.getTimezoneOffset();
if(visitoroffset < 0) { visitoroffset = Math.abs(visitoroffset) + 720; }
else { visitoroffset = 720 - visitoroffset; }
if(officeoffset < 0) { officeoffset = Math.abs(officeoffset) + 720; }
else { officeoffset = 720 - officeoffset; }
var diff = officeoffset - visitoroffset;
var officetime = new Date();
officetime.setTime(Number(visitortime) + (diff * 60000));
} // -->
</script>

On the third line of the above code, you see the number 300. That is the number which must be changed to reflect the number of minutes you are from Greenwich Mean Time.

The next 18 lines of code belong between your <body... and </body> tags:

<script language="JavaScript">
<!-- 
if(browser) {
document.write('<table><tr><td align=right>');
document.write("Your Local Time:</td><td><b>");
document.write(visitortime.getHours() + ':');
if(visitortime.getMinutes() < 10) { document.write('0'); }
document.write(visitortime.getMinutes()); 
document.write('</b> on ' + weekdays[visitortime.getDay()]);
document.write('</td></tr><tr><td align=right>');
document.write("Website Business Office:</td><td><b>");
document.write(officetime.getHours() + ':');
if(officetime.getMinutes() < 10) { document.write('0'); }
document.write(officetime.getMinutes()); 
document.write('</b> on ' + weekdays[officetime.getDay()]);
document.write('</td></tr></table>');
} // -->
</script>

Place the above code wherever you want to display the data.

If you need help, write to me.

William Bontrager, Programmer and Publisher
"Screaming Hot CGI" programs
"WillMaster Possibilities" e-Newsletter
http://willmaster.com/possibilities/
subscribe-possibilities@willmaster.com