Buy Now

SIMPLE AND ANIMATED JQUERY COUNTDOWN TIMER

Gerakl CountDown v1.0

PLUGIN FEATURES

  • Setting the date start and end timer;
  • Setting content before you start and end timer;
  • Setting the display format of timer(Year, month, week, etc);
  • Edit time zone;
  • Manually configuring external and internal padding;
  • Manual adjustment of font size and color;
  • 2 position labels;
  • 26 options with which you can create any timer;
  • 3 callback functions;
  • 4 method for manipulating timer;
  • 12 original styles!;
  • 8 different animations(CSS3).

Demo


Background:

Other CountDown

Simple usage

Include files

    <link href="gerakl-countdown.css" rel="stylesheet" media="screen">    
    <script src="js/gerakl-countdown.js"></script>

HTML:

    <div id="gerakl-count"></div>

Initialize

$('#gerakl-count').GeraklCountDown({
    endDateTime : new Date('2236/1/9 00:00:00'),
    animation : ...,
    ... : ...,
    ... : ...,
    ... : ...
});

Options

These options are default:

startDateTime

    startDateTime: new Date('2015/1/5 00:02:00'),
    // or
    startDateTime: new Date('2015/1/5'),

endDateTime

    endDateTime: new Date('2236/1/9 00:48:00'),
    // or
    endDateTime: new Date('2236/1/9'),

labelTextYears

    labelTextYears: ['Year', 'Year', 'Years'],
    // or
    labelTextYears: 'Year',

labelTextMonths

    labelTextMonths: ['Month', 'Month', 'Months'],
    // or
    labelTextMonths: 'Month',

labelTextWeeks

    labelTextWeeks: ['Week', 'Week', 'Weeks'],
    // or
    labelTextWeeks: 'Week',

labelTextDays

    labelTextDays: ['Day', 'Day', 'Days'],
    // or
    labelTextDays: 'Day',

labelTextHours

    labelTextHours: ['Hour', 'Hours', 'Hours'],
    // or
    labelTextHours: 'Hour',

labelTextMinutes

    labelTextMinutes: ['Min', 'Minute', 'Minutes'],
    // or
    labelTextMinutes: 'Min',

labelTextSeconds

    labelTextSeconds: ['Second', 'Second', 'Seconds'],
    // or
    labelTextSeconds: 'Second',

format

    format: 'YOWDHMS',
    // Y - year
    // O - month
    // W - week
    // D - day
    // H - hour
    // M - minute
    // S - second

labelText

    labelText: true,
    // true, false

addZero

    addZero: true,
    // true, false

timeZone

    timeZone: null,
    // -5, +10, ...

Interval

    Interval: 1,
    // 1 sec, 2 - 2 sec ...

beforeDateText

    beforeDateText: '',
    // or
    beforeDateText: 'The countdown has not started yet',
    // or with html
    beforeDateText: '<h1>The countdown has not started yet</h1>',

afterDateText

    afterDateText: '',
    // or
    afterDateText: 'The timer has ended',
    // or with html
    afterDateText: '<h1>The timer has ended</h1>',

paddingNumber

    paddingNumber: '',
    // or
    paddingNumber: '5px',
    // or
    paddingNumber: '5px 10px 5px 10px',

marginNumber

    marginNumber: '',
    // or
    marginNumber: '5px',
    // or
    marginNumber: '5px 10px 5px 10px',

marginSection

    marginSection: '',
    // or
    marginSection: '5px',
    // or
    marginSection: '5px 10px 5px 10px',

animation

    animation: 'fadeOut',
    // fadeOut, fadeOutDown, fadeOutUp, bounceOut, flipInX, flipInY, zoomIn, zoomOut

labelTextSize

    labelTextSize: '15px',

amountNumberSize

    amountNumberSize: '15px',

colorCountDown

    colorCountDown: '#fff',
    // Do not block the internal styles

colorLabel

    colorLabel: '#fff',
    // Do not block the internal styles

labelPosition

    labelPosition: 'bottom',
    // top, bottom

theme

    theme: 'default',
    // default, minimal, black, blue, transparent, or other css selector

Callbacks

onTick

    onTick: null,
    // or
    onTick: function() {
        .....
    },

onLoad

    onLoad: null,
    // or
    onLoad: function() {
        .....
    },

onEnd

    onEnd: null,
    // or
    onEnd: function() {
        .....
    },

Methods

stop

    $('.stop').on('click', function() {
        $('#gerakl-count').GeraklCountDown('stop');
    })

srat

    $('.srat').on('click', function() {
        $('#gerakl-count').GeraklCountDown('srat');
    })

destroy

    $('.destroy').on('click', function() {
        $('#gerakl-count').GeraklCountDown('destroy');
    })

update

    $('.update').on('click', function() {
        $('#gerakl-count').GeraklCountDown('update', {
            options...
        });
    })

Browser support

GeraklCountDown is verified to work in Internet Explorer 10+(Internet Explorer 9 without animation), Firefox, Opera, Google Chrome and Safari browsers.