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="js/jquery-1.12.4.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
								
									00
								
							

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
								
									00
								
							

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