Vector Digital Clock jQuery Plugin (beta)

Vector Digital Clock jQuery Plugin (beta)

JQuery vdclock Plugin

Vector Digital Clock plugin – v 1.0 (beta)Download


Vector Digital Clock plugin was created to show Digital Clock in more computerized and presentable way. With this plugin it is possible to show each digit or character of time in form of Digital Vector or character. This plugin works for different timezones and also takes care of the time differences arisen due to difference between your computer time and the server time.

Download and place the plugin in a folder and include the plugin file somewhere in your page. Here is the minimal usage example to show a simple text clock.

[javascript gutter=”false”]
$(‘#DelhiText1’).vdclock({“ctype”: “text”});

There are two type of digital clocks this plugin can show. One is simple digital clock and another is digital clock using vector digital graphics. By vector digital clock i do mean by the kind of clock we usually see at railway station or at airport.


Lets start by showing a simple clock. Include the plugin file in your html page after including the jQuery main file. Download the latest version of jQuery and place it inside the <head></head> section. The javascript html tags to place somewhere between <head></head> where “jquery-1.7.2.min.js” is the name of jQuery file.

[xml gutter=”false”]


Similarly you download the plugin and include jquery.vdclock.js file.

After calling the jQuery and plugin file create a Javascript block somewhere in your document set global options, as the following,

jQuery.vdclockoptions = {
imgDir: “/full/path/to/vdclock/chars”,
jsTimeNow: ‘< ?php echo date("F d, Y H:i:s", time() + 330 * 60); ?>‘

These options are used by this plugin globally. These options can be overwritten while making individual vdclock() calls, but in general, you merely need to do so.

After having options set create a HTML element to show the time. For example, <span id=”DelhiDG”></span> will be filled with the time string.

<p>Delhi <span id="DelhiDG"></span></p>

Next, make a vdclock() call to render the clock, as the following
$(function() {

It will render the clock as shown in the first example in the following demo:

  • Example: Digital time without options


  • CSS

    /*No CSS used here for Basic clock*/


    //Rendering Basic Clock


    			Basic clock (without options)
    			<p>Delhi <span class="time DelhiText" id="DelhiDG"></span></p>
    • First one is without any options, as shown below:


This is the demo showing time with more options:

  • Example: Digital time with options (2 minutes ahead)

  • CSS

    /*CSS style for Digital clock with options*/
    #DelhiVDWrapper {
    margin:10px 0;
    padding: 5px;
    background: black;
    float: left;
    letter-spacing: 4px;


    //Rendering Digital Clock
    jQuery(‘#DelhiVD’).vdclock({ //#DelhiVD is the ID of time wrapper (span element here)
    vdfy:’#DelhiVDWrapper .city’,
    jsTimeNow: ‘< ?php echo date("F d, Y H:i:s&quot;, time() + 332 * 60); ?>‘


    			Digital clock with options
    			<div id="DelhiVDWrapper" style="margin:10px 0;">
    			<div class="city">
    			<span class="name">Delhi </span><span class="time" id="DelhiVD"></span>
    • This is the time clock with some options including graphic height, width.

      Options set in this example

      Width of the each digit

      Height of the each digit

      vdfy:’#DelhiVDWrapper .city’
      //#DelhiVDWrapper is the ID of main wrapper which contains city name

      jsTimeNow: ‘[php gutter=”false”]< ?php echo date("F d, Y H:i:s", time() + 332 * 60); ?>[/php]’ //seeking time difference of 2 minutes than the actual time of local city.

Right now “imgDir” and “jsTimeNow” options can be set using “vdclockoptions” option. “imgDir” is absolute path to directory where graphics of all characters are stored. “jsTimeNow” is the server generated time string with adjustments. For example, the time on the server on which this very page is hosted is behind the time of my city by 330 minutes so i had to adjust this time and pass to “jsTimeNow” variable. Please note that the “jsTimeNow” option only accepts full time string i.e. October 05, 2012 11:54:11.


Do not rely on user machine, alone!

The jsTimeNow can be set to bridge the time difference between your server and the actual time set for your script. It is always recommended to adjust time in this script according to your server.

How do i adjust time according to my server?

Just before calling any of the vdclock method set a javasript variable by name jsTimeNow. An example of this variable is given above. Once it is set create a new instance of clock and name it accordingly for your city. Try and adjust the number 330 until you get the actual time of your city. Once correct time of your city is displayed you can adjust time of other cities by setting offset om by adding/subtracting the time (in minutes) for each instance (city) in the clock.

I added 330 minutes to this variable to fill in the time gap between my php server and the actual time of my city. Once this minute offset was set correctly (for my main city) rest of the world cities (listed in the last example) would get correct time automatically. Check the last example on this page to know more about the offsets.

What happens if i don’t set jsTimeNow variable?

The script will create it’s own time object reading the time from user machine and show the time accordingly.

Is there a way to set additional offset for a particular world city?

Yes. You can set jsTimeNow for an individual city as well. It may be helpful in applying additional time adjustments. For example, adding/subtracting daylight saving minutes for a particular city.



  • Delhi

  • CSS


    			$('#DelhiText1').vdclock({"ctype": "text"});




    • Simple Digital time without using graphics.

      $('#DelhiText1').vdclock({"ctype": "text"});

      Options used
      ctype: “text”

      To show a simple time clock without using the graphical character pass “text”. By default, this clock use graphical characters to display the time


  • Delhi


  • CSS

    .simpleText{font-size:30px;font-family:"courier new";


    			//For a single city showing at more than one places we can show time with single selecter.
    			$('#DelhiText').vdclock({"ctype": "text"});
    			$("#LondonTxt").vdclock({om:-270, ctype: "text"});


    • For a single city showing at more than one places we can show time with single selecter. For example if you look at the times shown in example 1 and 2 you will see that Delhi (Capital of my country India) time is shown in both examples. So we could just use a single selector to show Delhi time, something like this:

      $('.DelhiText').vdclock({"ctype": "text"});


  • Paris        
    HONG KONG       
  • CSS





    • notes
No Comments

Sorry, the comment form is closed at this time.