November 28, 2014

Weebly Tricks #84 - ClassyCountdown Timer

Posted by Domingo Tambasacan at 11/28/2014

Countdown Timer for Weebly


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>

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>


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!


Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

5 comments:

  1. 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?)

    Thanks,
    Adam

    ReplyDelete
  2. Weebly 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?

    ReplyDelete
    Replies
    1. If 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/

      Delete
  3. Also, do you know if you can set this countdown timer so that it ends at a specific time, instead of "end: $.now() + ## of seconds...

    For example, can I make the end: May 1st, 2015?

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top