Clokion – Time countdown and countup jQuery plugin

Clokion jQuery plugin is a script that is used to create clocks with countdown or countup features. This plugin supports many ways to set time to count down or up. It also provides options to activate events when the countdown process completed such as: show contents, hide contents, redirect to another page, submit a form,… Clokion can automatically run or be controlled by buttons: Start, Pause, Resume, End and Restart. In addition, it supports time cookies and AJAX load too.

In the case, you don’t care about clock interface or you don’t want to show the clock then the above structure will work well. It’s also good enough when you use default designs of clock that was included in the download package.

However, if you want to customize the clock interface you may need to use the full structure like below:

The above script just shows a simple way to call the plugin. In real use, you may need to add more parameters to obtain performance you want. To know more about parameters, please check Parameters Section below.

Section 4: Parameters and Animation Classes.

I. HTML Parameters:

Parameters

Positions

Description

data-clokid

clok-content
clok-ajaxcontent

This param is used to set id for contents
that you want to run show-content or hide-content event.

data-place

clok-content
clok-ajaxcontent

This param is used to set position that
contents will be added when you load AJAX contents.
AJAX contents will be added to clok-content block
that has the same data-place value.

data-formid

clokion

This param is used to set id for the form
that you want to submit when the clock ends.

data-url

clokion

This param is used to set the page you want to redirect to.

data-animin

clok-content

This param is used to set animation effects to show.
Value: check Showing Animation Effects below.

data-animout

clokion
clok-content

This param is used to set animation effects to hid.
Value: check Hiding Animation Effects below.

II. Javascript Parameters:

Parameters

Properties

Description

Mode

string

This param is used to set the count feature for the clock.
Value: countup | countdown-absolute | countdown-relative | countdown-timeframe

StartPoint

string

This param is used to set a time point to start counting.
Value format: Month Day Year Hour:Minute:Second Timezone
Example: Mar 25 2015 07:00:00 GMT+0700

EndPoint

string
or number

This param is used to set a time point to end counting.
Its value will be a NUMBER (minutes) when Mode is countdown-relative
and STRING (Date format) for other Modes.
String value format is the same as StartPoint param.

Activate

string

This param is used to set the way to activate the clock.
Value: auto | buttonauto: works with all Modes (default).button: works with countdown-relative mode only.

ShowDays

boolean

This param is used to show/hide the day block.
Value: true | false
Default value: true

ShowHours

boolean

This param is used to show/hide the hour block.
Value: true | false
Default value: true

ShowMins

boolean

This param is used to show/hide the minute block.
Value: true | false
Default value: true

ShowSecs

boolean

This param is used to show/hide the second block.
Value: true | false
Default value: true

TimeCookie

boolean

This param is used to enable cookie to store remain time to count down.
This param works with countdown-relative mode only.
Value: true | false
Default value: false

ScrolltoContent

boolean

This param is used to scroll to contents when they displayed.
Works with show-content event only.
Value: true | false
Default value: true

EnableEndEvent

boolean

This param is used to enable events when the clock ends.
Value: true | false
Default value: false

EndClock

string

This param is used to set event for the clock when it ends.
Value: none| hide | repeat
Default value: none

Section 5: End Events

In this section, we will talk about events that are supported to call when the clock ends. The plugin has 4 main events that can be called at the end: show-content, hide-content, redirect and submit-form.

I. show-content:

This event allows you to show contents with animation effects. You can place contents as much as you want to show in any position on the page. You can put contents directly in a same page as parts of the page or use AJAX load method to load contents from another page. To show a content, you just add into the content block a data-clokid parameter with a value equals to the clock ID.

Please refer to “demo-show-content.html” and “demo-show-content-ajaxload.html” files for more info.

II. hide-content:

Same as show-content event, to hide a content by adding a data-clokid parameter with a value equals to the clock ID.

Please refer to “demo-hide-content.html” file for more info.

III. redirect:

This event is used to move the current page to another page when the clock ends. You just add a data-url parameter into the clock and provide a url that you want to redirect to.

Please refer to “demo-redirect.html” file for more info.

IV. submit-form:

Same as redirect event, you just add a data-formid into a clock and set its value equals to a form ID that you want to auto submit when the clock ends.

Please refer to “demo-form-submit.html” file for more info.

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to open tickets in Support Zone. No guarantees, but I’ll do my best to assist you. Thanks so much!