jClocksGMT 2.0

jQuery based analog and digital clock(s).

What is jClocksGMT?

jClocksGMT is a jQuery analog and digital clock(s) plugin based on GMT offsets. Now supporting automatic daylight saving time conversions for affected timezones. Requires jQuery Rotate plugin.

Features

• Analog Clock
• Digital Clock
• Date Display
• 5 Clock Skins
• jQuery Rotate
• Custom time formats
• Custom date formats
• GMT Timezone Offsets
• Automatic Daylight Saving Time conversion on affected timezones
• Easy CSS customization
• Easy image customization

Compatibility

Chrome, Safari, Firefox, Opera, IE7+, IOS4+, Android, windows phone.

Usage

Javascript

Include jquery and the jClocksGMT script in your head tags or right before your body closing tag.

<script src="js/jquery.js"></script>
<script src="js/jquery.rotate.js"></script>
<script src="js/jClocksGMT.js"></script>

CSS

Include the jClocksGMT CSS style in your head tags.

<link rel="stylesheet" href="css/jClocksGMT.css">

HTML

Use the following markup for your clock.

<div id="clock_hou"></div>

Fire the plugin

Bind the jClocksGMT behaviour on every link with any id or class.

$('#clock_hou').jClocksGMT({ title: 'Houston, TX, USA', offset: '-6', skin: 2 });

Documentation

Default options:

title: 'Greenwich, England', // String: Title of location (defaults to Greenwich, England)
offset: '0',                 // String: Set Standard GMT offset (+5.5, -4, 0, etc) (do not consider daylight savings time)
dst: true,                   // Boolean: Does the location observe daylight savings time (set FALSE if location does not need to observe dst)
digital: true,               // Boolean: Display digital clock
analog: true,                // Boolean: Display analog clock
timeformat: 'hh:mm A',       // String: Time format (see below for formatting options)
date: false,                 // Boolean: Display date
dateformat: 'MM/DD/YYYY',    // String: Date format (see below for formatting options)
angleSec: 0,                 // Integer: Starting angle of second hand
angleMin: 0,                 // Integer: Starting angle of minute hand
angleHour: 0,                // Integer: Starting angle of hour hand
skin: 1                      // Integer: Set 1 of 5 included skins for the analog clock 

Common offsets by time zone:

(only use the number after GMT: GMT-2 = offset: '-2' Daylight Saving Time converted automatically)

To find specific GMT offsets,

goto: http://www.timeanddate.com/time/zone/

search: location

use: Current Offset

if location is currently observing DST, add 1 to offset

Time Formatting:

Date Formatting:

Creator

Richard McMaster

• http://kingkode.com
• http://twitter.com/_kingkode

License

jClocksGMT is available under the MIT license.