TimeZone Corrector

Last Update: 5 July 2013
Regular License: $5
Extended License: $25
Sales: 6

TimeZone Corrector is a JavaScript tool which corrects time and dates in website content. Most of the websites in Internet are international and often these websites publish dates which are corresponding to their local timezone. Most of the times it’s really hard for visitors from different timezones to catch up with the time difference and here comes the TimeZone Corrector. With this tool the visitors will be able to see the correct time and date in their timezone only by hovering over the time and date.

Supported formats:

(H|G):i (h|g):i (a|A) (H|G):i (m|n).(d|j).Y (h|g):i(a|A) (d|j).(m|n).Y (d|j).(m|n).Y (H|G):i:s (m|n).(d|j).Y (h|g):i:s (a|A)

Examples of these formats:

14:23 7:32 pm 17:29 3.25.2013 4:53am 25.03.2011 15.11.2013 19:23:44 07.29.1990 01:55:23 am

* the date and time formats are according to PHP date() function

What it has?

The script is not dependant of any framework (jQuery/Prototype/etc). It can be used unlimited times on a page. It is organized as JavaScript Class. It has two neutral themes and unlimited number of themes can be build with CSS. It is signular file. The CSS is appended to the head of the document on run time. It is only 5KB minified and 9KB not minified. It is cross-browser compatible. It works on IE6+, Firefox, Chrome, Safari, Opera.

How to use it?

First you have to include the script in the document:<script type="text/javascript" src="tzc/tzc.min.js"></script> Then you should initialize the class by using this script: var myTZC = new TimeZoneCorrector('tzcselector'); The first parameter is the selector of the HTML element. For ID the selector must be #elemendit or elementid. For class it must be .classname (like css). You can also use element object directly. The second parameter is (optional) object with options for TimeZone Corrector. Please check all the available options from the table below. Examples: ID selector var myTZC = new TimeZoneCorrector('tzcselector'); ID selector var myTZC = new TimeZoneCorrector('#tzcselector'); Class selector var myTZC = new TimeZoneCorrector('.tzcselector'); Direct object selector var myTZC = new TimeZoneCorrector(document.getElementById('tzcselector')); Selecting with jQuery var myTZC = new TimeZoneCorrector($('.tzcselector')); Note: TimeZoneCorrector() class is the same as TZC so use the one you prefer.

Options

phpfile (string) the path to the tzc.php file. It can be relative or absolute path cookieName (string) the name of the cookie which tzc.php file creates labelText (string) the text which is before the corrected time in the tooltip theme (string) the theme name. Default: [dark]. Possible options: [dark, light]

Example of using all options: <div id="mycontent"> My long content ... with dates like this 16:30 03.10.2013 ... etc </div>

Timezone settings

How to change the default timezone of your website? Often your website is hosted in different timezone than yours. In order to correct this you should open file tzc.php in the tzc folder. In this file you have the following settings:

$timezone = 'America/New_York'; // The timezone $cookieName = 'tzc'; // The cookie name $cookieExpiration = 2; // The cookie expiration time in hours

In order to change the default timezone of your website you should first find the correct timezone name at http://www.php.net/manual/en/timezones.php Then change the value of the variable $timezone to your selected one.

The other two settings are related to the cookie which the script creates. If you want to change the name of the cookie you can do it by changing the value of the $cookieName variable. If you change the name of the cookie you should set the new name with cookieName option when initializing the TZC script. Also the cookie expiration time can be changed by $cookieExpiration variable. The value for this variable is in hours.

Changelog

v 1.0 – Initial version v 1.1 – Added support for selecting elements by class and by providing element object to the class

Example:

Selecting by class 15:23 adipiscing elit. Nam vel risus 10:57 am nunc. Selecting by class 16:23 adipiscing elit. Nam vel risus 9:57 am nunc. Selecting by DOM object 18:23 adipiscing elit. Nam vel risus 02:57 am nunc.

Code: <p class="tzcClass">Selecting by class 15:23 adipiscing elit. Nam vel risus 10:57 am nunc.</p> <p class="tzcClass">Selecting by class 16:23 adipiscing elit. Nam vel risus 9:57 am nunc.</p> <p id="tzcObject">Selecting by DOM object 18:23 adipiscing elit. Nam vel risus 02:57 am nunc.</p>

world clock