Built by Harvest

Tick

Tick is a modular JavaScript plugin that makes visualizing dynamically changing numbers a breeze.

123,456,789

Take a look at the example below to see the basic Tick plugin in action. The example is based on a simple and semantic element: <p class="tick">123,456,789</p>

Project page on GitHub

Example

$( '.tick' ).ticker(
{
  incremental: 3
  delay: 500
  separators: true
});

123,456,789

Summary of all available options

Option Type Default Description
incremental int 1 the amount by which the target value is changed
delay int 1000 delay in milliseconds before every update
separators boolean false whether or not to strip out all non-digit characters
autostart boolean true whether or not to start the ticker immediately

Extensions

Tick also ships with several extensions for different types of data visualizations. In order to use them, just add the appropriate class to the target element. All of these extensions are fully accessible and semantic elements.

No sprites were harmed in the making of these extensions!

Tick.Slide

<p class="tick tick-scroll">123,456,789</p>

123,456,789

Tick.Flip

<p class="tick tick-flip">123,456,789</p>

123,456,789

Setup

Using Tick is easy as can be.

  1. Download the plugin and copy the related files to your app.
  2. Include the plugin in the bottom of your page:
    <script src="path/to/tick.js" type="text/javascript"></script>
  3. Add the .tick class to any number of elements on the page.
  4. Optional: Add one of the extension classes those elements (see above)

FAQs

  • Something doesn't work. Can you fix it?

    Yes! Please report all issues using the GitHub issue tracking tool. Please include browser and OS used when you noticed the issued. The more information provided, the easier it is to fix a problem.

  • What browsers are supported?

    All modern browsers are supported (Firefox, Chrome, Safari and IE). Support for Extensions vary.

Credits