Smart Timer And Counter

Smart Timer And Counter
Buy on CodeCanyon for $14

Extended license price: $70.00

This plugin has been purchased 370 times so far.

Plugin released on:
November 8, 2013

Plugin last updated on:
October 7, 2016

Tags: animated, canvas, circular, clock, coming soon, count down, countdown, counter, css, date, elapsed, jquery, responsive, time, timer

Changelog

Version 3.1.1 / 2015.06.11.

  • Fixed: Numbers counter issue with out of place thousands separator

Version 3.1 / 2015.03.11.

  • Added: Timer Target mode can have start value other than 0
  • Added: Clock mode has option for adding GMT time offset
  • Updated: Removed some unuased code in main Timer object

Version 3.0 / 2015.01.15.

  • Added: Plugin is reorginzed to support modules
  • Added: New Module: Number based counters
  • Added: New Skin: Plain
  • Added: New Separator: Comma
  • Added: New element based instance stored in data attribute
  • Added: Several more demo pages with many examples
  • Updated: Many updates to core objects and functions
  • Updated: All skins updated for latest core changes
  • Updated: Third party library updated jQuery Knob 1.2.11
  • Updated: Updates to some of the plugin demos
  • Fixed: Minor mapping issue with the custom skin
  • Fixed: Some overlap calls for extended skins
  • Fixed: Mobile CSS minimized dist file wrong name

Version 2.7 / 2014.05.10.

  • Added: Counter mode allows blocks with one digit only
  • Added: Portuguese language translation file
  • Updated: Few small changes to the core classes
  • Updated: Third party library updated jQuery Knob 1.2.8
  • Fixed: Few instances of using vars that are not initialized

Version 2.6 / 2014.03.01.

  • Added: English Short language translation file
  • Added: Inline skin option to change digits/labels spacer
  • Added: Inline skin has two new bold styles available
  • Updated: Small improvements to included examples files
  • Updated: Third party library updated jQuery Knob 1.2.6
  • Fixed: Inline skin was still recalculating width
  • Fixed: Adding broken CSS class if the style is not set

Version 2.5 / 2014.01.25.

  • Added: Basic Italian language translation file
  • Added: Functions to parse UI related settings used by some skins
  • Added: Fully functional un-styled Base skin in the Core
  • Added: Set start date for countdown for completed calculations
  • Added: Method to get current clock or counter values
  • Added: Method to get current ID of the element
  • Added: Event for change on every 60 seconds (or custom value)
  • Added: Demo to show some of the events related use
  • Updated: Many changes to rendering for more flexibility
  • Updated: Many improvements to all the demos
  • Updated: Improvements for some of the events callbacks
  • Updated: Improvements to the methods getting label names
  • Updated: Small improvements for every default skin
  • Updated: Changes to the way countdown starts and stops
  • Updated: Third party library updated jQuery Knob 1.2.4
  • Deleted: Removed some unused methods related to languages
  • Fixed: Some skins had invalid default style set

Version 2.1 / 2014.01.03.

  • Added: Unique sequence CSS class for each timer on the page
  • Added: Option to blink dividers every second
  • Updated: All skins use improved change method of main skin object
  • Fixed: All skins applied label changes even when not needed
  • Fixed: Issue with the rendering in some rare cases
  • Fixed: Several styling problems with the demo files
  • Fixed: Few general problems with the plugin demos

Version 2.0 / 2013.11.24.

  • Added: New Skin: Custom
  • Added: Counter Mode: new method ‘Elapsed’
  • Added: Examples page for Custom Skin
  • Updated: Expanded existing list of examples
  • Updated: Improvements to all examples
  • Updated: jQuery Knob to version 1.2.2
  • Fixed: Minor issues with some of the examples
  • Fixed: Few problems with Circular Skin settings

Version 1.0 / 2013.11.07.

  • First release

Smart Timer And Counter is a jQuery plugin that can be used to add timers and clocks to the web page. Plugin is highly configurable and expandable through custom skins (visual component), modes (clock/timer logic) and languages (translate labels).

All styling is done using CSS (and Canvas for Circular skin), and all included styles are pure CSS with no images used. Controls are responsive, uses media queries to change counter sizes, and it can break into multiple lines on smaller screens.

Plugin is tested with current Android (with 2.3.5, 4.1.4 and 4.4.4) browsers, iPhone and iPad Safari and Chrome (with iOS 8), all modern desktop browsers (IE8 and IE9 will not show some of the styling). It requires JavaScript and jQuery support to work.

Clock and Counter Modes, Custom Layouts

Plugin can work as clock or as counter. If used as clock, you can show current date/time, or you can start from any date. Counter can countdown to any date, countdown any number of seconds or countup to any seconds limit. Plugin can display different combination of time and date elements, dividers and labels.

List of Modes Controls
  • Layout: combine order for ‘years, ‘months’, ‘days’, ‘hours’, ‘minutes’, ‘seconds’.
  • Dividers: several dividers available to split date / time elements.
  • Number of Digits: customize number of digits for each date / time element.
List of Counter Methods
  • Date: it must be in the future set using JavaScript Data object. Plugin will count to zero to reach set date.
  • Elapsed: it must be in the past set using JavaScript Data object. Plugin counts how much time has elapsed since past date.
  • Seconds: count to zero from specified number of seconds.
  • Target: count from zero to specified number of seconds.

Numbers based count up and down module

Plugin can also use number based format to count up or down with great flexibility. It allows for custom number of digits, decimal places, decimal and thousand separators, custom step (even randomized from set range). You can specify one character before and after the counter (like currency sign).

All included skins (with the exception of Circular) work with the numbers module. Some skins can have a bit different settings.

7 Skins for display: Base, Simple, Animated, Circular, Custom, Plain and Inline

7 Skins for display: Base, Simple, Animated, Circular, Custom, Plain and Inline
Plugin has 7 built in skins to display clocks/counters. Simple and Animated skins have 14 styles each (some the same). Animated skin uses animations (SlideIn, SlideOut, Fade, FadeIn, FadeOut) to change digits. Inline skin can be used on SPAN tags for adding counters inline with text with minimal styling changes.

List of Available Skins
  • Simple: simple way of displaying digits, comes with 14 predefined styles.
  • Animated: uses animation to change digits, comes with 14 predefined styles and 5 animations.
  • Inline: for elements inside the text, comes with 6 predefined styles.
  • Circular: uses Canvas to render circular dials, unlimited color customizations.
  • Custom: extended from Animated Skin, allows free control over colors and styling.
  • Plain: simpler skin with free control over colors and some control for stylings.
  • Base: bonus skin with no styling included, with same behavior as Simple skin.

Custom Skin allows free customization

Custom Skin allows free customization
To use this skin, Animated skin also needs to be loaded. This skin has no predefined skins. But, you can set custom colors, background, shadows, effects from plugin settings. This allows you easy customization of colors and styles. Also, you can change colors independently for every counter element.

Plain Skin allows easy customization

Plain Skin allows easy customization
This is very simple skin that allows customization of colors, font and other elements.

Circular Skin uses Canvas to show circular dials

Circualar Skin uses Canvas to show circular dials
Based on third party jQuery Knob library, allows full customization of size and colors (even using transparency) for number dials.

Easy customization and integration with detailed documentation

Easy customization and integration with detailed documentation
Plugin has wide range of settings for skins, modes, language. It is easy to customize and use with any jQuery based project. Documentation contains detailed explanation of all settings, list of values, list of styles and more. Plugin package has plenty of demos.

Many events and methods available for extra control

Many events and methods available for extra control
Many events available to attach your own code to control things outside of the timers (progress bar, events on the page) with methods to get current state of the counts or clocks, stop or start timers and more. Example in the package shows how to control progress bar for countdown.

Other plugin features

  • Support for translation using language objects to change date/time element labels.
  • Attach your own code on callback events to handle start, stop, finish and other things.
  • Many settings to control counters display: dividers, spacing, labels location, responsiveness…
  • Includes methods to start, stop, reset or modify counter object for each applied element.
  • Includes 4 PDF files documentation with information on skins, modes, settings and styles.

Available Addons

Flip Skin Addon

  • Content: Skin with realistic CSS powered digit flip effect.
  • Link: On CodeCanyon
  • Price: $5.00

LED Skins Addon

  • Content: 4 Skins based on LED Displays
  • Link: On CodeCanyon
  • Price: $5.00

Flat Skins Addon

  • Content: 8 Skins based on squres and circles
  • Link: On CodeCanyon
  • Price: $6.00

Changelog

Version 3.1.1 / 2015.06.11.

  • Fixed: Numbers counter issue with out of place thousands separator

Version 3.1 / 2015.03.11.

  • Added: Timer Target mode can have start value other than 0
  • Added: Clock mode has option for adding GMT time offset
  • Updated: Removed some unuased code in main Timer object

Version 3.0 / 2015.01.15.

  • Added: Plugin is reorginzed to support modules
  • Added: New Module: Number based counters
  • Added: New Skin: Plain
  • Added: New Separator: Comma
  • Added: New element based instance stored in data attribute
  • Added: Several more demo pages with many examples
  • Updated: Many updates to core objects and functions
  • Updated: All skins updated for latest core changes
  • Updated: Third party library updated jQuery Knob 1.2.11
  • Updated: Updates to some of the plugin demos
  • Fixed: Minor mapping issue with the custom skin
  • Fixed: Some overlap calls for extended skins
  • Fixed: Mobile CSS minimized dist file wrong name

Version 2.7 / 2014.05.10.

  • Added: Counter mode allows blocks with one digit only
  • Added: Portuguese language translation file
  • Updated: Few small changes to the core classes
  • Updated: Third party library updated jQuery Knob 1.2.8
  • Fixed: Few instances of using vars that are not initialized

Version 2.6 / 2014.03.01.

  • Added: English Short language translation file
  • Added: Inline skin option to change digits/labels spacer
  • Added: Inline skin has two new bold styles available
  • Updated: Small improvements to included examples files
  • Updated: Third party library updated jQuery Knob 1.2.6
  • Fixed: Inline skin was still recalculating width
  • Fixed: Adding broken CSS class if the style is not set

Version 2.5 / 2014.01.25.

  • Added: Basic Italian language translation file
  • Added: Functions to parse UI related settings used by some skins
  • Added: Fully functional un-styled Base skin in the Core
  • Added: Set start date for countdown for completed calculations
  • Added: Method to get current clock or counter values
  • Added: Method to get current ID of the element
  • Added: Event for change on every 60 seconds (or custom value)
  • Added: Demo to show some of the events related use
  • Updated: Many changes to rendering for more flexibility
  • Updated: Many improvements to all the demos
  • Updated: Improvements for some of the events callbacks
  • Updated: Improvements to the methods getting label names
  • Updated: Small improvements for every default skin
  • Updated: Changes to the way countdown starts and stops
  • Updated: Third party library updated jQuery Knob 1.2.4
  • Deleted: Removed some unused methods related to languages
  • Fixed: Some skins had invalid default style set

Version 2.1 / 2014.01.03.

  • Added: Unique sequence CSS class for each timer on the page
  • Added: Option to blink dividers every second
  • Updated: All skins use improved change method of main skin object
  • Fixed: All skins applied label changes even when not needed
  • Fixed: Issue with the rendering in some rare cases
  • Fixed: Several styling problems with the demo files
  • Fixed: Few general problems with the plugin demos

Version 2.0 / 2013.11.24.

  • Added: New Skin: Custom
  • Added: Counter Mode: new method ‘Elapsed’
  • Added: Examples page for Custom Skin
  • Updated: Expanded existing list of examples
  • Updated: Improvements to all examples
  • Updated: jQuery Knob to version 1.2.2
  • Fixed: Minor issues with some of the examples
  • Fixed: Few problems with Circular Skin settings

Version 1.0 / 2013.11.07.

  • First release