jCircle Countdown in Documentation

v 1.1

Yet Another Documentation Plugin Crafted with ♥ by Gagtric

Simple, configurable and responsive documentation plugin for your premium files.

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my email gagtric@gmail.com . Thanks so much!

Usage

JavaScript Files

First, load jQuery (v1.4 or greater),knob.js, and the plugin: 

/* ---------- jCircle-countdown.js -----------*/
<script src="assets/js/jquery-1.9.1.js"></script>
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jCircle-countdown.js"></script>

Stylesheets Files

Here's a list of the stylesheet files I'm using with this plugin, you can find more information opening file:

/* ---------- jCircle-countdown.css -----------*/
<link href="assets/css/jCircle-countdown.css" rel="stylesheet" media="screen">

Example

Basic example


<div id="mycountdown"></div>
												
#mycountdown {
  height: 200px;
  text-align: center;
  padding-top: 75px;
  position: relative;
  display: inline-block;
}
														
/* ---------- jCircle-countdown.js -----------*/
$('#mycountdown').jCircle({
  start: 'January 1, 2014',  // set start of date
  end: 'May 12, 2014',       // set end of date
  days: true,     // show day, change false to hide
  hours: true,    // show hour, change false to hide
  minutes: true,  // show minute, change false to hide
  seconds: true,  // show second, change false to hide
  round: true,
  label: 'no',
  backgroundColor: 'rgb(235, 206, 235)',
  foregroundColor: 'gradient,#c644fc,#5856d6',
  design: 'two',
  transition: null,
  onComplete: function() {
  alert('You did it !');
					}
}).find('input').add($(this).find('span')).css('color','#c644fc');

Example without days, design five, custom color and fade transition effect


<div id="mycountdown2"></div>
												
#mycountdown2 {
  height: 200px;
  text-align: center;
  padding-top: 75px;
  position: relative;
  display: inline-block;
}
																
/* ---------- jCircle-countdown.js -----------*/
$('#mycountdown2').jCircle({
  start: 'January 1, 2014',  // set start of date
  end: 'May 12, 2014',       // set end of date
  days: true,     // show day, change false to hide
  hours: true,    // show hour, change false to hide
  minutes: true,  // show minute, change false to hide
  seconds: true,  // show second, change false to hide
  round: true,
  label: 'yes',
  backgroundColor: 'yellow',
  foregroundColor: 'red',
  design: "five", // design five
  transition: null, 
  transition: null,
  onComplete: function() {
  alert('You did it !');
					}
});

/* ---------- jCircle-countdown.js -----------*/
$('#mycounddown').jCircle({
  start: 'January 1, 2014',  // set start of date
  end: 'May 12, 2014',       // set end of date
  days: false,     // hide day, change false to show
  hours: true,    // show hour, change false to hide
  minutes: true,  // show minute, change false to hide
  seconds: true,  // show second, change false to hide
  round: true,
  label: 'yes',
  backgroundColor: 'yellow',
  foregroundColor: 'red',
  design: "five",     // design five
  transition: "fade", // fade transition effect
  onComplete: function() {
	alert('You did it !')
  }
});

Example digital display


<div id="mycounddown3"></div>
												
#mycountdown3 {
  height: 200px;
  text-align: center;
  padding-top: 75px;
  position: relative;
  display: inline-block;
}
																
/* ---------- jCircle-countdown.js -----------*/
$('#mycountdown3').jCircle({
  start: 'January 1, 2014',  // set start of date
  end: 'May 12, 2014',       // set end of date
  days: false,     // hide day, change false to show
  hours: true,    // show hour, change false to hide
  minutes: true,  // show minute, change false to hide
  seconds: true,  // show second, change false to hide
  round: true,
  transition: "fade", // fade transition effect
  onComplete: function() {
	alert('You did it !')
  }
}).find('span').css({"font-family":"'Stalemate', cursive","font-size":"120px","color":"#007aff"});

JavaScript customization and highlights

JavaScript Files

Here's a list of the JavaScript files I'm using with this plugin.

Name Description
jquery.js jQuery is a Javascript library that greatly reduces the amount of code that you must write.
knob.js The animation in this site is carried out from it plugin.
jCircle-countdown.js I implement a plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file.

Customize Countdown

This is default value of option. If you want to customize the option change following code: 

/* ---------- jCircle-countdown.js -----------*/
$('#mycounddown').jCircle({
  start: 'January 1, 2014', 
  end: 'May 12, 2014', 
  days: true,
  hours: true,
  minutes: true,
  seconds: true,
  round: true,
  label: 'yes',
  backgroundColor: 'rgb(235, 206, 235)',
  foregroundColor: 'rgb(135, 206, 235)',
  design: null,
  transition: null,
  onComplete: function() {}
});

Options

This plugin accepts several options to customize its behaviour, the following options are supported :

Name Type Default value Description
start string '' set start of date with blank quote.
end string 'May 12, 2014' Change this to set end of date.
days boolean true Show or hide Day display | change false to hide.
hours boolean true Show or hide Hours display | change false to hide.
minutes boolean true Show or hide Minutes display | change false to hide.
seconds boolean true Show or hide Seconds display | change false to hide.
round boolean true Round or digital display | change false to display only digital.
label string 'yes' Show or hide label | change 'no' to hide label.
backgroundColor string 'rgb(235, 206, 235)' Change this to set background color you can use rgb or hex format. | gradient color 'gradient,colorstart,colorend' use hex format for colorstart and colorend
foregroundColor string 'rgb(235, 206, 235)' Change tis to set foreground color you can use rgb or hex format. | gradient color 'gradient,colorstart,colorend' use hex format for colorstart and colorend
design string null Change this to set design, There are eight available designs : default null, 'one', 'two', 'three', 'four', 'five', 'six' and 'seven' you can easily to change it.
transition string null Change this to set transition, There are two available transition default null, 'fade', 'slide', there you can easily to change it.

Callback

Here's a Callback.

Name Description
onComplete (function) execute some script when time is up

Credits Files Some of your credits and sources

I've used the following files as listed.

JavaScript

  1. jQuery — jQuery is a fast, small, and feature-rich JavaScript library.
  1. knob.js — Nice, downward compatible, touchable, jQuery dial.
  1. pictonic — Icon fonts are not only more efficient than images, they're pixel perfect at every scale, and stylable with css, giving you unparalleled flexibility!.

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. No guarantees, but I'll do my best to assist. Please don't forget to rate ☺.