Is there any way to force the least significant decimal digit to remain visible if 0?

For instance

When I try a format: '(,ddd).dddd', on a number like 123456.1230

The number 123.456,123 is displayed. I would like to keep that 0 visible.

BTW, thanks for repairing the format issue.

I suggest to add callback as parameter for update method (od.update(val,callback);). it will be very useful if you want to trigger something after digits animation stop.
An example where i had to use setTimeout() method instead callback http://codepen.io/ruddog/pen/qxwEC

Repro steps:

1. Visit docs page (http://github.hubspot.com/odometer)
2. Switch to a different browser tab of the same window
3. Wait 10 seconds
4. Switch back
5. Observe:
   

I'm guessing when the browser tab is blurred the setInterval in the example is continuing to fire but the CSS transition events are not. Not sure what we can do exactly, but probably worth looking into.

Side note: if you open http://github.hubspot.com/odometer/docs/welcome/ in a background tab (an unfocused tab), no matter how long you wait, when you switch to it, the "ODOMETER" CSS animation starts when you focus the tab.

When you are using the html method of an empty jQuery collection (jQuery selector that matches no elements for example) Odometer will throw an error. This is different behaviour from jQuery (which silently fails). The result is that your non Odometer jQuery code behaves and is executed differently.

example

We have a cenario where we'd like to always display 2 digits after decimal point, even if both of them are zero.

Currently, numbers like 420.00 are animated as 420 only, with the decimal point and trailing zeros removed.

Current format we're using is '(,ddd).dd'.

Are we doing something wrong, or is this a limitation of the library? In which case, will support be added for these type of scenarios?

Thanks in advance.

I cant seem to update the number when I am animating the ticker.... example : http://info.xeroscleaning.com click on gallons to see what I mean.

Trying to trigger the setTimeout(function) to a scroll position of 850 but need some help....

$(document).ready(function() {
    var below_850 = false;

    $(document).scroll(function() {
        var top = $(document).scrollTop();
        below_850 = (top > 850);
    });

    setTimeout(function(){
      $('.odometer').html('652348');
    }, 1000);
});

Although it is not used in the language, char is a reserved word in Javascript.
Anyway, I changed char to ch locally and everything works fine.

When working with numbers over 1,000. I honestly can't spot a very discrete pattern. Example 3 shows that you can have three consecutive non-trailing zeroes and still break formatting.

Example 5 shows you can have three consecutive non-trailing zeroes and follow formatting.

If someone hasn't already run into this issue I'm going to try to patch it.

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

When it doesn't work:

Example $50,520.00:

Example $9,400.00:

Example $50,001.00

When it works:

Example $9,400.01:

Example $50,000.01:

Thanks!

The now function assumes that if window.performance is truthy, it will has the now method. This is not the case in IE9, where window.performance is present, but now is undefined.

When you call .text() in jQuery and an animation is taking place, the value returned is a mix of the old and the new one.

When the numbers fly by very fast, sometimes you see the browsers checkerboard pattern since it can't paint new regions fast enough.

Here's an example:

During the animation, it shows .3679 instead of 0.03679

At the bottom of the body (after I load odometer), I have this:

window.odometerOptions = {
    auto: true, // Don't automatically initialize everything with class 'odometer'
    selector: '.odometer', // Change the selector used to automatically find things to be animated
    format: 'd', // Change how digit groups are formatted, and how many digits are shown after the decimal point
    duration: 1000, // Change how long the javascript expects the CSS animation to take
    theme: 'default', // 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,
    // use it when you're looking for something more subtle.
};

It all works except for the format. Why?

Also: The Docs page is unclear: 1) It doesn't say where to download the themes, 2) It doesn't say what the different animations are.

Allowing leading zeros would make it function even more like a physical odometer.

The configuration syntax could be something like:
format: '7(ddd)',

Where "7" means always show at least 7 digits.

ok, this is really only a small problem. I bumped up the animation time to 10 seconds on my system. And i noticed that the meter is not really animated as a real odometer. A real odometer advances the next digit only when the previous digit reaches 9. Your animation "fractionally" advances all digits continously from start number to destination number, all at the same time, which makes it a little bit weird to watch...

I would like to run 4 occasions of .odometer on the same page - only with different results e.g.: 1223 | 100029 | 272728 | 8282

How would you write the init?

setTimeout(function(){
$('.odometer').html('1223');
}, 1000);

How about a theme that looks like a split-flap display?

Related:

• http://en.wikipedia.org/wiki/Flip_clock
• http://en.wikipedia.org/wiki/Split_flap_display
• http://harvesthq.github.io/tick/

Although I haven't thoroughly tested it, in it's current state, Odometer is definitely not IE8 compatible. At the very least, use of document.addEventListener will break odometer in IE8.

If you take a look at this site here after clicking on "Play", it takes you to a screen with a the odometer on the left side intialised to a number below 1.

When you choose a right answer for the question, the odometer points increase.

The problem is, when, say for example, the points increase from 0.25 to 0.55.

While the increment animation is taking triggers, the 0 the integer part vanishes and you see only a .26 while incrementing. I want the odometer to retain the 0 in the integer part of the decimal to be retained while the animation is taking place.

What is the solution to retain the zero while incrementing the decimals below 1? I tried the format option, but that didn't seem to work. Or did I do it wrong?

Issue posted twice. Don't mind the screw up.

Works great on Chrome but I noticed bad flicker of the whole page right when the digits stop spinning on both desktop and iOS Safari. Not sure I've explained this well enough, let me know if you need more information.

[URL Redacted]

I'm running an Odometer on a slider, which when off screen fails to update causing the Odometer to fail. It seems calling $('.odometer').html(5) only runs when the Odometer is on screen, any call when this is off screen causes it to fail.

Is there (or could there be) a way to reset the Odometer to 0, so it can be used again? Or .destroy()?

in Firefox 24 Mobile, numbers are visible outside the intended drawing area. see attached screen shot.

How to add support for numbers such as £0.84? I can't seem to add support to allow this. The number always outputs as £84

This is a feature request, if it's already in I didn't find it on the docs.

It would be very helpful to have some event trigger when it's done cycling through numbers after you update it.

Thanks.

First of all: great work !!
Only one remark: i would like a new theme exactly like the car theme, except that not only the last digit is white, but ALL digits after the "decimal" are white. All digits before "decimal" are black. The current car theme only renders the last digit white (always). Is this possible ?

When I update new count and the odometer is sliding( that is concurrent). odometer has no slide effect at all.

Or, should I check the odometer has 'animating' class at before?

element.willChange support is picking up.

Be sure to read this article from DevOpera before implementing this!

It's now possible to hint to the browser that an animation will occur. It comes with a memory and time overhead and disable the normal optimization a browser will do, so implement it wisely. But it can speed up the animation start time and smoothness. Real tests needs to be conducted in order to see how much, but I'm hoping it's considerably.

Is there a way to keep left zeros on the string in case of pre-defined number of digits?

When I try a format: '(,ddd).dddd', when at rest the format shows:
123456.1234
While animating it shows correctly:
123.456,1234

A .dddd format trims the trailing 0s in the decimal places. Is that expected behaviour?

http://jsfiddle.net/u7Qy6/
Remove the link to the Bootstrap css and it works again.

However it does work with the latest version of Bootstrap (3.1.1). The first Google search result for Twitter Bootstrap refers to 2.3.2 though.

Really cool plugin. However, i'm trigging the numbers animation on scroll and when it comes to the point, numbers do really slow down a bit the site scrolling and general performance.

I understand this type of effect cannot be achieved 100% via CSS4, but is anyone else experiencing this issue?

I've implemented odometer in a one-page site with some other plugins like wow.js, stellar.js etc...

Please correct me if I'm mistaken, but to effectively center the .odometer container element you have to use !important to override a few CSS rules. The default styles within odometer-theme-default.css (lines 1-9) are

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: block;
  vertical-align: middle;
  *vertical-align: auto;
  position: relative;
  position: relative;
}

to center the .odometer container the following overrides are necessary & are not applied without !important

.odometer {
    text-align: center !important;
    display: block !important;
    font-family: 'roboto' !important;
}

or

.odometer {
    padding: 60px 129px;
}

works without !important but is much more difficult to center considered in the context of media queries. Padding is how the GitHub Stars odometer is working on http://github.hubspot.com/odometer/.

The default theme also enforces Helvetica Neue as the font family & this too requires !important to override. Why not just use

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    font-family: inherit;
}

?

The cascade of my stylesheets is in the correct order with my custom styles referenced below odometer-theme-default.css & therefore is not the cause of this issue.

Hello,
We have just add Odometer to twittstrap resources list
http://www.twittstrap.com/resources/details/odometer
Under : Javascript
Regards

Best illustrated in this little codepen.
This example is using the default theme and Quicksand as the font.

This is not a general issue, as it only happens with the default theme, which isn't made for direct use (?). Everything works great with the minimal theme. I just thought, I'd let you know. :)

(Besides the jump, theres also the flicker from #16 in Google Chrome)

The default value used for initialize the Odometer use the innerText property. (Odometer.init)
This property is not implemented in Firefox, to fix it i've changed the value to :

el.odometer = new Odometer {el, value: if el.textContent then el.textContent else el.innerText }

I have a case where I was using this plugin to create an odometer for a value of 182.57. Rather than generating it as a floating point (or throwing an error) the plugin interpreted it as 18,257 (18k). The decimal point is ignored. I was able to generate this with any floating point value.

I assume that patching this would require some manipulation of the functionality that generates content for odometer-formatting-mark class.

I added the class to an element to a rendered template created by the ng-view directive, and there is no formatting.

The formatting appears when added to an element outside the <div ng-view></div>

see http://docs.angularjs.org/api/ngRoute.directive:ngView for details.

I would like to be able to prepend a '$' at the beginning of the number to use the odometer for a currency display. Adding it to the format isnt working (it sticks the '$' into the number. Would it be possible to add this option?

http://github.hubspot.com/odometer/docs/welcome/
Appears not to be working in Safari 6.0.5 (8536.30.1)
A heads up for you guys, cheers!

Running the example code here results in an error because of a missing "new" keyword.

If you change innerText before the last animation as ended, the animations will stop and you'll see a delayed value on odometer

$0.innerText = 300; setTimeout(function() { $0.innerText = 400 }, 100);

What odometer will display is 300, if you do $0.innerText = 500 it will show 400

The setTimeout which adds the 'odometer-animating' class may not be needed if we use the getComputedStyle technique described by this blog post. Definitely worth investigating.

Hi - sorry if this is the wrong place, I've been trying to get it to load when in the viewport. I have a number of them but they all activate from the start. I'm new at JS but struggling.

thanks

For example changing:

@import url("http://fonts.googleapis.com/css?family=Arimo");

to:

@import url("//fonts.googleapis.com/css?family=Arimo");

will make it work for both http and https protocols.