Gavin Brock's CSS/JavaScript Animated Odometer

Version 1.0 - April 7th 2008

If your browser is compatible, you should see an incrementing counter below:

The latest version of this code should be at:
http://www.brock-family.org/gavin/software/web/

Usage:

Create an odometer widget:
myOdometer = new Odometer(htmlElem, opts);

htmlElem is a HTML element in which to draw the odometer widget.
opts is an associative array of options for the widget. Valid options are:
- digits Number of digit boxes to display
  Default value: 6
- tenths If one of the digit boxes should show tenths (this will be white)
  Default value: false
- digitHeight The height of the digit box
  Default value: 40
- digitWidth The width of the digit box
  Default value: 30
- digitPadding The padding inside the digit box
  Default value: 0
- fontStyle The font for the digits (size will be calculated from digitHeight)
  Default value: "font-family: Courier New, Courier, monospace; font-weight: 900;"
- bustedness The wobblieness of the numbers
  Default value: 2

Set the value on the odometer:
myOdometer->set(val);

val is the number to display. This can be fractional.

Get the current value from the odometer:
val = myOdometer->get();

Example

	<html>
	<script src="/odometer.js" type="text/javascript"></script>
	<script type="text/javascript">
	//<![CDATA[
		div = document.getElementById("odometerDiv");
		myOdometer = new Odometer(div, {digits: 10, tenths: true});
		myOdometer.set(123.83);
	//]]>
	<div id="odometerDiv"><div>
	</script>
	</html>

Compatibility

This was tested on:

Safari 2 / 3
Firefox 2
Internet Explorer 7 (not 6);

License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.