Number Counter Won't Work

Hi,

I’m trying to add a number counter to my site but I can not seem to get it to work.

I tried using this >> http://counterup.webflow.io/ But can’t seem to make it work.

Here is my read only link >> https://preview.webflow.com/preview/datta-solutions-2019?utm_medium=preview_link&utm_source=dashboard&utm_content=datta-solutions-2019&preview=594898e6a4aead9704d67b8e7bada037&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @soulluciani,

  • Did you copy the code in the clone’s projet settings?
  • The script only works once the website is published. Do you have a published link?

Cheers

@ColibriMedia

Here it is
https://datta-solutions-2019.webflow.io/

Hi, just checked. You’re missing the custom footer code in the site’s settings.

<script>
/*!
* jquery.counterup.js 1.0
*
* Copyright 2013, Benjamin Intal http://gambit.ph @bfintal
* Released under the GPL v2 License
*
* Date: Nov 26, 2013
*/
(function( $ ){
  "use strict";

  $.fn.counterUp = function( options ) {

    // Defaults
    var settings = $.extend({
        'time': 400,
        'delay': 10
    }, options);

    return this.each(function(){

        // Store the object
        var $this = $(this);
        var $settings = settings;
      	var origValue = $this.text();

        var counterUpper = function() {
            var nums = [];
            var divisions = $settings.time / $settings.delay;
            var num = origValue;
            var isComma = /[0-9]+,[0-9]+/.test(num);
            num = num.replace(/,/g, '');
            var isInt = /^[0-9]+$/.test(num);
            var isFloat = /^[0-9]+\.[0-9]+$/.test(num);
            var decimalPlaces = isFloat ? (num.split('.')[1] || []).length : 0;

            // Generate list of incremental numbers to display
            for (var i = divisions; i >= 1; i--) {

                // Preserve as int if input was int
                var newNum = parseInt(num / divisions * i);

                // Preserve float if input was float
                if (isFloat) {
                    newNum = parseFloat(num / divisions * i).toFixed(decimalPlaces);
                }

                // Preserve commas if input had commas
                if (isComma) {
                    while (/(\d+)(\d{3})/.test(newNum.toString())) {
                        newNum = newNum.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
                    }
                }

                nums.unshift(newNum);
            }

            $this.data('counterup-nums', nums);
            $this.text('0');

            // Updates the number until we're done
            var f = function() {
                $this.text($this.data('counterup-nums').shift());
                if ($this.data('counterup-nums').length) {
                    setTimeout($this.data('counterup-func'), $settings.delay);
                } else {
                    delete $this.data('counterup-nums');
                    $this.data('counterup-nums', null);
                    $this.data('counterup-func', null);
                }
            };
            $this.data('counterup-func', f);

            // Start the count up
            setTimeout($this.data('counterup-func'), $settings.delay);
        };

        // Perform counts when the element gets into view
        $this.waypoint(counterUpper, { offset: '100%', triggerOnce: true });
    });

  };

})( jQuery );
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>

<script>
jQuery(document).ready(function( $ ) {
$('span.counterup').counterUp({
delay: 100, // the delay time in ms
time: 2000 // the speed time in ms
});
});
</script>

Cheers

@ColibriMedia

Yeah… I tried that and its still not working… not sure why

Any other suggestions?

Hi, you need to rename your text block to something else, create a span wrap with class name counterup as the script targets a span (only wrap the digits).

$('span.counterup').counterUp({

image

Hello @ColibriMedia,

I tried on a project and it worked out great. @soulluciani if you add the span name on the code it will work for you too. But I have a question, is the code open to use? I mean it says it is copyright by Benjamin Intal . Do you know if it is free for anyone?

Hi @Pablo_Cortes,

I’m not a lawyer but if I understand GNU General Public License v2.0 it’s shareable and modifiable and owner’s info are still present as the script comment.

Not 100% sure though, you get me paranoid now.

Hahahaha @ColibriMedia, sorry man I didn’t mean to make you paranoid. I guess the GNU general public license explains it. I didn’t know you got it from github.com. Do you have the link for the actual code. Thanks.

Right here GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible., just realized there’s an counterUp 2 now. Might worth using its new script.

1 Like

Got it, thanks @ColibriMedia. :thinking: I’ll check out the counterUp 2, thanks again. Also, sorry @soulluciani for hijacking your post. Did you get the code to work?

No… I dont know why it wont work. I must be missing something :frowning:

Strike that… I got it… Problem was that I had included the + in the span… dugh…

Thanks for the assist

1 Like

Ok great I was about to reply @soulluciani. Im glad you got it to work.

1 Like

@soulluciani

Could plz you mark this topic as resolved?

Hi. I noticed you had some knowledge of counterups.

I have been trying to find a solution for my counterup but so far haven’t been able to get it to work.

Here is my project:
https://twist-what-you-know.webflow.io/

Password: twist01

The read-only:

https://preview.webflow.com/preview/twist-what-you-know?utm_medium=preview_link&utm_source=designer&utm_content=twist-what-you-know&preview=c83b3f93ceb844d0a671ad16c3c5da3f&mode=preview

I think it doesn’t work because it is conflicting with the intro animation I have.

Any ideas?

Thanks