The Basics
This jQuery plugin provides a basic +1/-1 animation to a number styled similar to how scores were updated in old video games.
Installation
Basically just include the file.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/libs/jquery-levelup/jquery.levelup.min.js"></script>
<span>counter <span style="font-weight: bold;" id='the_cnt'>0</span></span>
<script>
var $tc = $('#the_cnt');
$tc.levelup({'start' : 0});
$('#incrementBtn').on('click', function(event) {
$tc.levelup('increment', 1);
$(this).blur();
});
$('#decrementBtn').on('click', function(event) {
$tc.levelup('decrement', 1);
$(this).blur();
});
</script>
Usage
| Name | Type | Default | Description |
|---|---|---|---|
| start | integer | 0 |
Start value for span. |
| incrementer|decrementer.bold | boolean | true | Whether the incrementer|decrementer is bold |
| incrementer|decrementer.color | CSS color string | null | Change the incrementer|decrementer's text color |
| incrementer|decrementer.class | string | null | Add a class to the incrementer|decrementer element |
| showThousands | boolean | false |
Whether to use a thousands separate everywhere. |
| thousandSep | strings | , |
The thousand separator to use. |
| Methods | Param |
|---|---|
'increment' |
integer by which to increment |
'decrement' |
absolute value of integer by which to decrement (always positive) |
'reset' |
|
'get' |
Demos
I will put a few demos here.
Basic Demo
It was originally written as just a small JavaScript animation and this version is effectively what I started with before adding features.
- -
$('#basic_1').levelup('increment', 1);
Increment by bigger value
The increment and decrement methods allow for other values.
- -
$('#basic_2').levelup('increment', 10);
$('#basic_2').levelup('decrement', 7);
Non-bold option
The incrementer and decrementer are bold by default, but you can turn that off
- -
$('#basic_3').levelup({'start' : 0, 'incrementer' : {'bold' : false}});
$('#basic_3').levelup('increment', 10);
$('#basic_3').levelup('decrement', 7);
Controlling the color
You can specify the text color. This can be done via a class as well, but this is for those who simply wish to control one aspect of it.
-
$('#basic_4').levelup({'start' : 0, 'incrementer' : {'color' : 'red'}});
$('#basic_4').levelup('increment', 10);
Controlling the class
You can style the incrementer/decrementer however you like via a class.
-
<style>
.fun_times {
background-color: lightblue;
color: #FFA500;
box-shadow: 0 0 10px 10px #fff;
}
</style>
$('#basic_5').levelup({'start' : 0, 'incrementer' : {'class' : 'fun_times'}});
$('#basic_5').levelup('increment', 10);
Controlling the thousands separator
You can set the thousands separator as anything you want. It is off by default.
-
$('#basic_6').levelup({'start' : 1111, 'showThousands' : true});
$('#basic_6').levelup('increment', 5555);
Accumulator is not span - still must be inline display type
If you don't use a span, which is inlined, you'll need to manually inline the type. This is a temporary fix that relates to where it lines up the animation.
$('#basic_7').levelup({'start' : 1111, 'showThousands' : true});
$('#basic_7').levelup('increment', 5555);
Value Accessor
You'll want to use this to get the value instead of reading the text, because the text could be out of date.
- - :
$('#basic_8').levelup('get');