Make Your Own jQuery Digital Clock

It is indeed a nice feature to display current time using jQuery or a ticking digital clock on your webpage along with weather information. So in this post, I will show you how you can create your own jQuery digital clock with help of "jDigiClock" jQuery plugin.


jDigiClock is a jQuery plugin inspired from HTC Hero Clock Widget. Beauty of this plugin is that along with the time it also displays the weather information based on particular city. And it also provide option to see weather forecast for next 4 days. Above that the style looks amazing.

How to use it?


To use the jDigiClock plugin, include the jQuery library, the jDigiClock source file and jDigiClock core stylesheet file inside the <head> tag of your HTML document. And to setup jDigiClock, add the following jQuery code.
$(document).ready(function() {
   $('#digiclock').jdigiclock({
      // Configuration goes here
   });
});
jDigiClock expects a very basic HTML markup structure inside your HTML document:
<div id="digiclock"></div>

Configuration


jDigiClock accepts a list of options to control the appearance and behaviour of the Digital Clock. Here is the list of options you may set.


Property

Type

Default

Description

clockImagesPath

string

"images/clock/"

Clock images path.

weatherImagesPath

string

"images/weather/"

Weather images path.

am_pm

boolean

false

Specifies the AM/PM option.

weatherLocationCode

string

"EUR|BG|BU002|BOURGAS"

Weather location code (see: WeatherLocationDatabase.txt).

weatherMetric

string

"C"

Specifies the weather metric mode: C or F.

weatherUpdate

integer

0

Weather update in minutes.

proxyType

string

"php"

Specifies proxy type: php or asp (see: README.txt).

Compatibility


jDigiClock has been tested and works on the following browsers:
  • Internet Explorer 7+ (PC)
  • FireFox 3.5+ (PC/Linux)
  • Google Chrome 3.0+ (PC)
  • Safari 4.0+ (PC)


Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..