https://github.com/mhuggins/jquery-countTo

A jQuery plugin that will count up (or down) to a target number at a specified speed.
https://github.com/mhuggins/jquery-countTo

Last synced: 4 days ago
JSON representation

A jQuery plugin that will count up (or down) to a target number at a specified speed.

• Host: GitHub
• URL: https://github.com/mhuggins/jquery-countTo
• Owner: mhuggins
• License: mit
• Created: 2012-04-30T00:11:13.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2017-04-05T23:38:13.000Z (about 7 years ago)
• Last Synced: 2024-06-19T15:57:38.350Z (14 days ago)
• Language: JavaScript
• Size: 20.5 KB
• Stars: 739
• Watchers: 38
• Forks: 217
• Open Issues: 10
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE.txt

Lists

• awesome-wordpress - jQuery countTo - A jQuery plugin that will count up (or down) to a target number at a specified speed. (jQuery Components)

README

        
jQuery countTo Plugin

=====================

[jQuery countTo](https://github.com/mhuggins/jquery-countTo) is a

[jQuery](http://jquery.com) plugin that will count up (or down) to a target

number at a specified speed, rendered within an HTML DOM element.

Requirements:

-------------

[jQuery countTo](https://github.com/mhuggins/jquery-countTo) requires the

latest version of [jQuery](http://jquery.com).

Usage:

------

There are two main approaches to using this plugin: through data attributes on

DOM nodes, and through JS options explicitly passed to the `countTo` function.

These two methods can be mixed and matched as well.  Data attributes takes

precedence over JS options.

### Data Attributes

This approach allows you to define `data-*` attributes on whatever DOM element

will act as a container for your counter.  This is useful when you already know

the values at the time that you are constructing the DOM.

    

    

    

      $('.timer').countTo();

    

A more detailed example that demonstrates all possible options being used is as

follows.

    

    

    

      $('.timer').countTo();

    

Refer to the **Options** section below for more info on the various options

available.

### JavaScript Options

This approach allows you to pass values to the `countTo` function.  This is

useful when you don't know the values at the time the DOM is being rendered.

    

    

    

      $('.timer').countTo({from: 0, to: 500});

    

A more detailed example that demonstrates all possible options being used is as

follows.

    

    

    

      $('.timer').countTo({

        from: 50,

        to: 2500,

        speed: 1000,

        refreshInterval: 50,

        formatter: function (value, options) {

          return value.toFixed(options.decimals);

        },

        onUpdate: function (value) {

          console.debug(this);

        },

        onComplete: function (value) {

          console.debug(this);

        }

      });

    

Refer to the **Options** section below for more info on the various options

available.

Options:

--------

A complete listing of the options that can be passed to the `countTo` method is

below.

  

    Option

    Data Attribute

    Description

  

  

    from

    data-from

    The number to start counting from. (default: 0)

  

  

    to

    data-to

    The number to stop counting at. (default: 100)

  

  

    speed

    data-speed

    The number of milliseconds it should take to finish counting.

        (default: 1000)

  

  

    refreshInterval

    data-refresh-interval

    The number of milliseconds to wait between refreshing the counter.

        (default: 100)

  

    

    decimals

    data-decimals

    The number of decimal places to show when using the default

        formatter. (default: 0)

  

  

    formatter (value, options)

    A handler that is used to format the current value before rendering to

        the DOM.  The true current value and options set is passed to the

        function, and it is run in the context of the DOM element.  It must

        return the formatted value. (default:

        value.toFixed(options.decimals))

  

  

    onUpdate (value)

    A callback function that is triggered for every iteration that the

        counter updates.  The currently rendered value is passed to the

        function, and it is called in the context of the DOM element.

        (default: null)

  

  

    onComplete (value)

    A callback function that is triggered when counting finishes.  The

        final rendered value is passed to the function, and it is called in the

        context of the DOM element. (default: null)

  

Functions:

----------

This plugin also supports functions, primarily for changing state.  Functions are

called by passing the name as a string to the `countTo` jQuery function, e.g.:

`$('#timer').countTo('stop')`.

  

    start

    Resumes the timer if it is stopped.

  

  

    stop

    Stops (pauses) the timer if it is running.

  

  

    toggle

    Starts or stops the timer based upon its current state.

  

  

    restart

    Restarts the timer at its initial "from" value.

  

Created By:

-----------

[Matt Huggins](http://matthuggins.com)

License:

--------

jQuery-countTo is released under the

[MIT license](http://www.opensource.org/licenses/MIT).