As part of the Street View saver page, I thought it would be fun to see how far you have “driven“. So I set about finding an odometer. This proved harder than I expected since most of what was out there were static, image based web-counters.
So I set about some CSS hacking and came up with this:
This is entirely CSS and Javascipt based and fairly browser neutral (only fairly common one missing is IE 6 – bleagh).
Full details, including API, here.
Zip download here.
Update: 2009/04/07
Two odometers should work too:
<script src=”odometer.js” type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[
var n = 9999999998;
var m = 10;
var myOdometer1, myOdometer2;
function run () {
var div1 = document.getElementById("odometerDiv1");
var div2 = document.getElementById("odometerDiv2");
myOdometer1 = new Odometer(div1, {value: n, digits: 10, tenths: true});
myOdometer2 = new Odometer(div1, {value: m, digits: 10, tenths: true});
update1();
update2();
}
function update1 () {
n=n+0.0025
myOdometer1.set(n);
setTimeout("update1()", 50);
}
function update2 () {
m=m-0.001
myOdometer2.set(m);
setTimeout("update2()", 100);
}
//]]>
</script>
<body onload=”run()” >
<div id=”odometerDiv1″ style=”width:100%;”></div>
<hr>
<div id=”odometerDiv2″ style=”width:100%;”></div>
Tags: css, javascript, odometer
2008-09-19 (Fri) at 12:19 am
Very cool!
There is a small bug in the HTML file in the zip file. The SRC for the SCRIPT tag that imports odometer.js should be “odometer.js”, not “/odometer.js”.
-Mark
2008-09-19 (Fri) at 11:12 am
Yup – that’s bad. I’ve fixed it and made a “odometer-1.0b.zip” and updated the link above.
Thanks for pointing it out!!
Gavin
2008-10-07 (Tue) at 2:42 pm
Hi,
This is a great script! You did a great job!
I am seeing somthing strange. I notice that the odometer runs at differnt rates with differnt browsers. The same odometer settings runs faster in Firefox then in IE. What to you think is the reason for this?
Thanks,
Jerome
2008-10-07 (Tue) at 2:57 pm
On the demo page (http://www.brock-family.org/gavin/software/web/odometer.html), the updates are triggered by the following function:
function update () {
n=n+0.0025
myOdometer.set(n);
setTimeout(“update()”, 0);
}
The setTimeout tells the Javascript engine to call the update() function again after 0ms (which means “whenever you have a moment”). Depending on your browser/computer, this will vary. Each update() increments the counter by the number 0.0025.
If you want a more consistent timing, you should increase the timeout and “n” increment. e.g. n=n+1.0 with a timeout of 1000 will give you one second updates. Of course you will take a hit on the smoothness of the animation (1 frame per second is not really animation).
Even this though will not be accurate over long times – the 1 second is not exactly 1 second when you take into account the time used to redraw the odometer. For the most accurate solution, you should have a timer repeat very quickly and then base your increment of n relative to a call to the system clock (using date). Obviously this is nowhere near as trivial.
Gavin
2008-10-31 (Fri) at 10:16 pm
Hi Gavin,
Fun script. I have scaled the odometer down to fit into a sidebar. It looks great on the Mac in firefox and Safari. The numbers in IE7 however are now gray instead of bright white. Can you help?
thanks,
Bonnie
2008-11-03 (Mon) at 10:50 pm
This is probably an issue with the semi-transparent overlays to make the gradients. I’ll have a look when I get a windows box to hand.
2009-01-09 (Fri) at 7:31 pm
Thanks for the script. Is it possible to put two odometers on the same page?
2009-04-07 (Tue) at 10:11 am
I added a two odometer example to the post above (since I can’t put HTML in the comments!)
2009-04-08 (Wed) at 3:29 am
You can also notice that the code runs faster on Google Chrome. As it is based on a timeout you can’t expect it to run at the same speed on every setup ( browser / pc ).
Looks great though :)
2009-04-08 (Wed) at 8:58 am
The timing thing is because the timeout is set to 0ms, so the loop runs as fast as possible. This is fun since it gives a visual indication of the javascript/rendering performance of the browser, and that is why Chrome appears so fast.
2009-04-14 (Tue) at 9:29 pm
Is it possible for the counter to count down instead of up
2009-04-14 (Tue) at 10:52 pm
Jonathan, since you use the
odometer.set(n)function to set the value on the counter ton, you can choose whether you want to increment or decrement the counter by how you calculaten. In the two counter example above, one counter goes up, and the other goes down.2009-08-28 (Fri) at 8:31 pm
Hello,
How can I get the counter to be placed on the same line as the text in your example?
use display:inline for the div does not seem to do the trick.
Thanks & regards,
Robin
2009-09-01 (Tue) at 10:44 pm
Just forget the above. But can you extend the odometer to have more digits behind the comma?
Thanks & regards,
Robin
2009-09-06 (Sun) at 12:07 pm
Regarding alignment – that is all CSS magic. I’m sure it’s possible – but would take a lot of head scratching.
The extra fractional digits is a great idea. I guess I could change the “tenths” option to take an integer value instead of a boolean. I’ll have a go at the code when I have some time.