Tick Counter

First of all, thank you so much for purchasing a Tick Counter Plugin!

I've tried to make the documentation as extensive as possible. If you have any questions after reading it, do let me know.

If you've ran into trouble, I've added a quick help guide below.

Thanks again for your purchase and have fun!

Stay up to date on new releases and upcoming products.

Package Contents

I hear you thinking, "that lib folder contains a whole lot of files".

Some choices to make it seems but not to worry, it's not as difficult as it looks. There's only a couple files you need.

If you just want to get started and don't know which files to pick, choose the tick.go.js file and the tick.go.css file. This version of Tick will automatically initialise Tick Counters when the website has loaded and can be used with the snippets on the demo site. You can skip to the Setup section.

The list below shows how the files are structured. They are all available in different formats. The tick.go.js file and the tick.go.css file are the kickstart versions of the files below all merged into one.

The Core files (this is the core library)

The View files (this is for example Dots, Flip, Line or Swap)

If you've purchased Dots, the following two fonts are also included. Depending on which font you're going to use with Dots you should include the correct font file. By default Dots is set to use the highres font. You can embed both, but to save space one is better.

The load order is relevant. For JavaScript you need to load the core javascript file last. For the CSS files it's best to load the core CSS file first.

For CSS that would for example look like this:

 <link href="/lib/tick.core.min.css" rel="stylesheet">
 <link href="/lib/tick.view.dots.min.css" rel="stylesheet">

For JavaScript Kickstart that would look something like this:

 <script src="/lib/tick.core.polyfill.js"></script>
 <script src="/lib/tick.view.dots.global.min.js"></script>
 <script src="/lib/tick.font.lowres.global.min.js"></script>
 <script src="/lib/tick.font.highres.global.min.js"></script>
 <script src="/lib/tick.core.kickstart.min.js"></script>

  1. If you plan to use the Tick Counter jQuery API it's best to pick the jQuery versions of the files (replace "kickstart" and "jquery" in the above list of scripts with "jquery"). This version will not load counters automatically, you'll have to parse the DOM for Tick nodes yourself using the following jQuery snippet $('body').tick('parse')

  2. If you need to support IE11 you'll also have to add tick.core.polyfill.js to your project.

  3. The other files might be useful if you're an experienced JavaScript Developer. Note that to add the views and possible fonts you'll have to manually call the Tick.plugin.add method (see documentation for more details).

    • Use the AMD version if you're using something like RequireJS;
    • CommonJS might be handy if you're running Browserify;
    • The Global variant exposes Tick on the window object;
    • The Module version is for use with ES2015 projects;

Setup

To use Tick you have to upload the files we discussed earlier to a folder on your website. For the code snippets below we'll assume it's the go version and the folder we are uploading to is named lib.

Copy the following HTML snippet in the <head> of your web page. <link href="/lib/tick.go.css" rel="stylesheet">

Then copy the following snippet and place it just before the closing </body> tag.

<script src="/lib/tick.go.js"></script>

Make sure the paths in the above code snippets match the location of the CSS and JS files.

Presets copy pasted to your website should now function properly.

Information on how to customize Tick and use the API can be found on the product website.

Help

It seems you've run into an issue or have a question. Don't panic, we're gonna get to the bottom of this!

First take a moment to look over the Tick FAQ page on CodeCanyon. I try to add the most common problems to the FAQ, so the answer to your question might be in there.

Try to send me as much information as possible, this makes it a lot easier for me to help you resolve the problem quickly. The following information is super useful.

If the answer to your question is not in the FAQ and you've carefully read the documentation, contact me via the support tab on the product page and supply me with as much info as possible, I will be more than happy to help you.