UvumiTools Odometer

Description

Demo 1 : auto-refreshed
1000
Demo 2 : manually refreshed
600

Double-click on counter when spinning to skip animation.

This is a REAL odometer style javascript counter, where you can actually see the numbers spining. No Flash, it's all css and javascript. It can serve multiple purposes, like a live visit counter or a cashier style counter on a shopping website. Well, anything that involves updating a numeric value dynamically. It can also be used a fixed counter, like the one you can generate with a server script, but of course that isn't nearly as much fun as updating it in real time.

Features

Requirements

What you'll need:

How To

Initialization

new UvumiOdometer(element,options);

Arguments

Options

Implementation

First, you simply import the files provided in the zip archive into your document. While you can insert <script> tags anywhere, we recommend you put them inside the <head> tag:

<head>
<!-- Insert these lines in your document's head -->
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-odometer.css"/>
<script type="text/javascript" src="js/mootools-for-odometer.js"> </script>
<script type="text/javascript" src="js/UvumiOdometer.js"> </script>
</head>

Then you must prepare the HTML code. You need one <div>. Let's just give it the ID "myCounter".

<div id="myCounter" >
</div>

Then we initialize the odometer object with this div's ID. Don't forget to wrap the ID with quotes when passing it to the object (double or single, doesn't matter);

<script type="text/javascript" >
new UvumiOdometer('myCounter');
</script>

In the end, if we put everything together. Mootools requires a strict Doctype to work properly. Use something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="css/uvumi-odometer.css"/>
<script type="text/javascript" src="js/mootools-for-odometer.js"> </script>
<script type="text/javascript" src="js/UvumiOdometer.js"> </script> <script type="text/javascript" >
new UvumiOdometer('myCounter');
</script>
</head>
<body>
<div id="myCounter" >
</div>
</body>
</html>

You should get something like this. A counter set to 0 and it does nothing. It has 6 digits because that's the default option.

Let's try to set a starting value. Just write a number inside the div. Let's say 3427 because it's my favorite number.

<div id="myCounter" >
3427
</div>

Alright, refresh your page (not this one, the one we are pretending to build). Now it says 3427. I like 3427.

3427

Ok, it's great, but still not counting. We're going to set a URL to auto-refresh the counter. We just need to add this URL to the Odometer options when we initialize it. Here our script is called 'refresh-counter.php' and is located in the same folder as the document.

<script type="text/javascript" >
new UvumiOdometer('myCounter',{
url:'refresh-counter.php'
});
</script>

Now we have a counter that starts at 3427 and updates its value frenquently. If you loaded this page a while ago, refresh it if you want to see it start from 3427.

3427

Ok, let's try other options: 4 digits, 3 seconds refresh rate

<script type="text/javascript" >
new UvumiOdometer('myCounter',{
url:'refresh-counter.php',
digits:4,
refreshRate:3
});
</script>

3427

Now we're going to do more advanced stuff using manual controls. It's not that advanced for Mootools users, but for novices this part requires Mootools basics, like adding an event, calling object functions. Those are really basic procedures so we won't explain them here. To learn Mootools we recommand reading the Mootorials.

First, we are going to see the countTo() function.

We are going to create a counter with value 500, and a button that says "count to 600":

<div id="myCounter" >
500
</div>
<button id="myButton" type="button" >Count to 600</button>

When we inialize the button, we're going to use default options (no refresh) and we're going to save the instance in a variable named 'counter'.

<script type="text/javascript" >
var counter = new UvumiOdometer('myCounter');
</script>

Saving the object in a variable is important so we have a way to access it later.

Next we add a click event to the button. Don't forget it must be placed inside a domready function.

<script type="text/javascript" >
var counter = new UvumiOdometer('myCounter'); window.addEvent('domready',function(){
$('myButton').addEvent('click',function(){
...
});
});
</script>

Ok, so now we have it all set, we just need to replace the "..." with what we want the button to do when clicked. For this first example we said we wanted to test the counter's countTo() function.
We are just going to call that function with the value we want to count to: 600.

<script type="text/javascript" >
var counter = new UvumiOdometer('myCounter'); window.addEvent('domready',function(){
$('myButton').addEvent('click',function(){
counter.countTo(600);
});
});
</script>

Try clicking the button :

500

Now we're going to see the setValue(), which set the counter directly to the passed value, without counting. Just replace countTo by setValue in the previous example (and eventually change the button so it says something different).

<script type="text/javascript" >
var counter = new UvumiOdometer('myCounter'); window.addEvent('domready',function(){
$('myButton').addEvent('click',function(){
counter.setValue(600);
});
});
</script>

500

Finally, getValue(), returns the counter's value. If called when the counter is counting, the value returned is the final one, not the current. In the exemple we are just going to display the value in an alert dialog.

<script type="text/javascript" >
var counter = new UvumiOdometer('myCounter'); window.addEvent('domready',function(){
$('myButton').addEvent('click',function(){
alert("counter's value : " + counter.getValue());
});
});
</script>

500

Known Issues

Download

Change Log