KK Countdown jQuery plugin

Version: 1.4.2

Release date: 15.01.2015r.

Description: Plugin kk countdown counts down to specific dates in the future.

I'm saving for server, domain and coffee :)

Install KK Countdown:

1. In a page header following files should be included:
  • jQuery – download HERE

<script type="text/javascript" src="lib/jquery.js"></script>

  • plugin – kkcountdown.min.js

<script type="text/javascript" src="kkcountdown/kkcountdown/js/build/kkcountdown.min.js"></script>

2. Once a webpage is uploaded, we launch plugin countdown with the below code:


3. Next, we need to place tag which consists of at least two below mentioned attributes:
  • class – kkcount-down
  • data-time – in this case the value indicates the date. This attribute needs to be expressed in digits only. You can use this time converter.
  • or data-seconds – in this case the value indicates number of seconds to countdown

<span class="kkcountdown" data-time="1420066800"></span>

<span class="kkcountdown" data-seconds="60"></span>

This tag can be put in a random place on the webpage.

Available options:

dayText :: [ ‘day’ ]

Text displayed after certain number of days included in countdown (when number days = 1)

daysText :: [ ‘days’ ]

Text displayed after certain number of days included in countdown

hoursText :: [ ‘:’ ]

Text displayed after certain number of hours included in countdown

minutesText :: [ ‘:’ ]

Text displayed after certain number of minutes included in countdown

secondsText :: [ null ]

Text displayed after certain number of seconds included in countdown

oneDayClass :: [ false ]

Class will be added if there is less than 24 hours untill the end of countdown

textAfterCount :: [ ‘—‘ ]

Text is displayed after the countdown is over (quantity is not take into consideration if it is set up as ‘callback’ option)

displayDays :: [ true ]

Displaying the number of days remaining till the end of countdown: true– the number of days is displayed, false– the number of days is not displayed

displayZeroDays :: [ true ]

Displaying the number of days when number of days is 0.

addClass :: [ null ]

Adding a class to markers indicating countdown (e.g. indicated the name of call e.g. ‘class-name’)

callback :: [ null ]

Indicate the name of fucntion which should be launched after the end of countdown

Plugin Changelog:

  • NEW: #9 – Recount
  • NEW: Register plugin in Bower library
  • FIX: #11 – Display zero days
  • NEW: Rewrite plugin code
  • NEW: New DEMO site
  • countdown time more flexible and standards-based // thanks for Russell Todd
  • add THIS object to callback function // thanks for peterpeshev
  • Improvements for usage in Ukraine and Russia // thanks for knowgod
  • NEW: GITHUB repository
v 1.3
  • NEW: Plugin code has been rewritten. This will allow you add new options.
  • NEW: You can define text after the number of hours, minutes and seconds.
  • NEW: You can turn off the number of days, if the number of days is zero.
  • CHANGE: Instead, define the text color of the countdown, when the countdown to the end left less than 24 hours, we define a class.
v 1.2
  • NEW: Function added allows to adjust the settings.
  • CHANGE: Minor changes have been made in the script which protect against conflicts with other page elements.
v 1.1
  • CHANGE: Improved countdown script which is more efficient and works much faster.
  • CHANGE: Change of the atribute needed for the script to work properly. Instead of ID we should not use only appropriate class.
v 1.0 BETA:
  • NEW: possibility to add as many dates as you wish till which time will be counted
  • NEW: If there are less than 24 hours left to a particular day, digits will start glowing in red

To sum up I would like to mention that I am open to any sugestions regarding new options or any changes to KKCountdown. I also want to invite all those that would like to be up-to-date with plugin news to follow me on Twitter or to visit my page on Facebook.