Our last tutorial for this month is a clean countdown timer called ClassyCountdown made by Marius Stanciu of class.pm. This widget might be useful for some web owners so I add it here. Check it out!
Let me just clear some notes. This countdown timer resets upon browser's refresh. On the brighter side, you don't have to adjust the circles because they fit themselves on the space you provided for them. Plus, you can use more themes!!!
FILES NEEDED
How to use these files? Click Here!
FOOTER CODE
Where to place these codes? Click Here!
<script src="http://mwtdatabase.weebly.com/files/theme/jquery.classycountdown.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/jquery.knob.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/jquery.throttle.js"></script>
<script>
$('.countdown').ClassyCountdown({
theme: "flat-colors-wide",
end: $.now() + 95000
});
</script>
<script src="http://mwtdatabase.weebly.com/files/theme/jquery.knob.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/jquery.throttle.js"></script>
<script>
$('.countdown').ClassyCountdown({
theme: "flat-colors-wide",
end: $.now() + 95000
});
</script>
Notes:
Red text - Change with your site address.
Blue text - The theme you want for your timer. You may use flat-colors, flat-colors-wide, flat-colors-very-wide, flat-colors-black, black, black-wide, black-very-wide, black-black, white, white-wide, white-very-wide or white-black.
Green text - This is the number of seconds on your timer.
HEADER CODE
Where to place these codes? Click Here!
<style>
/*!
* jQuery ClassyCountdown
* www.class.pm
*
* Written by Marius Stanciu - Sergiu <marius@class.pm>
* Licensed under the MIT license www.class.pm/LICENSE-MIT
* Version 1.0.0
*
*/
.ClassyCountdown-wrapper > div {
display: inline-block;
position: relative;
width: calc(25% - 20px);
margin: 10px;
}
.ClassyCountdown-wrapper .ClassyCountdown-value {
width: 100%;
line-height: 1em;
position: absolute;
top: 50%;
text-align: center;
left: 0;
display: block;
}
</style>
/*!
* jQuery ClassyCountdown
* www.class.pm
*
* Written by Marius Stanciu - Sergiu <marius@class.pm>
* Licensed under the MIT license www.class.pm/LICENSE-MIT
* Version 1.0.0
*
*/
.ClassyCountdown-wrapper > div {
display: inline-block;
position: relative;
width: calc(25% - 20px);
margin: 10px;
}
.ClassyCountdown-wrapper .ClassyCountdown-value {
width: 100%;
line-height: 1em;
position: absolute;
top: 50%;
text-align: center;
left: 0;
display: block;
}
</style>
BODY CODE
Where to place these codes? Click Here!
<div class="countdown"></div>
CONCLUSION
Thats it!! You're done! Just refer to the code source for more info. Later on, I will search for a countdown timer that does not reset on browser's refresh.
Advance Merry Christmas everyone!
Is it possible to put this in the header of my site so that regardless of where the user goes on the site, it will always appear in the header in the same spot (top right corner?)
ReplyDeleteThanks,
Adam
Of course...
DeleteWeebly doesn't allow for custom HTML elements in the header. You can only drag and drop one of these elements in the body of the page. How can I get the HTML body code for this clocks "div class="countdown"></div" in the header without being able to put one of the html elements up there?
ReplyDeleteIf Weebly does not allow adding elements into the header/ navigation etc, how did I made a Google custom search bar appear on my header area as seen on http://myweeblytricksdemo.weebly.com/
DeleteAlso, do you know if you can set this countdown timer so that it ends at a specific time, instead of "end: $.now() + ## of seconds...
ReplyDeleteFor example, can I make the end: May 1st, 2015?