inorganik / countup.js Goto Github PK

Don't get me wrong, I like introducing three global variables into my namespace because you forgot var:

https://github.com/inorganik/countUp.js/blob/master/countUp.js#L65

A friendly reminder to install jshint and fix the errors, the first line of defense in javascript, especially in a library with no tests.

Also, stop overwriting window.requestAnimationFrame (scary!)

edit: this ticket can be closed when you commit a .jshintrc to the project and fix the errors

Easing doesn't look so good in some scenarios, maybe that should be toggleable?

When I try to use 1.2.0 version I get the following: http://www.screencast.com/t/6EPwhkmM

My bower dep looks like:
"countUp.js": "~1.2.0",

I'm not sure if this is possible with the current version. If it is how could I do it? If it isn't, would you consider adding the functionality? It would count up an attribute such as attrName in

id="countMe" attrName="0"


Possible Usage:

or whatever is more programmer friendly.

To be exact I'm currently working with bootstrap progress bars http://getbootstrap.com/components/#progress and I'd like to animate both the number displayed to the user [working] and the width of the bar [not working] which happens to be defined via an attribute.

I also asked for a work around here http://stackoverflow.com/questions/32087028/parent-style-depends-on-childs-dynamic-value

Which browsers does this work with? Specifically, will it work with IE8?

I was using your library for some SVG and noticed it didn't work across all browsers. The "innerHTML" property doesn't exist on SVG text elements in Safari and IE. I swapped "innerHTML" for the "textContent" property and that seemed to fix it across all browsers. I didn't check across other use cases, but I didn't notice anything out of the ordinary where I was using it outside of SVG. Thanks for the library!

Instead of having Download on Github at the bottom of the for gh-pages, it should show how to install via bower & component. This should also be in the readme.md.

That said it should have the classic Fork on Github in an upper corner of the page. The users should more inclined to add countUp.js via bower or component rather than downloading it themselves.

Am trying to make multiple countup on a single page and all the start and end values are same

so in this case is removed the line no: 152
if (!isNaN(self.endVal) && !isNaN(self.startVal)
----> && self.startVal !== self.endVal
)

Instead it should smoothly tween. For example for 1000000 and 5 seconds it will go 998312 and then abruptly jump to 1000000.

I'm trying to make it work with the number 61,450,980 and it seems to halt abruptly.

I did some testing and I If I use a lower number (6000), it works perfectly. Tried with 60000 and it kind of worked but not perfect like with 6000. So it seem that with the way the slowing is calculated, the larger the number, the less easing it uses. Any idea how to fix this or am I doing something wrong?

Why can't the selector be a class and re-usable?
Would like to write:
$('.countUpMe').each(function() {
var options = {  
useEasing: true,
  useGrouping: true,
  separator: ',',
  decimal: '.'
};
var target = $(this);
var valueToCountTo = parseInt($(this).data('countnum'));
theAnimation = new countUp(target, 0, valueToCountTo, 0, 1, options);
theAnimation.start();
});

I want to stop the counter even if it is not finished yet.

var demo = new countUp: A constructor name should start with an uppercase letter.

Hi there,

Just starting using the latest release of CountUp (non minified version) and I'm getting the error:

self.d is null

Can't really work out why though? My code is:

var dataListings = 267;
var dataListed = 13;
var dataUsers = 88;
var dataSold = 7;
var numAnim = new CountUp("stat--listings", 0, dataListings, 0, 2);
numAnim.start();
var numAnim = new CountUp("stat--listings", 0, dataListed, 0, 2.5);
numAnim.start();
var numAnim = new CountUp("stat--users", 0, dataUsers, 0, 3);
numAnim.start();
var numAnim = new CountUp("stat--sold", 0, dataSold, 0, 3.5);
numAnim.start();

Hey @hhsnopek, someday I'll learn coffeescript. In the meantime, want to help update? If not that's cool.

I attempted to use component with countUp, but I can't find it.
I believe countUp needs to be registered

Can you register a package for this?

Can you tackle this one @hhsnopek?

Do you know if there's any testing libs for animations like this? It would be nice to have tests so we don't have to do them manually

Can you also release a jqueryfied version of your plugin?!

Hey @hhsnopek could you look at this? The current compiled coffee version doesn't work. I compiled the coffee version from v1.1.2 and it didn't work either.

Thanks!

Cool component!

I see you have a bower.json but the package is not actually registered with Bower—meaning it can't be installed via Bower. This should be pretty straight forward to do: http://bower.io/#registering-packages.

I believe Bower also searches for Release Tags...

Is this possible?

Please add a package.json file. It will allow using not only bower (through bower.js) but also NPM.

I'm currently using countUp.js for a long term counter (8 hour loop) for a kiosk display at a trade show. The counter is only being display in the latest version of Google Chrome (Version 40.0.2214.115 64-bit) on a computer who's soul purpose is to display the counter and that's it.

I'm experiencing a issue where the counter freezes roughly 5 minutes into the count up. The following console error is printed:
Uncaught TypeError:
undefined is not a function
formatNumber
printValue
reset
(anonymous function)

Any clues as to what may be causing this, or is countUp.js not meant for longer term sessions like this?

My thanks in advance,
Joshua

how can I remove the decimal option to achieve no decimals in the target element.

@inorganik all we need to do is publish to bower and npm.

bower

Install bower npm bower -g verify the bower.json file then bower register countup [email protected]/inorganik/countUp.js

npm

This will be a bit harder to do, I didn't realize that someone had taken the namescape countup on npm. Looking at that package though it hasn't been updated for a long time. There is a way to disput namespaces on npm. Considering you're the author of countUp.js it makes sense for you to handle this (author to author).

there is a console.log that pops up when startVal and endVal are both the number zero (0).

it does not seems to be an actual error (that i can see) but perhaps there should be an additional check somewhere for that condition and let it pass?

one can actually see it happen in the demo page if open console.

this.options = options || {  
        useEasing : true, // toggle easing  
        useGrouping : true, // 1,000,000 vs 1000000  
        separator : ',', // character to use as a separator  
        decimal : '.', // character to use as a decimal  
    }

the last comma will cause error when use ie7( IE7 mode in IE10)

Hey guys,

it surely is not an issue, more like a question: how can I dispatch an event or call a function when one counter is complete? I'm familiar to JavaScript, but I simply can't find the exact position in the source code. I tried comparing self.remaining to zero and a few other things, but it didn't worked. Do you guys have a hint for me?

Thank in advance!

When using component the name of the package corresponds with the name that you require. The current issue with the name of the package is that countup.js has a dot in it. Which doesn't follow the naming conventions for component. My suggestion is to change the name within component.json and bower.json so they correspond. I'm thinking the name should be countup

People will still be able to search for the package with the keywords and find this as easily as they did before, and we don't have to change the name of the repo; just the name defined in component.json and bower.json 😀

example - TJ uses page.js as the name, but has the reference name as page:
visionmedia/page
page = require('page');

Console logging should only be for debugging - and it also breaks IE9.

I apologize for such a rudimentary question, but how do I have multiple counters run at the same time?

This is what I have now.. what am I doing wrong?

CSS:

<span class="course-stat" id="stat-counter-1">1</span>
<span class="course-stat" id="stat-counter-2">2</span>

JS:

<script type="text/javascript">

    // set countUp options
    var options = {
        useEasing : true, // toggle easing
        useGrouping : true, // 1,000,000 vs 1000000
        separator : ',', // character to use as a separator
        decimal : '.', // character to use as a decimal
    }
    var useOnComplete = false;
    var useEasing = true;
    var useGrouping = true;

    // create instance
    window.onload = function() {
        // fire animation
        // var element = document.querySelector('.jumbo');
        var demo = new countUp('stat-counter-1', 1, 250, 2, 5, options);
        demo.start();

        // display version (no hassling with markup!)
        document.getElementById('version').innerHTML = 'v'+demo.version();
    }

    // create instance
    window.onload = function() {
        // fire animation
        // var element = document.querySelector('.jumbo');
        var demo = new countUp('stat-counter-2', 1, 500, 2, 5, options);
        demo.start();

        // display version (no hassling with markup!)
        document.getElementById('version').innerHTML = 'v'+demo.version();
    }

</script>

Possibility to implement supports for a date formated start/end would be great !

Hi !

it seems that we cannot run multiple counters on the same page, right ?
is there another way to achieve that ?

thanks for you answer and you plugin !

I want to make some contribution, but I can't find any license information in any files.

Could you properly license this project?

Do you think if we can add trigger events on some values to do additional tasks, will be a good addition to your counter?

For instance let's say we have a donate us area and have a target of 10k USDs. Start counting from 0 to total and when current value reaches to 10k, an event is triggered showing firework animations :) while counter is still counting up.

Or counting from 0 to 100, when counter reaches 75, triggers an event changing a label to warning and when it reaches to 90, changing label to danger. This may be used to animate counter color as well resulting a cool effect.

I thought that this might be useful to some folks: an AngularJS directive for countUp

As all animations usually go both ways, it would be nice to have both directions (and a way to "remembering" the value, so it would be possible to count both up and down on the same value.

I'd be happy to help if you need it.

Is this on purpose that the count up is losing speed?

if the decimal integer part length greater than 3，when reset the startval ,the number is not format.

I'm having trouble getting this to work with an SVG text element. Is it possible to make the script count up in an SVG, or will that not work?

Is it possible to use a target class instead of an id?
I would like to call var numAnim = new countUp(); only once.
My idea is to go over a loop of elements and get the options form data-attribute

trying to use this with a date, i set the separator to "" and it crashes.

Thanks for your help, this script is super awesome.
Sorry if i am doing something wrong.

I like to think myself as a dabbler in javascript as I have worked with it for years but never fully as a main coding project. Most of my work is php and sql server base. I have need of a counter (which countUp.js is the best I have seen so far) that can however base it's visual current number on the time a browser would see it.

So say, the start time is 8am and the end time is 4pm , the start time would be value 0 on the countup and the end value would be say 800. So when a browser would see this at say 12pm (noon) the value would be counting up from 400, 401 402 etc as the clock changes.

Then at 4pm the final number would just show 800 till the next day at 8am it resets to 0 and starts again.

Is this possible within countUp? I read as much as i could find on "customizations" of this code , but not being a guru of script like this I thought I would ask the developer himself. Thank you for your time on this subject. In this case I am thinking about doing the clock as a browser (user side) or server side, haven't decided but if there is a way to flag countup to start, reset, end on times yet hold numbers? Hope this all makes sense , let me know. thnx!

ps. i do apologize if this is in the wrong section for q&a.

Hey @hhsnopek, you made some awesome contributions to this repo yesterday. Thanks a bunch. Can you update your coffeescript version to reflect the recent changes to countUp.js? (Added startVal param, ability to toggle easing, count in both directions)