Animating currency with leading or trailing 0s (Includes workaround)

[adamschwartz]

We get a lot of questions about currency formatting, leading and trailing 0s, etc.

• How can I animate from $000.00 to $012.30?
• How can I animate from 0.00 to 0.50?
• How can I animate from 00000 to 01234?
• How about other currency symbols?
• etc.

The workaround below seeks to temporarily address all of these concerns and more.

---

Here’s the result.

  

How does this work?

There are a number CSS tricks involved to make this work, but the basic idea is simple: add digits before and after the number you want to animate, and hide them with CSS.

Here’s how the example above works:

The goal is to animate from $000.00 to $012.30, so instead we add a digit to the front and back, telling Odometer to animate from 1000.001 to 1012.301.

To get the third decimal point to show, we change the default formatting option from '(,ddd).dd' to '(,ddd).ddd', with this JS:

window.odometerOptions = {
  format: '(,ddd).ddd'
};

Next, we hide the first and last digits, and the formatting comma, with this CSS:

.odometer .odometer-inside .odometer-digit:first-child,
.odometer .odometer-inside .odometer-formatting-mark:nth-child(2),
.odometer .odometer-inside .odometer-digit:last-child {
    display: none
}

Finally, we add the trailing “$” with a CSS pseudo element:

.odometer .odometer-inside:before {
    content: "$"
}

Additional, in this particular example, we added these styles for a large-green-money aesthetic (although none of this was required):

.odometer {
    font-size: 100px;
    color: #27B157
}

.odometer .odometer-inside:before {
    display: inline-block;
    vertical-align: sup;
    opacity: .6;
    font-size: .85em;
    margin-right: .12em
}

And that’s it!

Again, please note, this is implemented entirely using CSS tricks and is not the official solution to these issues. It is only intended as a temporary workaround until we can solve these formatting issues in a better way. But I sincerely I hope it helps people out in the meantime.

[dynamitemedia]

i cant get this to work... i just want to do 00.00 to say 56.20

how can i keep the zero on the end?

[adamschwartz]

To animate from 00.00 to 56.20 using the workaround described above, you would animate from 100.001 to 56.201 and then use the above CSS to hide the first and last digits.

[dynamitemedia]

because i set up a dynamic number i see its failing cause one time it could be 00.01 next could be 55.56 and if it is 55.56 it is cutting it down to 5.5

[adamschwartz]

To apply this workaround dynamically, you would need to write some code to determine when and how to add the appropriate starting/trailing digits. For example, if your numbers range from 0 to 99.99, you could first toFixed the number to 2 decimal places, and then string concatenate a "1" as both a prefix and suffix. So 34.493 would become "34.49" would become "134.491" and then parseFloat that.

[dynamitemedia]

how can this be loaded with a button instead of on opening the page? i have tried many things and did a asearch and cant find the info anywhere

[peterquynh]

The above hack wasn't working so I tried the following:

Added formatFunction to options:

    formatFunction: function(value) {
        return value.toFixed(2);
    }

Replaced the following line: //fractionalCount = this.getFractionalDigitCount(oldValue, newValue); fractionalCount = this.format.precision;

[ghost]

If anyone is still using this library and wants to actually use this fix, I can assure you it works. If you have trouble making it work, feel free to ask.