jQuery and CSS3 Realistic Analog Clock Widget by Codehim

Codehim Clock Example

Main Features

• Fully Responsive, Adjustable and Customizable.
• Clean and Attractive Design.
• Available in 3 Sizes, X small, X large and Original Size 250 by 250.
• CSS3 transformation based clock's hands motion.
• 100% Exact and Accurate Time (according to the server time).
• Stylish Date and day badge.
• Automatically set time, create UI elements and other necessary things in HTML document.
• Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported.
• User Friendly and Easy to Implement.

How to Use

1. Load "Codehim Clock jQuery Plugin" and CSS file into your website/app.

<!--Codehim Clock JS-->
<script src="js/jquery.codehim.clock.js"></script>

   <!--Codehim Clock CSS-->
<link rel="stylesheet" href="css/codehim-clock.css" />

2. After this, you have to do nothing tough to get it working. Just create a container in which you want to adjust this analog clock widget. You can use it anywhere (i.e on sidebar, bottom or something else) in your website/app.

For example, you have create the following div element with class name clock-place .

<div class="clock-place"> </div>

Now, call the CodehimClock() with this selector in DOM ready function.

$(document).ready(function(){

  $(".clock-place").CodehimClock();

});

Note: Codehim Clock will automatically generate everything (i.e clock dale, clock's hands, numbers, what's time right now etc.) in HTML document, so you have to do nothing for creating clock interface.

We provide classes for customization of each element of the clock. So, you can fully customize it according to your needs.

Codehim Clock Options

The following are some plugin's options for customization purpose.

To change the clock widget size, use the following possible class name in string option:

• original
• xsmall
• xlarge

$(document).ready(function(){

  $(".clock-place").CodehimClock({
   clockSize: "original", 
   });

});

To hide clock second's hand, update the following option.

 showSeconds: true, //false to hide seconds hand

Decide whether to show date and day in clock. default is true.

 showDate: true, //false to hide date and day