Version: 1.4.2

Release date: 15.01.2015r.

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

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:

$(".kkcountdown").kkcountdown();

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>

or

<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:

1.4.2

  • NEW: #9 – Recount
  • NEW: Register plugin in Bower library
  • FIX: #11 – Display zero days

more

v1.4

  • NEW: Rewrite plugin code
  • NEW: New DEMO site

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.

||||| 41 I Like It! |||||
  • Tiago Barbosa

    how to use oneDayClass? oneDayClass:true or oneDayClass:’myclass’? and the option warnClass?

    Thanks!

  • wasim

    how to load it dynamically, i have tabs and on each tab i call ajax and on each return it has this counter but it is only working on first tab, how to make it dynamically connected to other tabs.

  • Pingback: 35+ Best Free jQuery Countdown Timer | DesignMaz()

  • Данил

    danil-html.ru

  • ClonesDream

    KKCountdown? The site looks more like something to do with Fallout 4. I dunno really…

    • http://krzysztof-furtak.pl/ Krzysztof Furtak

      Hello,
      My site? :)

      • ClonesDream

        No. thesurvivor DOT com

        I dunno if you made that, or someone is trolling us with false info.

        • Fallout 4

          read the site code as well, led me to here.

      • whocash

        have a look at the source of thesurvivor2299 dot com. Your code is used there. Coincidence? :) regards,

  • Pingback: MR.JQuery Scripts TIME START NOW For Countdown - WebQeep()

  • Pingback: 25+ Best Free jQuery Countdown Timer Scripts and Plugins | Weblees()

  • Eric

    nice counter, easy to mod (the names of classes in polish are not easy to figure out if you’re not polish).

    would be nice to add a bunch of options to m:
    displayDays, DisplayHours, DisplayMinutes and DisplaySeconds (and the displaysDaysText, etc…)

    I’ve done it for my own use, and also added a to each digit separately
    allowing to style digits independently, but the code I came up with is quick and dirty and needs still a little work :)

  • Pingback: 30+ Cool jQuery Countdown Plugins | NowThemeNowTheme()

  • Andrew

    Could you add a zero if the value of days is less than ten?

    • tanxe.com

      replace line
      var dni = count;
      with
      var dni = naprawaCzasu(count);
      in original library file, i am trying to modified this library for similar error, owner of this library is not showing any response.