Clokion version 2
jQuery Plugins Plugins 

Clokion – Time countdown and countup jQuery plugin

SONHLAB , , , , , , ,

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.

 

 

Buy Now

 

 

Demos:

  1. Basic demo
  2. Time frame demo
  3. Clock with control buttons
  4. Show content demo
  5. Show content by AJAX load demo
  6. Show lightbox demo
  7. Redirect demo
  8. Form submit demo
  9. Hidding content demo
  10. Time cookie demo

 

 

Clokion Features:

  • Countdown in minutes.
  • Countdown or countup with specific time.
  • Counts in a time frame/range.
  • Control ability with buttons.
  • Supports to trigger events when the clock ends.
  • Supports AJAX load.
  • Customizes clock interfaces with CSS.

 

Change Logs:

Apr 2019: Update version 2.0:

+ Add a new parameter to set waiting cookie (WaitingCookie).

+ Add a new demo to show how to use WaitingCookie parameter.

 

Jan 2019: Update version 1.1:

+ Fixed a bug making showing hours not correct in some cases.

 

Sep 2017: First Version.

 

Credits:

 

Table of Contents:

  1. Installing Clokion jQuery plugin.
  2. Clokion HTML Structure.
  3. Call Clokion jQuery plugin.
  4. Parameters and Animation Classes.
  5. End Events.

 

Section 1: Installing Clokion jQuery Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html> at the top of page.

Then, includes the following code into HEAD section of the page.

Includes CSS files:

<meta name="viewport" content="width=device-width, user-scalable=no" />

<!-- Animation Effects -->
<link rel="stylesheet" href="css/animation.css" type="text/css" />

<!-- Clokion CSS Pack -->
<link rel="stylesheet" href="css/clokion-js.css" type="text/css" />

<!-- Clokion Responsive Layout CSS Pack -->
<link rel="stylesheet" href="css/clockion-responsive-layout.css" type="text/css" />

Includes Javascript files:

<!-- jQuery Library -->
<script src="js/jquery/jquery.min.3.2.1.js"></script>

<!-- Clokion Plugin -->
<script src="js/clokion.dev.js"></script>

Done. Clokion jQuery plugin is ready to use.

 

Section 2: Clokion HTML Structure.

This section should be read along with the example files also contained in the download package.

A simple short structure of  a clock will have a HTML code like below:

<!-- Start Clokion Clock -->
<div id="clock-id" class="clokion">
  <div class="clok-clock"></div>
</div>
<!-- End Clokion Clock -->

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:

<!-- Start Clokion Clock -->
<div id="clock-id" class="clokion">
  <div class="clok-clock">
    <div class="clok-days">
     <span></span>
    </div>
    <div class="clok-hours">
      <span class="clok-hour-1"></span><!--
      --><span class="clok-hour-2"></span>
    </div>
    <div class="clok-mins">
      <span class="clok-min-1"></span><!--
      --><span class="clok-min-2"></span>
    </div>
    <div class="clok-secs">
      <span class="clok-sec-1"></span><!--
      --><span class="clok-sec-2"></span>
    </div>
  </div>
</div>
<!-- End Clokion Clock -->

With the full structure of the clock, you can add more custom CSS classes into any part of it so that you can customize the clock design in your way.

Note: some features may require to add HTML parameters into the structure. You can find Parameter usage in the Parameter section below.

 

 

Section 3: Call Clokion jQuery Plugin.

To call the plugin you can add into HEAD section a script like below:

<script type="text/javascript">
$(window).on('load', function() {
  $('#clock-id').clokion({
    Mode: 'countdown-absolute',
    EndPoint: 'Jan 01 2020 21:0:0 GMT+0000'
  });
})
</script>

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 | button
auto: 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
EndEvent string This param is used to set event when the clock ends.
Value: none | show-content | hide-content | redirect | submit
Default value: none
RunEventFirst boolean This param is used to run the end event when the clock starts.
This param works with enabled TimeCookie only.
Value: true | false
Default value: false
AJAXLoad boolean This param is used to enable AJAX load feature.
Value: true | false
Default value: false
AJAXtype boolean This param is used to set type for AJAX load.
Value: static | dynamic
Default value: dynamic
static: used to load static contents in HTML files.
dynamic: used to load dynamic contents in PHP files.
AJAXpath string This param is used to set path for AJAX content files.
Default value: content/clokion/
Fext string This param is used to set file extension for AJAX content file.
Default value: php
CustomWarning string This param is used to set a warning message when the clock does not work.
WaitingCookie integer This param is used to set waiting time cookie.
Default value: 0

 

III. Animation Classes:

Showing Animation Effects:

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
flipInX
flipInY
fadeIn
fadeInUp
fadeInDown
fadeInLeft
fadeInRight
fadeInUpBig
fadeInDownBig
fadeInLeftBig
fadeInRightBig
bounceIn
bounceInDown
bounceInUp
bounceInLeft
bounceInRight
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
lightSpeedIn
jackInTheBox
rollIn
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
slideInDown
slideInLeft
slideInRight
slideInUp

 

Hiding Animation Effects:

flipOutX
flipOutY
fadeOut
fadeOutUp
fadeOutDown
fadeOutLeft
fadeOutRight
fadeOutUpBig
fadeOutDownBig
fadeOutLeftBig
fadeOutRightBig
bounceOut
bounceOutDown
bounceOutUp
bounceOutLeft
bounceOutRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
lightSpeedOut
rollOut
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
hinge

 

 

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.

 

 

 

[endedwords product=””]http://talk.sonhlab.com/room/clokion-jquery-plugin[/endedwords]