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!
- A lib folder containing the client library files.
- A presets folder containing ten unique starter presets.
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)
- tick.core.polyfill.js (if you want to support IE11 add this file)
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.
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">
<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>
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
If you need to support IE11 you'll also have to add tick.core.polyfill.js to your project.
- 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;
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
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.
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.
- What browser are you using to test;
- On what OS are you testing;
- Any screenshots that show the problem;
- A step by step test scenario (what steps can I take to reproduce the problem);
- If you got a public website I can test on that helps as well;
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.