KK Countdown - JQuery Plugin
LOVE:
4
GD Star Rating
loading...
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
Loading ...
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.
Poszło przez formularz kontaktowy.
Tak mam, ale za każdym razem jak wchodzę w te ustawienia to mam odznaczoną tą opcję.
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?
Witam, zainstalowałem plugin poprawnie, działa z jednym małym problemem. Mianowicie widget nie wyświetla dni. Jest na to jakaś rada?
Hej Michał,
a masz ustawioną opcję ‘displayDays’ na TRUE?
Pingback
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.
Hello,
I plan to release a new version of this plugin.
At work I’ll take your suggestion into consideration and that option should appear.
Thank You!
Hi,
Thank you for your answer. I have to launch my new version of my website wich include your plugin very soon. So, I need to know if you think fix this in two days or two month. What do you think about ?
Thanks.
Hi,
New versions of the plugin with this functionality, I’ll try to do before the end of the week. Notification of updates will be available on my twitter (@KrzysiekFurtak).
Ok. Thank you.
no problem
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.
Hello,
Why you cant set this time? You have any errors?
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!
Look up UTC Calculator (google it or whatever) to figure out the seconds since 1970. That’s what you’ll want to use as the time=”xxxxxxxxxx” bit.
Hi Tong. You’re right, but this question was already described several times. It is also described in the documentation of the plugin.
can you transfer to format:
time=”1325372400″ into
Date =”1/1/2012″
What’s number in time=”1325372400″??
Plese Tell me about it!!
Hello John,
Time – in this case the value indicates the date. This attribute needs to be expressed in digits only
You can read mor about this in PHP Manual MKTIME
can you for me an example about that,thank for helping
Pingback
Pingback
Hi, Thanks for sharing,
i’ll try embed the source in my blog
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
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
Give me a link to a place where plugin works, please.
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.
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:-)
time ? in this case the value indicates the date
http://en.wikipedia.org/wiki/Unix_time
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
hehe … dobrze, że już działa
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…
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
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 …
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?
no ja w samym silniku odliczania też nic nie zmieniałem … tak, czy inaczej ciesze się, że skrypt już Ci działa
jQuery Plugin – KKCountdown … new version (v 1.2) published:
http://krzysztof-furtak.pl/2010/05/kk-countdown-jquery-plugin/
Również potwierdzam. Działa nawet przy 10 sek… Pan Tomasz musi najwidoczniej źle podawać datę.
Dzięki za potwierdzenie
Zawsze przydaje się opinia osoby „trzeciej”.
@Tomek:
Musiałeś gdzieś się pomylić przy przetwarzaniu daty.
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 „—”.
hmmm to dziwne … ostatnio ustawiałem odliczanie na parę godzin dla testów i działało wszystko bez problemów, ale zobaczę o co może chodzić
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.
To gdzie może leżeć problem? Jak widać, funkcje generują prawidłowe dane, problem występuje dopiero przy odliczaniu…
jak będę miał chwilę czasu to obiecuję, że przyglądnę się temu
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
Witam, dorobiłem sobie kilka testów:
http://silvarin.x25.pl/testy/czas2.php
http://wklej.to/TKOC – kod źródłowy czas2.php
Pana skrypt dolicza sobie 12 sek, albo ja coś nie rozumiem.
Witam,
Wygląda na to, że minuty są w porządku, ale chyba są jakieś problemy z uwzględnieniem czasu letniego. Przyjże się temu. Dziękuję za zwrócenie uwagi.
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ę?
hi, i want just „hour,minute,secont” and if time finish (0) this time submit page form… please help me
Unfortunately, this plugin does not have this option at the moment but I will have it updated in the next version.
What is the license of this plugin?
Creative Commons, Mit, GPL, BSD ?
License – GNU GPL.
But, of course, you can use this plugin for your commercial projects.
Więc to jest MIT albo BSD a nie GNU GPL
No chyba, że te komercyjne też mają być GPL-ami.
Tak, jasne licencja tego pluginy to MIT
informacja o tym pojawi się przy kolejnej wersji 
jejku na śmierć o tym komentarzu zapomniałem 
Dzięki lk