Thank you for purchasing my work. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here (in the sidebar). Thanks so much!
This element has been created to make countdowns in a fancy way, by using circular shapes. The package includes 3 HTML examples that are easy to modify by setting a few options that we'll go through later.
In the HTML folder, you'll find a regular structure with HTML, CSS and Javascript files, the only image used as background is totally optionnal. Using this plugin doesn't require any advanced knowledge but at least some experience with HTML and CSS markups.
Now let's go through the few steps to integrate this countdown into your site.
Integrating this countdown is quite straight and you should be fine if you follow these simple steps :
First you have to add all the necessary assets (CSS and Javascript files), if your site is already using jQuery, make sure that you don't add it a second time. You'll need 3 Javascript files in this exact order :
Additionnally, the countdown comes with a few translations to display the words 'Days', 'Hours', 'Minutes' and 'Seconds' in other languages, if yours is not included, you can make your own. So once you've added the Javascript files into your site, you can link to them in a similar order as :
<script src="js/jquery.js"></script> <script src="js/countdown_plugins.js"></script> <script src="js/countdown.js"></script>
If you use any of the translations available, this file must be added right before the countdown script, for example for using the french translation it looks like :
<script src="js/jquery.js"></script> <script src="js/countdown_plugins.js"></script> <script src="js/lang/jquery.countdown-fr.js"></script> <script src="js/countdown.js"></script>
Right after the countdown.js script, you'll need to add the small script that initializes and starts the countdown, you'll find a few variants in each HTML file, for example :
<script>
$(document).ready(function($){
$('#countdown_clock').circularCountdown({
strokeDaysBackgroundColor:'rgba(101,127,129,0.06)',
strokeDaysColor:'rgba(101,127,129,0.2)',
strokeHoursBackgroundColor:'rgba(101,127,129,0.06)',
strokeHoursColor:'rgba(101,127,129,0.2)',
strokeMinutesBackgroundColor:'rgba(101,127,129,0.06)',
strokeMinutesColor:'rgba(101,127,129,0.2)',
strokeSecondsBackgroundColor:'rgba(101,127,129,0.06)',
strokeSecondsColor:'rgba(101,127,129,0.2)',
strokeWidth:17,
strokeBackgroundWidth:17,
countdownEasing:'easeOutBounce',
countdownTickSpeed:'slow',
backgroundShadowColor: 'rgba(0,0,0,0.2)',
backgroundShadowBlur: 0,
strokeShadowColor: 'rgba(0,0,0,0.2)',
strokeShadowBlur: 0
});
});
</script>
We'll go through these options in the next section.
Now that the Javascript is in place, you have to add the CSS file (layout.css) or you can copy its content and add it to your main CSS.
Now it's time to add the countdown in your page, it uses a very simple structure that you should keep, only the h1 element is optionnal, otherwise you must keep the exact same markup :
<div id="countdown_container">
<h1>We're working on our new website<br />and we'll be back very soon !</h1>
<div id="countdown_timer"></div>
<div id="countdown_clock">
<canvas id="circular_countdown_days" width="160" height="160"></canvas>
<canvas id="circular_countdown_hours" width="160" height="160"></canvas>
<canvas id="circular_countdown_minutes" width="160" height="160"></canvas>
<canvas id="circular_countdown_seconds" width="160" height="160"></canvas>
</div>
</div>
Now let's see in details the few options available.
In the previous part, we've seen how to add the countdown to a page. Let's get back the piece of Javascript code and see how you can customize the whole countdown :
<script;>
$(document).ready(function($){
$('#circular_countdown').circularCountdown({
strokeDaysBackgroundColor:'rgba(101,127,129,0.06)',
strokeDaysColor:'rgba(101,127,129,0.2)',
strokeHoursBackgroundColor:'rgba(101,127,129,0.06)',
strokeHoursColor:'rgba(101,127,129,0.2)',
strokeMinutesBackgroundColor:'rgba(101,127,129,0.06)',
strokeMinutesColor:'rgba(101,127,129,0.2)',
strokeSecondsBackgroundColor:'rgba(101,127,129,0.06)',
strokeSecondsColor:'rgba(101,127,129,0.2)',
strokeWidth:17,
strokeBackgroundWidth:17,
countdownEasing:'easeOutBounce',
countdownTickSpeed:'slow',
backgroundShadowColor: 'rgba(0,0,0,0.2)',
backgroundShadowBlur: 0,
strokeShadowColor: 'rgba(0,0,0,0.2)',
strokeShadowBlur: 0
});
});
</script>
You first have 8 color values, each one targetting a specific element, for example strokeDaysBackgroundColor is the color of the background stroke of the 'Days' element and strokeDaysColor is the color of the stroke of the 'Days'. Then follows the same structure for the 'Hours', 'Minutes' and 'Seconds' elements. You can use here RGBa values or regular colors like #cccccc.
Then you have 2 values that define the stroke width : strokeWidth and strokeBackgroundWidth, both should use the same value. You can make discs out of these strokes by setting a number which is exactly 10% of the width of the countdown. For example if your countdown has a width of 600px, you can use 60px for both strokeWidth and strokeBackgroundWidth and you'll get discs instead of strokes.
The 2 next options are the easing with countdownEasing and the speed of the tick event (which can be slow, fast or set in milliseconds).
I've also added the possibility to set a shadow for all circular elements, just pick up a color and set the blur according to your preferences. I'd recommend to keep low values so it doesn't look too blurry.
The last thing you'll need to do is to set the date so the script will automatically count until it reaches the time you defined. For that, open the file countdown.js and scroll down until the line 189. This snippet is used to define the date and display the numbers corresponding to the days, hours, minutes and seconds remaining.
The date can be set at the exact line 204 :
until: new Date(2013, 8, 30, 9),
Setting your own date is quite straight : you have to define in this order the year, the month, the day, the hours and optionnally minutes and seconds. There's only one thing to keep in mind : months start at 0, it means that 0 corresponds to january, 1 is february, 2 is march, etc. Let's take an example where you want the countdown to count until the 17th of june 2013, the code will be :
until: new Date(2013, 5, 17),
3 numbers can follow as explained above, you can set the exact time by setting the hours, minutes and seconds so from our previous example, if we want the countdown to count until the 17th of june 2013 at 6 PM, the code will be :
until: new Date(2013, 5, 17, 18),
Hours use the 24-hour system.
I've used the following assets as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the items on Codecanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Pixelworkshop