How to use it simple or with jquery ?

[yourchoice]

How to use it simple or with jquery ?

counterUp( document.querySelector('.counter_number1'), { duration: 1000, delay: 16 } );

I have this error: Uncaught TypeError: counterUp is not a function

I use it with jquery and bootstrap 4 libs.

[BhaveshSGupta]

@bfintal, I was kind of trying to say same thing in #1. In other words can we have a demo which doesn't require any server-side stuff because currently many are using https://github.com/bfintal/Counter-Up with jquery. If needed I can help you with something.

[esrat71]

i am getting confused how to initialized it in script ? can anyone help me

[vuminhluan]

Allow me.
https://github.com/bfintal/Counter-Up2/blob/master/index.js

• line 49: delete "export default counterUp"
• line 60: delete "export" keyword
• delete line 135, 137, 139

[Andrew-Cottrell]

For https://github.com/bfintal/Counter-Up2/releases/tag/v1.0.1, extract the dist/index.js file (ECMAScript 5 compatible), rename to counterup2-1.0.1.min.js, and use the following

jQuery(function ($) { // using failsafe $ alias here, see https://api.jquery.com/jQuery/#jQuery3
    "use strict";

    var counterUp = window.counterUp["default"]; // import counterUp from "counterup2"

    var $counters = $(".counter"); // see https://api.jquery.com/jQuery/#jQuery1

    /* Start counting, do this on DOM ready or with Waypoints. */
    $counters.each(function (ignore, counter) { // see https://api.jquery.com/each/
        counterUp(counter, {
            duration: 1000,
            delay: 16
        });
    });

});

[jkdoyle]

Not working for me.

[Andrew-Cottrell]

@jkdoyle Did you see any error in the console? Does window.counterUp look like the following?

> console.dir(window.counterUp)
▼ Module
    decimalPlaces: (...)
 ▶ default: ƒ (t)
    divideNumbers: (...)
    hasComma: (...)
    isFloat: (...)
    Symbol(Symbol.toStringTag): "Module"
    __esModule: true
 ▶ get decimalPlaces: ƒ ()
 ▶ get divideNumbers: ƒ ()
 ▶ get hasComma: ƒ ()
 ▶ get isFloat: ƒ ()
    __proto__: Object

[emranweb]

Please make jquery compatibility to easy uses.

[markcnunes]

Andrew-Cottrell's suggestion works fine for me. Here is an example with Waypoint:
e.g: Codepen: CounterUp2 + Jquery + Waypoint

[thinkvisual]

Andrew-Cottrell's suggestion works fine for me also.

[andriiomelchuk]

Hi Andrew. Does your library work with jquery 3+?

[Andrew-Cottrell]

@yargohor

Hi Andrew. Does your library work with jquery 3+?

It is not my library; I merely commented above how I used Counter-Up2 with jQuery.

Counter-Up2 does appear to work with jQuery 3.4.1, but you would need to ask @bfintal for an authoritative answer.

[debrajhyper]

For https://github.com/bfintal/Counter-Up2/releases/tag/v1.0.1, extract the dist/index.js file (ECMAScript 5 compatible), rename to counterup2-1.0.1.min.js, and use the following

jQuery(function ($) {
    "use strict";
    
    var counterUp = window.counterUp["default"]; // import counterUp from "counterup2"
    
    var $counters = $(".counter");
    
    /* Start counting, do this on DOM ready or with Waypoints. */
    $counters.each(function (ignore, counter) {
        counterUp(counter, {
            duration: 1000,
            delay: 16
        });
    });
    
});

can I include Waypoints.js?

[Andrew-Cottrell]

can I include Waypoints.js?

@markcnunes has kindly provided an example with Waypoint.