Latest Blog Post

jCountdown UI – jQuery UI Widget

Description

jCountdown UI is the jQuery UI Widget version of my jCountdown Countdown plugin. It uses some of the jQuery UI CSS Classes so it is compatible with ThemeRoller, meaning you can design a different colour scheme for it if you wish, or use any of the ones already on jQuery UI’s download section.

Information

Reporting Bugs

If you find any bugs please don’t comment on this page. Report any bugs through Github.

Versions

Current Version – 1.0

Links:

Download jCountdown UI 1.0

Github Page

Version 1.0

Usage

Options

date - Default: null
       (Must be a valid date string or Date object)

updateTime - Default: 1000
       (Interval in milliseconds when the Countdown should update the time)

minus - Default: false
        (Boolean. Whether the Countdown should have to go into minus figures, especially when counting down to a date)

onChange - Default: null
           (Callback function for when the Countdown time updates)
           onChange(event, settings)
onComplete - Default: null
             (Callback function for when the Countdown time updates)
             onComplete(event)

onPause - Default: null
          (Callback function for when the Countdown Plugin is paused )
          onPause(event)

onResume - Default: null
           (Callback function for when the Countdown Plugin is resumed from pause)
           onResume(event)

leadingZero - Default: false
              (Boolean. Whether time values should have a leading zero for values < 10. e.g 09)

offset - Default: null
         int or float (Offset in hours, can be used for setting countdown time to match server

servertime - Default: null
           int or function (servertime in milliseconds, e.g (time() * 1000) in PHP. Or a callback function that sets the time, via an ajax request for example. Used to match countdown across devices where local time can be different.

direction - Default: "down"
            Countdown Direction, "down" for down to a date, and up for "up" from a date

hoursOnly - Default: false
            (Boolean. If set to true, jCountdown ignores days left and add converts to hours and adds this to the hours left)

minsOnly - Default: false
           (Boolean. If set to true, jCountdown ignores days/hours and add converts to minutes and adds this to the minutes left)

secsOnly - Default: false
            (Boolean. If set to true, jCountdown ignores days/hours/minutes left and converts to seconds and adds this to seconds left)

yearsAndMonths - Default: false
            (Boolean. If set to true, jCountdown counts down the years/months as well)

yearsText -  Default: 'years'
	    (String)

monthsText - Default: 'months'
             (String)

daysText - Default: 'days'
             (String)

hoursText - Default 'hours'
             (String)

minutesText - Default 'minutes'
             (String)

secondsText - Default 'seconds'
             (String)
fx - Default: 'turnDown'
              (String) Choice of 'turnDown', 'fade' and 'basic'

Methods

changeSettings - Accepts an object map, the same as when first initialising the plugin
    Example: $("#time").countdownui("changeSettings", options);

getSettings - Returns setting/settings from countdown plugin, as well as the timer
    Example: var currentSettings = $("#time").countdownui("getSettings");
    Example: var dateSetting = $("#time").countdownui("getSettings", "date");

resume - Resumes the countdown, if previously pauses, otherwise this method does nothing
    Example: $("#time").countdownui("resume");

pause - Pauses the countdown, simple as
    Example: $("#time").countdownui("pause");

complete - Triggers the complete event and ends the countdown early. Also removes timer and unbinds any events.
    Example: $("#time").countdownui("complete");

destroy - Removes timer and unbinds any events, puts the DOM Element back to its original HTML state
    Example: $("#time").countdownui("destroy");

Settings you can access in onChange event through settings object

originalHTML (string)
date (date string)
hoursOnly (boolean)
minsOnly (boolean)
secsOnly (boolean)
yearsAndMonths (boolean)
leadingZero (boolean)
offset (int)
servertime (function or date object)
updateTime (int)
direction (string)
minus (boolean)
onChange (function or null)
onComplete (function or null)
onResume (function or null)
onPause (function or null)
timer (id for Interval)
prevYears (undefined or int)
prevMonths (undefined or int)
prevDays (undefined or int)
prevHrs (undefined or int)
prevMins (undefined or int)
prevSec (undefined or int)
yearsText (string)
monthsText (string)
daysText (string)
hoursText (string)
minutesText (string)
secondsText (string)
speed (int)
fx (string)
hasCompleted (boolean)

Custom Transitions

You can also write your own transitions for animating the countdown.

Basic Example

$(document.ready(function(){
    $("#time").countdownui({
        "date" : "july 30, 2011"
    });
});

Advanced Examples

$(document.ready(function(){
    //Count DOWN to a date
    $("#time").countdown({
        "date" : "july 30, 2011",
        "offset" : 2,
        "leadingZero" : true,
        "onChange" : function(event, settings){
           if( countdownShouldEnd() ) {
               //countdownShouldEnd is not a real function
               //just shows an example of usage
               $(this).countdownui("complete");
           }
        },
        "onComplete" : function(event) {
            $(this).html("Completed");
        }
    });

    //Count UP from a date
    $("#time").countdown({
        "date" : "january 1, 2009",
        "offset" : 2,
        "direction" "up",
        "leadingZero" : true,
        "onChange" : function(event, settings){
           if( countdownShouldEnd() ) {
               //countdownShouldEnd is not a real function
               //just shows an example of usage
               $(this).countdownui("complete");
           }
        },
        "onComplete" : function(event) {
            $(this).html("Completed");
        }
    });

    //Different FX and Server Time
    $("#time2").countdownui({
        "date": "february 20, 2012 14:00:00", //Counting up FROM a date
        "servertime": function() {
            var time = null;
            $.ajax({url: 'get_time.php',
                async: false,
                dataType: 'text',
                success: function( data, status, xhr ) {
                    time = data;
                },
                error: function(xhr, status, err) {
                    time = new Date();
                    time = time.getTime();
                }
            });
            return time;
        },
        "fx": 'basic'
    });

});
Posted in Projects | Comments Off