KK Countdown – JQuery Plugin

Krzysztof Furtak Bez kategorii 96 Comments

Version: 1.3

Release date: 11.02.2012r.

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
[js]

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

    • plugin – kkcountdown.min.js
[js]<script type="text/javascript" src="js/kkcountdown.min.js"></script>

[/js] [divider type=”pointer-left”]

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

[js]

<script type="text/javascript">// <![CDATA[
$(".kkcount-down").kkcountdown({
dayText : ‚day ‚,
daysText : ‚days ‚,
hoursText : ‚h ‚,
minutesText : ‚m ‚,
secondsText : ‚s’,
displayZeroDays : false,
oneDayClass : ‚one-day’
});
// ]]></script>

[/js] [divider type=”pointer-left”]

3. Next, we need to place tag which consists of at least two below mentioned attributes:

  • class – kkcount-down
  • time – in this case the value indicates the date. This attribute needs to be expressed in digits only. You can use this time converter.
[js] &lt;span time=&quot;1325372400&quot; class=&quot;kkcount-down&quot;&gt;&lt;/span&gt;
[/js]

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

[divider type="pointer-left"]

Available options:

[table type=”simple”]
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
secondsTextText displayed after certain number of seconds included in countdown
oneDayClassfalseClass 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)
displayDaystrueDisplaying 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
displayZeroDaystrueDisplaying the number of days when number of days is 0.
addClassfalseAdding a class to markers indicating countdown (e.g. indicated the name of call e.g. ‚class-name’)
callbackfalseIndicate the name of fucntion which should be launched after the end of countdown (e.g. my Function
[/table]
[divider type="pointer-left"] [contentblock id=1 img=adsense.png] [divider type="pointer-left"]

Plugin Changelog:

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
[divider type="pointer-left"]

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.