Counter

Count up or down

Counter is a small plugin that will count up or down to a given target number. Used in combination with horizon, counting can be forced to begin once it appears in the view port.


Resource Files

Counter requires the following resource files:

Js
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tm.counter.min.js"></script>

Count upon document ready

Set to and from parameters directly in the plugin call or use the data attributes data-count-from and data-count-to directly on the counter wrapper.

100

HOURS WORKED

1300

COFFEES

5600

LINES OF CODE

300

SUPPORT QUESTIONS

Example
<span data-count-from="0" data-count-to="100" class="stats">00</span>

Counter Usage

To call the Counter plugin on one or multiple elements the following call should be added before the closing body tag on document ready.

Example
$( document ).ready( function(){
$( '.stats' ).counter()
});
Attribute Values Default Description
autoStart boolean true Whether counter should start automatically
from number 0 Number at which the counter will begin
to number 100 Number at which the counter will end

Counter + Horizon

When used in combination make the counter start only once in the viewport.

100

HOURS WORKED

1300

COFFEES

5600

LINES OF CODE

300

SUPPORT QUESTIONS

Example
<span data-count-from="0" data-count-to="100" class="stats">00</span>

Start/Reset counter using the inView/outOfView callbacks from Horizon.

Js
$( document ).ready( function(){

// Call counter and set autostart to false
$( .stats ).counter( {
autoStart: false
});

// Call horizon
$( '.stats' ).horizon({
recurring: true,

// Start counter once element is in view
inView: function(){
$( '.stats' ).each( function(){
var counter = $( this ).data( 'counter' );
counter.startCounter();
});
},

// Clear counter once element is out of view
outOfView: function(){
$( '.stats' ).each( function(){
var counter = $( this ).data( 'counter' );
counter.clearCounter();
});
}
});
});

API

The Counter plugin provides a single callback once the counter has reached its target number.

Callback Description
onComplete Called once counter has reached target number, onComplete: function({})
Theme Mountain

Current Version