Tick Documentation

The Tick.supported getter returns true if the current browser supports Tick.

// the supported variable will now be either true or false
var supported = Tick.supported;

Call options.setConstant() to define and overwrite global constants. This is helpful to set the locale of your countdowns.

// this snippet sets the locale to Dutch
var localization = {
    YEAR_PLURAL: 'Jaren',
    YEAR_SINGULAR: 'Jaar',
    MONTH_PLURAL: 'Maanden',
    MONTH_SINGULAR: 'Maand',
    WEEK_PLURAL: 'Weken',
    WEEK_SINGULAR: 'Week',
    DAY_PLURAL: 'Dagen',
    DAY_SINGULAR: 'Dag',
    HOUR_PLURAL: 'Uren',
    HOUR_SINGULAR: 'Uur',
    MINUTE_PLURAL: 'Minuten',
    MINUTE_SINGULAR: 'Minuut',
    SECOND_PLURAL: 'Seconden',
    SECOND_SINGULAR: 'Seconde',
    MILLISECOND_PLURAL: 'Milliseconden',
    MILLISECOND_SINGULAR: 'Milliseconde'
};

// loop over localization object and call setConstant method
for (var key in localization) {
    if (!localization.hasOwnProperty(key)){continue;}
    Tick.options.setConstant(key, localization[key]);
}

Call Tick.DOM.create() to create a new Tick counter. The method takes two optional arguments. An element and or an options object.

More information on the tick options object

// create an empty ticker with no options
var tick = Tick.DOM.create();

// create a ticker with some options
var tick = Tick.DOM.create({
    value: 1000,
    didInit: function(tick) {
        console.log('hello!');
    }
});

// create a ticker on an element
var element = document.querySelector('#my-element');
var tick = Tick.DOM.create(element);

// create a ticker on an element with options
var element = document.querySelector('#my-element');
var tick = Tick.DOM.create(element, {
    value: 1000,
    didInit: function(tick) {
        console.log('hello!');
    }
});

Call Tick.DOM.destroy(element) to destroy the Tick counter bound to the given element.

Call Tick.DOM.parse(document.body) to search for Tick counter elements in the given context (in this case document.body) and turn found elements (elements with class .tick)into Tick counters.

Call Tick.DOM.find(element) to return the Tick counter bound to the given element.

Use Tick.helper.interval(callback, interval, options) to setup an accurate timer for updating the Tick value. The callback parameter is required, the interval defaults to 1 second if left out. The options parameter is also optional.

The function returns a timer object. The following methods are available on that object, they are pretty self explanatory:

• start
• stop
• reset
• pause
• resume

The options object can be used to prevent the timer from automatically starting.

An example with all parameters.

var timer = Tick.helper.interval(
    // callback function receives total runtime
    function(runtime) {

    },

    // interval between ticks
    1000,

    // we will manually start this timer
    { autostart:false }
);

// start the timer
timer.start();

A live example with only the callback parameter.

<div class="tick"
     data-value="1000"
     data-did-init="setupInterval">

    <span data-view="text"></span>

</div>
<script>
function setupInterval(tick) {

    Tick.helper.interval(function() {

        // increase value of counter each second
        tick.value++;

    });

}
</script>

Returns current time or date object based on ISO string.

Tick.helper.date() returns current date.

Tick.helper.date('2015-10-10T12:00:00') returns a date object (includes timezone correction) based on the given ISO 8601 compliant string.

Can be used for three purposes:

• Transform a value in a unit type to a number of milliseconds
• Convert a number of milliseconds into a duration of for instance hours or minutes or days
• Calculate the duration between two dates based.

Tick.helper.duration(10, 'seconds') returns the 10 seconds equivalent in milliseconds.

Tick.helper.duration(10, 'seconds'); // 10000
Tick.helper.duration(1, 'minute'); // 60000
Tick.helper.duration(1, 'day'); // 86400000

Tick.helper.duration(86400000, ['h','m','s']) returns the duration in hours minutes and seconds of the given amount of milliseconds. It does not take into account leap years or other date related differences as it only has an amount of milliseconds to work with.

Tick.helper.duration(86400000, ['h','m','s']) // [24, 0, 0]
Tick.helper.duration(86400000, ['m','s']) // [1440, 0]

Tick.helper.duration(a, b, format) returns the duration between date a and date b in the given format taking in account leap years and date related differences.

• 'y' Years
• 'M' Months
• 'w' Weeks
• 'd' Days
• 'h' Hours
• 'm' Minutes
• 's' Seconds
• 'mi' milliseconds

// define date A
var a = Tick.helper.date('2016');

// define date B
var b = Tick.helper.date('2019');

// default format is days, hours, minutes.
Tick.helper.duration(a, b);
// [1096, 0, 0]

// difference in years, months, days
Tick.helper.duration(a, b, ['y', 'M', 'd']);
// [3, 0, 0]

Tick.data.request(url, success, error, options) is a handy helper function to do quick AJAX requests. Both url and success are required parameters, error and options can be left out.

The success callback is called when the request was successful, if not, the error callback is called. The options parameter is not an object but a function. The option function is called right after creating the XMLHttpRequest object and is given the object as it's parameter. This allows you to add your custom properties and headers to the request object without having to rewrite the request function.

// request data from the `data.php` file
Tick.data.request(
    'data.php',
    function(response) {
        // handle server response
    }
);

// add additional headers
Tick.data.request(
    'data.php',
    function(response) {
        // handle server response
    },
    null,
    function(xhr) {
        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    }
);

Tick.data.poll(url, success, interval) is a handy helper function that combines request and interval to poll a given URL each x amount of milliseconds. Both url and success are required parameters, if interval is left out it defaults to a minute.

Tick.count.down() counts down a given amount of milliseconds or counts down to a given date based on input parameters.

When given a date (either date object or ISO8610 string) the Tick.count.down method will count down to the given date.

You can control the time denominations by passing an options object parameter like so.

Tick.count.down('2018', {
    format: ['d','h','m','s']
});

The following additional parameters are available.

• server
• interval

Tick.count.down('2018', {
    // format of output
    format: ['Y','M','d','h','m','s']

    // set to true to use server date
    // Date is automatically determined by parsing server response headers
    // can also be set to an ISO8601 date string
    server: false,

    // the interval between updates
    interval: 1000
});

Tick.count.up() counts up from a given date string. Accepts same parameters as count down but only handles dates. Count up does not have an onended callback method.

Tick.count.schedule() counts towards a date according to a determined schedule. The schedule is given in a natural language which Tick automatically parses to find out the intended schedule.

Tick supports a the following schedule directives where all numbers and denominations are configurable. The wait statements tell Tick to wait an x amount of time before resuming countdown.

• Daily

  • every hour
  • every 20 minutes
  • every 30 seconds
  • from 10 till 20 every hour wait 5 minutes
  • from 10:00:00 till 14:00 every 15 minutes
  • every day at 10
  • every day at 13:45:30
  • every dat at 12:00 wait 1 hour

• Weekly

  • every wednesday at 13
  • every wednesday at 12:00 wait 10 minutes
  • wednesday every hour
  • wednesday from 10 till 14 every hour
  • wednesday 10:00 wait 2 hours
  • every wednesday every 5 minutes
  • every tuesday from 10 till 12 every 5 minutes wait 10 seconds

• Monthly

  • every 1st day of the month at 5
  • every month on the first day
  • every month on the 12th day
  • every last day of the month at 12:00 wait 1 hour
  • every 20th day of the month
  • every 20th day of the month from 10 till 14 every hour

• Yearly

  • every 1st of november at 13
  • every 2nd of november at 12:00
  • every first day of november at 14:00:15
  • every last day of november at 10 wait 30 minutes
  • every 20th day of november
  • every 20th day of november
  • every 20th day of november from 10 till 14 every minute

You can combine schedules to create complex recurring events. For example

wednesday at 10:00, sunday at 9 wait 1 hour

or

at 5, at 7 wait 10 minutes, at 12 wait 15 minutes, at 15:00

The schedule method takes an options object just like the countdown and countup. It exposes one additional property which is the timezone, set it in ISO8601 format and Tick will take care of the rest.

schedule('wednesday at 12', { timezone: '+01:00' })

An API endpoint to add plugins to Tick. By itself Tick only features a Text view and no custom fonts.

Tick can then be extended with plugins to render all sorts of counters. The jQuery, Kickstart and Global packages of Tick will automatically load plugins. You only need this API when you are using the CommonJS, ES2015 or AMD version of Tick.

The add function takes either three parameters or one.

With three parameters:

• Type of plugin.
  • 'view'
  • 'font'
  • 'easing-function'
  • 'transform'
  • 'transition'
• Name of the plugin.
• The function that exports the plugin.

One parameter:

• The plugin module.

// One parameter
import Dots from './tick.view.dots.module';
import HighresFont from './tick.font.highres.module';

// add the dots plugin
Tick.plugin.add(Dots);

// add the font plugin
Tick.plugin.add(HighresFont);

// Three parameters
Tick.plugin.add('view', 'dots', Dots);
Tick.plugin.add('font', 'highres', HighresFont);

Used to set or get the value of the Tick Counter.

// set value
tick.value = 10;

// get value
var myValue = tick.value;

Destroy this tick counter.

tick.destroy();

Returns the root element of this tick counter.

var element = tick.root;

// the supported variable will now be either true or false
var supported = $.tick.supported;

Call $(selector).tick('create') to create a new Tick counter on the element selected with the given selector. The method takes optional option object.

More information on the tick options object

// create an empty ticker with no options
var $element = $(selector).tick('create');

// create a ticker with some options
var $element = $(selector).tick('create', {
    value: 1000,
    didInit: function(tick) {
        console.log('hello!');
    }
});

Call $(selector).tick('destroy') to destroy the Tick counter bound to the given selector.

Call $(document.body).tick('parse') to search for Tick counter elements in the given context (in this case document.body) and turn found elements (elements with class .tick) into Tick counters.

Call $(selector).tick('find') to return the Tick counter bound to the given selector.

Used to set or get the value of the Tick Counter.

// set value
$(selector).tick('value', 10);

// get value
$(selector).tick('value');

Returns the root element of the counter.

var element = $(selector).tick('root');

The following methods function the same as described on the Tick JavaScript API.

• helper
  • interval
  • date
  • duration
• data
  • request
  • poll
• count
  • down
  • up
  • schedule
• plugin
  • add

The only difference is that calling them when using jQuery is done with $.tick instead of Tick.

So Tick.helper.interval in jQuery becomes $.tick.helper.interval.

The font to render the text in. Choose between lowres or highres.

Default is highres

The shape of the dots. auto means that it's defined in CSS. Set to circle or square to set the matching dot shape.

With small dot sizes browser rendering might turn circle shaped dots into slightly square dots.

Default is 'auto', slightly rounded corners with CSS

<style>
    #dots-shape .tick-dots-dot {
        width:10px;
        height:10px;
    }
</style>
<div class="tick"
     id="dots-shape"
     data-value="123">

    <span data-view="dots"
          data-style="shape:circle"></span>

</div>

The color of the dots. Any valid CSS color value.

You can also set gradients. There are two types of gradients to choose from:

• horizontal-gradient(red, green, blue)
• vertical-gradient(#ff0000, green, rgba(0,0,255,.5))

Horizontal will draw from left to right, where vertical will draw from top to bottom. You can set percentage values to define where each color should start like so follow-gradient(red, green 20%, orange, 40%, blue)

The default background color is 'auto' which means the color is defined in CSS

The alignment of the text in the matrix display, mostly relevant for animation purposes. Set to either 'left' or 'right'.

Default is 'left'

The delay between dot updates in milliseconds. Set to a higher value to slow down the character update animation.

Default is 10

The delay between character updates in milliseconds. Combine with align to animate from the right direction.

Default is 0

The transition to use when animating between dot states, The default transition is set to crossfade. For more about transitions read the transition documentation

Default is 'crossfade'

The color of the progress fill. By default it's styled with CSS.

The default is none

The color of the background of the meter. By default it's styled with CSS.

The default is none

The shape of the meter start and end. Can be either auto, round or butt.

If set to auto you can define the shape in CSS.

The default is 'auto'

Either horizontal or vertical, the orientation of the bar.

The default is 'horizontal'

Defines the starting point of the circle in a value between 0 and 1.

The default is 0

Defines the length of the circle in a value between 0 and 1.

The default is 1

Defines the gap between the fill and rail in a value between 0 and 1.

The default is 0

Makes the progress indicator move in the opposite direction.

The default is false

Switches the fill and rail from position.

The default is false

The alignment of the fill and the rail. Can be either center, top, inside or bottom.

The default is 'center'

The padding of the draw area, useful in combination with align option if ring is drawn outside of canvas. Can be any CSS unit.

The default is 0

The shape of the meter start and end. Can be either round or butt.

The default is 'butt'

The color of the progress fill. Any valid CSS color value.

You can also set a gradients. There's three types of gradients to choose from:

• horizontal-gradient(red, green, blue)
• vertical-gradient(#ff0000, green, rgba(0,0,255,.5))
• follow-gradient(#f00, #0f0, #00f)

The follow gradient will draw a gradient along the circular progress line. Horizontal will draw from left to right, where vertical will draw from top to bottom. You can set percentage values to define where each color should start like so follow-gradient(red, green 20%, orange, 40%, blue)

The default background color is #333

The width of the fill in CSS units of choice.

The default is .125em

The shadow thrown by the fill. A normal CSS shadow 1em 0 3px rgba(0, 0, 0, .333).

Tick will automatically scale down the ring to make the shadow fit the drawing area.

The default is none

The color of the background of the meter. Any CSS color value.

The default is #eee

The width of the rail in CSS units of choice.

The default is .125em

The shadow thrown by the rail. A normal CSS shadow 1em 0 3px rgba(0, 0, 0, .333).

The default is none

The sample property defines the audio sample to use. You can supply multiple formats using a comma separated list of url().

By default there are no audio files loaded. These will have to be supplied.

The volume of the audio in a range from 0 to 1. Best to set it a bit lower than master volume level as to not startle your users.

The default is .5

The max time in milliseconds between each value change for the pitch to increase.

The default is 1 second

The amount of pitch increased per time.

The default is .05

The maximum amount of pitch increase.

The default is 1.35

New value fades in, old value fades out.

Takes 3 optional arguments:

• animation speed factor
• intro delay
• outro delay

// default
transition: crossfade;

// play in half of the normal animation duration
transition: crossfade(.5);

// play normal speed, delay intro animation
transition: crossfade(1, .25s) ;

New value moves into view (over x or y axis) from position -100% to 0, old value moves from 0 to plus 100%.

Takes 5 optional arguments:

• axis
• distance factor
• animation speed factor
• intro delay
• outro delay

// default
transition: swap;

// animate over x axis
transition: swap(x);

// animate over y axis at 50% of default distance
transition: swap(y, .5);

New value rotates into view (over x, y or z axis) from -90deg to 0, old value rotates from 0 to 90deg.

Takes 5 optional arguments:

• axis
• distance factor
• animation speed factor
• intro delay
• outro delay

// default
transition: revolve;

// animate over z axis
transition: revolve(z);

// animate over x axis at 50% of default distance
// play in a quarter of normal animation duration
transition: revolve(x, .5, .25);

The move transition moves an element from position start to position end.

By default it transforms from 0 to 100% over the y axis.

// move element from the left to the center in 500ms
transition-in: move(-1em, 0, x) 500ms;

The rotate transition rotates an element from start angle to end angle.

By default it transforms from 0 to 90deg over the x axis.

// element is faced backwards and flips into
// view over y axis in half a second
transition-in: rotate(-180deg, 0, y) .5s;

The scale transition scales an element from start size to end size.

By default it transforms from 0 to 1 over both the x and y axis.

// element is scaled from 75% size to 100% in
// 1.25 seconds with bounce easing
transition-in: scale(.75, 1) 1.25s ease-out-bounce;

<div class="tick"
     data-value="2">

<span data-view="swap"
      data-style="
      transition-in: 
        scale(.8, 1) .75s ease-out-bounce .5s, 
        fade(0, 1) .25s .5s;
      
      transition-out: 
        fade(1, 0) .5s">
    
</span>

</div>