mhuggins / jquery-countto Goto Github PK

Hey, maintainer(s) of mhuggins/jquery-countTo!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library mhuggins/jquery-countTo is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "mhuggins/jquery-countTo",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hi mhuggins,
I really like your plugin, nice and simple.
I have such a situation, my counter to find in the middle of the page and scroll down the page already no animation. How to make that counter started working when released into the scope of the screen?

If I code data-to="150.000", the output is 150: how can i fix this?
Thanx

Luca

Is it possible to make this script work with waypoint.js?

I currently use:

$('.timer').countTo({
speed: 5000,
});

and tried changing it to:

$('.overview').waypoint(function(direction) {
$('.timer').countTo({
speed: 5000,
});
});

But then the counter stops working.

I tried to use $('.timer').countTo('stop'); but the last count value is missing.

Have been trying to get this to work for some time, and then downloaded your sample code from a previous commit and see that it's not working there either

1a02654

I'm specifically trying to get commas to be added to the value, with no luck.

Thanks

I have tried importing it with browserify and browserify-shim. Is there a way to import it?

hi @mhuggins how can we to detect if countTo has finished.
just in case, when i do count from 10 to 0, i want when the count to has arrive at 0, i want to do something callback, like submit or something.

actually this plugin very helpful.
Thanks.

I think theres some global issue.

Because im changing the data-to and data-from attributes, but they seem to not be respected. Is there a global memory?

Not sure why but occasionally when counting from certain numbers to zero, I end up with -0 being displayed. The number passed in the TO: field is zero.

Hello there, great plugin! Thanks for creating this awesome resource! I was wondering if it could work with a number value that's determined dynamically. For instance, I'm echoing the number of posts on my wordpress site and I'd like the countTo plugin to animate to that number from zero. Do you know if that's possible?

thanks,
Dan

min.js will be included?

Hi, I'm trying to add a span around each number to be able to format each number differently.
formatter: function (value, options) { var value = value.toFixed(options.decimals); return value.replace (/(<.*?>)|(.)/g, function (m0, tag, ch) { return tag || ('<span>' + ch + '</span>'); }); }

I tried to use this formatter function, which works, but ouptuts the tag so they get displayed, instead as HTML. Is there a way to fix this?

Allow delay/sleep in milliseconds before counting up/down. This allows the browser load all image/content and users can focus to numbers.

if (settings.delay)
{
setTimeout(function()
{
data.interval = setInterval(updateTimer, settings.refreshInterval);
}, settings.delay);
}
else
data.interval = setInterval(updateTimer, settings.refreshInterval);

Hi there, I wrote a version for react, may you please link to it from your readme - https://github.com/Noitidart/react-countTo

Is there a method for displaying commas in number output?

Hi I'm having trouble using .countTo for multiple unique counts.
Below is a section of code that i'm using to loop through all the elements with the class .count and for the text() to be used as the 'to' options value. - one element's value is 70 and the other is 800.

                    $('.count').each(function () {


                        if(!$(this).hasClass('counter-complete')) {


                            $(this).addClass('counter-complete').css('visibility', 'visible');

                            var totalNumber = $(this).text();

                            jQuery(function($) {
                                $('.count').countTo({
                                    from: 0,
                                    to: totalNumber,
                                    speed: 5500,
                                    decimals: 2,
                                    refreshInterval: 50,
                                });
                            });

                        }

                    });

The numbers just appear at their to value instantly and no error is put into the console.

Any help would be greatly appreciated. Cheers,

Lew.

I use chrome (Version 30.0.1599.101), Safari (Version 6.0.5 (7536.30.1)), and FF (24.0).

The speed that I set in Chrome comes out faster than the speed in Safari and FF (these last two are the same).

I want to use Sourcegraph for jquery-countTo code search, browsing, and usage examples. Can an admin enable Sourcegraph for this repository? Just go to https://sourcegraph.com/github.com/mhuggins/jquery-countTo. (It should only take 30 seconds.)

Thank you!

In npm repository uploaded version 1.0.0. Please update to 1.2.0

I've tried just about everything.
Examples, workarounds, fixes ... but the formatter just isn't being picked up.

Have the latest version of both countTo and jQuery.

I'm currently using the OnUpdate event , but I'd rather use formatter ...

Hello guys,

I was hoping to get a little help here. I'm looking to add a comma to the complete number.

$('.workers').countTo({
                from: 0,
                to: 18000,
                speed: 1500
            });

I'm looking for this number to render like: 18,000

Thanks in advance!

Using the "data-count-to" attribute on the element seems to make the script count to the number specified + 1. In addition, the script seems to not stop updating the element(not tested but likely, because my laptop fan started whirling heavy).

I know that "data-to" should be used, I'm just pointing out a fun fact. I didn't read the docs and needed a way to dynamically pass the "to" config.

Bower.json has the latest version at v1.1.0, but installing via bower is pulling v1.0.0. Could be a tag issue?

Add specific time when the counter will run. E.g. If the counter will only run from 7 am up to 12 pm every day.

Hi mhuggins,

thank you for your plugin! I tried many ones, but your one seems the best also for the kb size.
I need an help: I pass the values with php into the html and I need to visualize them with some "0s" before the exact number. For example: 001 and not 1.
With php, I'm able to do it with simple functions as "str_split/str_pad".
So, I write "0s" but the plugin (rightly) doesn't preserve them.
How can I do?
Thanks,
LPB

I'm not a JS expert, but when I try to use data-to="25,000" as a data attribute I get a value of 'NAN' which makes sense. Curious how I could get commas in there?

The bower repo points here which gives a 404 error.

Is there currently a way to count with decimal points? Say i want to count to 5.4 it just counts to 5 right now and removes the decimal.

Is there a way to keep the decimal easily?

Thanks!

I am trying to provide preview of numbers to the user, so when the user inputs data-to,data-from and data-speed values (through input fields), the data values are updated in the span below -

<span id="demo-shuffling-numbers" class="shuffling-numbers" data-from="" data-to="" data-speed=""></span>

For preview the user needs to click the preview button.

I am facing a problem where only the values entered the first time are used by the countTo plugin and not the consecutive changes.

The data attributes gets changed when the input values are changed but the preview appears with first inputed values only (no effect after new values are submitted).

I am using the below jQuery for updating and triggering countTo plugin -

$(document).ready(function () {

            $('#shuffling-numbers-preview').click(function(){
                $('#demo-shuffling-numbers').countTo();
            });

            $('#shuffling_numbers-start_from').change(function() {
                $('#shuffling_numbers-start_from').each(function(index) {
                    var value = $(this).val();
                    $('#demo-shuffling-numbers').attr('data-from',value );
                    $('#demo-shuffling-numbers').html(value);
                });

            });

            $("#shuffling_numbers-end_to").change(function() {
                $("#shuffling_numbers-end_to").each(function(index) {
                    $("#demo-shuffling-numbers").attr("data-to", $(this).val());
                });

            });
});

How can I make the countTo plugin count up or down to the new values?

Thanks & Regards.

Would it be possible to add in an easing control to the html data? Or is there a simple global solution that could be added to the js file?

I need something that simply counts up. In my case, we are starting with a value and a set speed of change (say increase count by 3 every 1 second) & continue on without a 'countTo' target. Is this possible?
ps. This is kinda like gmail's countup to infinity storage space

Create a test suite to ensure the plugin is working as designed and doesn't experience any regressions in future changes. QUnit is probably the best bet since this is a jQuery plugin, and QUnit is provided by the jQuery team.

Continue the counting of counter even the page is refresh or reopen

I'm banging my head against this one -- anyone know how to use this great countUp timer, but add commas in the appropriate places as it's counting up? (i.e. change 54321 to 54,321)

I'm doing a

$el.countTo({from:2, to:0});

so from 2 to 0, count down, i have data-speed on the elment set to 2000. How come it takes me to -0? It should be just 0

Counter is not continuous when switching to other tabs.

Counter worked find on page load, but when i click on any dropdown link on the same page it starts counting again. I want it to count only once when i am on the same page.
I tried removing class 'timer' on Complete and it removes class 'timer', but counter still works.

I made a ReactJS version of this -

https://github.com/Noitidart/react-countTo
https://www.npmjs.com/package/react-countTo
http://react-components.com/component/react-color

Just wanted to share with you, as you made an awesome awesome module here!

I am doing a real estate application and I need the plugin to count up to 2.5 is this possible. I tried setting data-from="0" data-to="2.5" but it just counts to 3 any suggestions.

It would be great if I could stop the counter once started.

hi ,tnx u !
how to counter run when seen in browser not when load page?

Could you please tag your releases with git tag?
Thanks!

It would be nice if when the numbers are printed, they can take on specific formatting. For example:

• Commas (e.g.: 32,187,004)
• Currencies & placement of currency sign (e.g.: $327.00 or 96€)

For now, a workaround for the currency sign is to include it outside the DOM element that represents the number being counted. For example:

<span class="currency">$</span><
 span class="counter" data-from="0" data-to="100">0.00</span>

<script type="text/javascript">
  $('.counter').each(function () {
    var $this = $(this);
    $this.countTo({
      from: $this.attr('data-from'),
      to: $this.attr('data-to'),
      decimals: 2
    });
  });
</script>

hi ,tnx u !
how to change number of counter to persian number ?

Just a suggestion. Add a gh-pages branch so we can see examples in action.
ex: http://lankaapura.github.io/jquery-countTo/example.html

For some reason, I am unable to to get the formatting working with decimals.
I have an example here: https://jsfiddle.net/gxp8qrpp/
I used the countTo function to create counter and set the formatter through the options as described in your demo.

Any ideas?