Updating to v0.1.4 – Stand by…
THIS LIBRARY IS NO LONGER MAINTAINED!
What is jCounter?
jCounter is a simple light-weight extensible jQuery plugin that helps you create various date-based countdowns, countups and custom timers.
It comes with server-side timezone support to display accurate countdowns across the globe.
Download jCounter
How to use
Download the jCounter archive and unzip it (this is mandatory).
Add the jCounter-*.*.*.js file in your html page in the head section and make sure you load
the jQuery library before it.
1
2
3
4
5
6
7
8
|
...
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jCounter-*.*.*.js"></script>
</head>
...
|
Add in the necessary HTML for jCounter to work:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<ul class="countdown">
<li>
<p><span class="days">00</span></p>
<p><em class="textDays">days</em></p>
</li>
<li>
<p><span class="hours">00</span></p>
<p><em class="textHours">hours</em></p>
</li>
<li>
<p><span class="minutes">00</span></p>
<p><em class="textMinutes">minutes</em></p>
</li>
<li>
<p><span class="seconds">00</span></p>
<p><em class="textSeconds">seconds</em></p>
</li>
</ul><br/>
|
Call jCounter with the desired options:
1
2
3
4
5
6
7
|
$(".countdown").jCounter({
twoDigits: 'on',
customDuration: 60,
fallback: function() { console.log("count finished!") }
}
|
IMPORTANT!
jCounter uses the dateandtime.php file that needs to be on a PHP-supported server, to retrieve an accurate current time to display exact countdowns with timezone support.
By default, jCounter assumes the dateandtime.php file is on the same server in the web root directory (where the main index page is usually located), if you placed it somewhere else, just specify the location when calling jCounter with serverDateSource: “http://my-domain.com/path/to/dateandtime.php”
If jCounter can’t find the dateandtime.php or if something simply goes wrong, it will use the client-side time as fallback. To avoid this, when first installing/running jCounter, use it with debugLog: true and check your Console Log for errors.
jCounter demos
DATE-BASED COUNTDOWN
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<div class="dsb-theme-wrapper countdown">
<div class="dsb-theme">
<div class="counter-wrapper">
<ul>
<li>
<p class="days">00</p>
</li>
<li>
<p class="hours">00</p>
</li>
<li>
<p class="minutes">00</p>
</li>
<li>
<p class="seconds">00</p>
</li>
</ul>
<div class="jC-clear"></div>
</div>
<p class="jCtext">
<span><em class="textDays">DAYS</em></span>
<span><em class="textHours">HOURS</em></span>
<span><em class="textMinutes">MINUTES</em></span>
<span><em class="textSeconds">SECONDS</em></span>
</p>
<div class="jC-clear"></div>
</div>
</div>
|
jCounter call
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(".countdown").jCounter({
date: "1 january 2016 12:00:00",
timezone: "Europe/Bucharest",
format: "dd:hh:mm:ss",
twoDigits: 'on',
fallback: function() { console.log("Counter finished!") }
});
$('.pause').click(function() {
$(".countdown").jCounter('pause');
});
$('.stop').click(function() {
$(".countdown").jCounter('stop');
});
$('.start').click(function() {
$(".countdown").jCounter('start');
});
|
CUSTOM-RANGE COUNT UP (10 => 999)
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div class="iosd-theme-wrapper countdown2">
<div class="iosd-theme">
<ul>
<li><p><span><em><b class="hours">00</b><i class="hoursSlider"><u>00</u><u class="hours">00</u></i></em></span></p></li>
<li><p><span><em><b class="minutes">00</b><i class="minutesSlider"><u>00</u><u class="minutes">00</u></i></em></span></p></li>
<li><p><span><em><b class="seconds">00</b><i class="secondsSlider"><u>00</u><u class="seconds">00</u></i></em></span></p></li>
</ul>
<div class="jC-clear"></div>
<p class="jCtext">
<span><em class="textSeconds">SECONDS</em></span>
<span><em class="textMinutes">MINUTES</em></span>
<span><em class="textHours">HOURS</em></span>
</p>
<div class="jC-clear"></div>
</div>
</div>
<p>
<a class="iosd-btn pause2" href="javascript:;" title="">PAUSE</a>
<a class="iosd-btn stop2" href="javascript:;" title="">STOP</a>
<a class="iosd-btn start2" href="javascript:;" title="">START</a>
</p>
|
jCounter call
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$(".countdown2").jCounter({
animation: "slide",
format: "ss",
twoDigits: 'on',
customDuration: 60*9, //9 minutes
callback: function() { console.log("Counter 2 finished!") }
});
$('.pause').click(function() {
$(".countdown2").jCounter('pause');
});
$('.stop').click(function() {
$(".countdown2").jCounter('stop');
});
$('.reset').click(function() {
$(".countdown2").jCounter('reset');
});
$('.start').click(function() {
$(".countdown2").jCounter('start');
});
|
CUSTOM-DURATION COUNTER (9 minutes)
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<div class="dsb-theme-wrapper countdown3">
<div class="dsb-theme">
<div class="counter-wrapper">
<ul>
<li>
<p class="seconds">00</p>
</li>
</ul>
<div class="jC-clear"></div>
</div>
<div class="jC-clear"></div>
</div>
</div>
<p>
<a class="dsb-btn pause" href="javascript:;" title="">PAUSE</a>
<a class="dsb-btn stop" href="javascript:;" title="">STOP</a>
<a class="dsb-btn reset" href="javascript:;" title="">RESET</a>
<a class="dsb-btn start" href="javascript:;" title="">START</a>
</p>
|
jCounter call
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$(".countdown3").jCounter({
format: "ss",
twoDigits: 'on',
customDuration: 60*9, // 9 minutes
fallback: function() { console.log("Counter finished!") }
});
$('.pause').click(function() {
$(".countdown3").jCounter('pause');
});
$('.stop').click(function() {
$(".countdown3").jCounter('stop');
});
$('.reset').click(function() {
$(".countdown3").jCounter('stop');
});
$('.start').click(function() {
$(".countdown3").jCounter('start');
});
|
Tips & Tricks
For customDuration-based countdowns, you can use arithmetical calculations to set the duration. For example, if you’d like a custom countdown for 1 hour, instead of adding the number of seconds 3600, just add 60*60, or for 3 days you can add 60*60*24*3 and so on.
To internationalize the countdown and have it in another language, just edit line #20 and #21 from jquery.jCounter-v*.*.*.js, those are two arrays holding both plural and singular labels.
Always start jCounter with the property debugLog: true when first installing jCounter on a page and make sure there are no errors (some errors are subtle and it’s best to consult yourself with the Console Log).
Change log
2012.10.28 – v0.1.4 (beta)
- fixed: The slide-ready themes could not be used without the slide effect turned on.
- fixed: The reset method had a glitch when resetting a sliding counter.
2012.10.27 – v0.1.3 (beta)
- updated setting: fallback (renamed from fallback to callback) – it’s a callback after all…
- new theme: iOS dark
- new theme: iOS light
- new setting: animation (slide)
- Changes: jCounter now uses dateandtime.php locally by default! Which means you need to point the setting serverDateSource to dateandtime.php (it needs to be on a server that’s running PHP, preferrably on the server that jCounter is running on). If no path or an incorrect path will be specified, then jCounter will use the client-side date to retrieve the current time, which is not as accurate as some would expect, nor it would supply support for timezones.
2012.10.21 – v0.1.2 (beta)
- new theme – dark scoreboard (default)
- new theme – white scoreboard
2012.09.26 – v0.1.1 (beta)
- fixed the date-based fallback, it used to show negative numbers when refreshing
2012.09.26 – v0.1.0 (beta)
- complete rewrite
- added: real server-side timezone support for date-based instances
- updated: the twoDigits setting (renamed from format to twoDigits)
- new setting: timezone
- new setting: format
- new setting: customDuration
- new setting: customRange
- new setting: fallback
- new setting: dateSource
- new method: pause
- new method: stop
- new method: reset
- new method: start
2011.11.22 – v0.0.1
- initial write of plugin as a tutorial [ lacked many things:) ]
For feature requests, bug reports or support, you can use this contact form
Be notified with jCounter updates!
One thought on “jCounter”