KK Countdown - JQuery Plugin

LOVE:
4
GD Star Rating
loading...

Version: 1.3

Release date: 11.02.2012r.

Author: Krzysztof Furtak

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 src="lib/jquery.js" type="text/javascript"></script>
  • plugin – kkcountdown.min.js

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

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


<script type="text/javascript">
$(".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
  • 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 time="1325372400" class="kkcount-down"></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:

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

Download:

top

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.

top
KK Countdown - JQuery Plugin, 4.5 out of 5 based on 23 ratings

58 thoughts on “KK Countdown - JQuery Plugin

  1. Hi,
    Thanks for this update. But on my website, it doesn’t work until I add this after call to kkcountdown function :
    function test(){
    console.log(‘KONIEC’);
    }
    I found this in the code of your demo page. I don’t know why (I’m newbie in js).

    Guillaume.

    • aaaa … bo Ty piszesz o pluginie do wordpressa :) to jest strona pluginu do jQuery :) wyślij mi proszę na maila adres Twojej strony i jeśli możesz to zrób mi konto w WP, żebym mógł zaglądnąć do środka…ok?

  2. Pingback

  3. Hi,

    Great script. How can I hide the number of day when the countdown is less than one day ? Currently, it displays „0 days 5:43:26″.

    Thanks.

  4. I want to set counterdown timer of 3 hours to complete the task within 3 hours.And i am unable to do changes in script which u have provided.pls help me.

  5. Just wondering if there’s any possible way to make your time input less intuitive. Also: Don’t explain how it’s used! That would make things easy!

  6. Pingback

  7. Pingback

  8. nice plug in..but i note that the start date of counter based on client time not server time so how can i do that?

    help me thanks

  9. Hello,
    I’m using your plugin for one of the sites I’m developing.
    For some reason all the options I give it are ignored.
    namely:
    colorText=”#1b1b1b” colorTextDay=”#1b1b1b” afterCount=”הסתיים” displayDays=”false”

    The catual code on the site is:

    Would appreciate any help

  10. A jak dodać dodatkowe opcje do skryptu. Mam na myśli zmianę wyświetlanego tekstu z angielskiego na polski, ewentualnie dopisanie godzin, minut i sekund.

  11. What are the numbers 1325372400? Seconds? But if I change them to 3600, it does not count from a hour.

    Sorry for by bad english, lol:-)

  12. Dobra, już wiem… Nie wiem skąd mi się wzięło, że klasa ma się nazywać „kkCountDown”, chyba z skryptu skopiowałem, a myślałem, że to span xD

  13. A ja mam takie pytanie. Czy ten kod:

    $(document).ready(function(){
    $(„body”).kkCountDown();
    });

    Mogę umieścić w zewnętrznym pliku? Oczywiście bez znaczników , bo to plik JS includowany do HTML’a…

  14. Witam,
    czy można połączyć ten plug-in z twitterem?
    tak aby przy pomocy cronu lub też innego systemu publikować tweet z odliczaniem?

    • Jasne, że taką rzecz można w miarę prosty sposób zrobić. Do takiego zadania nie trzeba zaprzęgać JavaScriptu. Wystarczy sam PHP.

      Faktycznie możesz wykorzystać CRONA. Wystarczy napisać prosty skrypt, który będzie pobierał z bazy danych datę, obliczał pozostały czas do wydarzenia i wysyłał wynik do API TWITTERA. Następnie uruchamiamy co jakiś czas ten skrypt po stronie serwera.

      Z tym, że jasną rzeczą jest że w TWITTERZE odliczanie nie będzie dynamiczne (takiej rzeczy w tej chwili nie da się zrobić). Będą tylko publikowane co określony czas wiadomości ile pozostało czasu do danego wydarzenia, daty etc.

      Mam nadzieje, że pomogłem i wszystko jest jasne :)

  15. It seems to be more easy to put the time in milliseconds and not in second, because we used timestamp and timestamp return time in milliseconds …

  16. Hmm, dziwne… I na wersji 1.1 i na 1.2 w tej chwili dobrze mi się skrypty odliczają… Nie wiem co było wtedy przyczyną, ale od tamtej pory plików ani razu nie ruszałem… Magia?

  17. Fajnie, byłoby użyteczne ale nie działa po mojej myśli. :( Da się ustawić tylko wysokie liczby – jeśli chcę zrobić odliczanie tylko na kilka dni to zamiast licznika otrzymuję wynik „—”.

      • A nie pomyśleli Koledzy o tym że time() na serwerze może być inny niż czas lokalny? Wysyłając formularz o 0:0:0 dnia 1.1.2012 czasu lokalnego, serwer może mieć 0:0:15, jeśli zapisze więc do bazy time()+$time, i wartość ta zostanie odczytana i przesłana do klienta 5 sekund później, to de facto od lokalnej 0:0:5 timer odlicza czas do 0:0:15 + $time, czyli 0:0:5 + $time + 0:0:10 – czyli poszukiwana różnica.

  18. To gdzie może leżeć problem? Jak widać, funkcje generują prawidłowe dane, problem występuje dopiero przy odliczaniu…

  19. Czy ja wiem, czy tutaj chodzi o czas letni/zimowy? Skrypt chyba odlicza różnicę od obecnego czasu do czasu podanego, poza tym czas letni/zimowy różni się jedną godziną, a tutaj skrypt dodaje sobie równe 12 sek. Chociaż w tej chwili, z niewiadomych mi przyczyn, przy wczytaniu strony wychodzi 11sek różnicy…

    • no to dziwne, bo u mnie sekundy zgadzają się co do jednej, natomiast mam przesunięcie właśnie jednej godziny … obawiam się, że te 11 czy 12 sekund to nie jest wina skryptu, nikt do tej pory nie zgłaszał takiego problemu

  20. Czy skrypt aby na pewno dobrze przelicza datę? Dodałem go do swojego skryptu php, który działa w dwóch formach. Przez odpowiedni formularz dodaję wpis do bazy z kolumną ‘time’ wypełnioną wartością „time()+$time”, gdzie $time to zmienna pobierana z formularza. Inny plik listuje mi tabelę z wpisami spełniającymi warunek „WHERE time > ‘”.time().”‘”, a Pana plugin jako wartość dostaje zmienną z bazy czyli tą „time()+$time”… Na wyniku pokazuje mi odpowiedni czas + 10-15 sek (jeszcze dokładnie nie wyliczyłem), co jest bardzo dziwne… Gdy dodaję wpis na jedną minutę (w formularzu podaję czas „60″) skrypt pokazuje mi do końca „0 d 00:01:10″ (trzeba tutaj odjąć przeładowanie strony… czyli na oko dodaje sobie 10-15sek)… Wpis nie jest już wyświetlany, gdy według Pana skryptu zostaje mu około 10 sek (czyli prawidłowo jest przetwarzany przez php). Wniosek – Pana plugin chyba dodaje sobie gdzieś kilka sek, ale że nie znam się na JS to nie wyłapię gdzie… Mógłby Pan sprawdzić tę teorię?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

*

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>