Skip to content
A Meteor wrapper for odometer by HubSpot, for Blaze
CSS JavaScript HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples/testing
lib
.versions
.whitesource
LICENSE
README.md
d4nyll:odometeor.html
d4nyll:odometeor.js
package.js

README.md

odometeor

Join the chat at https://gitter.im/d4nyll/odometeor

A wrapper for odometer by HubSpot.

Demo

How to use

Initiate

In a template

Pass in a number into the template to initiate odometeor. You can then change the value inside.

{{> odometeor 800}}

API-style

Call the Odometeor.create(id, beforeId, options) function, where:

  • id is the ID of the odometer
  • beforeId is the ID of the element you want to insert the odometer before
  • options is an object, all valid options are demonstrated below
Template.api.rendered = function () {
	var opts = {
		value: 87123, // REQUIRED
		format: '(,ddd).dd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
		duration: 3000, // Change how long the javascript expects the CSS animation to take
		theme: 'car', // Specify the theme (if you have more than one theme css file on the page)
		animation: 'count' // Count is a simpler animation method which just increments the value
	};
	Odometeor.create('epicodometeor', 'beforethis', opts);
};

Changing value

The value of the odometer can be changed either:

Using jQuery

$('.odometeor').html(845);

Just Javascript

document.getElementsByClassName('odometeor')[0].innerHTML = 489;

Get all odometeor

To get all instances of Odometeor, simply run Odometeor.getInstances().

Features

If you want a feature in the library that is not in this package, please open up an issue.

You can’t perform that action at this time.