KK Countdown - JQuery Plugin

1 I Like It!

Version: 1.3.8

Release date: 10.04.2013r.

Author: Krzysztof Furtak

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

DEMO

DOWNLOAD

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="js/kkcountdown.min.js"></script>

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


<script type="text/javascript">
// <![CDATA[
$(".kkcount-down").kkcountdown({

dayText : 'day ',
daysText : 'days ',
hoursText : 'h ',
minutesText : 'm ',
secondsText : 's',
displayZeroDays : false,
oneDayClass : 'one-day'

});
// ]]>
</script>

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.

<span class="kkcount-down" data-time="1420066800"></span>

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

Available options:

Key:	Default value:	Description:
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	”	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	false	Adding a class to markers indicating countdown (e.g. indicated the name of call e.g. ‚class-name’)
callback	false	Indicate the name of fucntion which should be launched after the end of countdown (e.g. my Function

Plugin Changelog:

v1.3.8

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

v1.3.7

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 Google+ or Facebook.

KK Countdown jQuery plugin