Login to your account!
Join the World's Largest Web App Marketplace!
Great to see you here!
Let’s set up your account in just a couple of steps.
Forgot password?
Enter your username or email to reset your account.
Tempus - SVG Animated Countdown - Mega Package
By : codewritter Published On Monday, July 20, 2015, 06:57 In JavaScript
Tempus is built as a plugin for jQuery and the visual part of it is made with Raphael js, which supports animations even in old browsers, not to mention that the visual part is displayed as SVG (scalable vector graphic), maintaining the visual crispness on any size and any display.
“I need a timer that supports multiple timeframes for my events ..”Tired of changing your time event over and over after it finished? With Tempus you can add how many start/end dates you need in the form of a list with its own complete and active callbacks, so you can sit and relax that Tempus will do its job.
Individual callbacks
- completeMessage : “string or html code on complete, replaces counter”
- complete : function() { /* custom complete callback code /}
- completeURL : “http://domain.com/redirect”
- active : function () {/ active callback code */}
- activeMessage : “string or html used when countdown is active, after counter”
Multiple time frames
Add your events in any order and Tempus will reorder them for you
var dateList = {
/* one time timeframe */
"26.01.2016-12:20/22.02.2016-13:20" : {
”complete” : function (timer) {
// custom code
},
“active” : function (timer) {
// custom code
}
},
/* repeating timer each week */
"friday 15:20/sunday 15:20" : {
“activeMessage” : {
0 : "starting offer",
50 : "half way through",
90 : "almost done"
}
},
};
“I need the labels to be translated in this language ..”You can translate the labels into any language you need, by just adding your own labels to the counter like this:
...
labels : { s: "secs", m: "mins", h: "minutes“,
d: "days", w: "weeks", M: "months", y: "years"},
...
“I need something cool..”The count down or up comes with built in designs that will make you feel highly creative.
You can also use the counters option to color it how ever you like it, with one color or a group of up to 60 colors.
“I need it to support mobile devices too.. and I have a responsive website”Tempus is all about being responsive and working even on old mobile devices. If the browser can support SVG, then it will work.
It will work out of the box with any responsive layout, no need to make upadate calls to the plugin or anything else, just add it to your custom design, and if the container is a different size, Tempus will resize itself.
“sure but I want a custom design for the timer.. ”
No worries, the way Tempus was created, allows you to make any type of design you could wish for. It`s as simple as just adding your own custom made images in the form of an object and your design will take life, with custom fonts and sizes.
If that`s not enough, you can extend the visual handler by yourself, or you can drop me a message and I can add your custom design every month as an update for Tempus, available for free to all clients.
“does it support this type of feature .. ? I need it to do this .. ”So maybe you need a custom feature this counter does not have, no worries… I can add the feature you need and mail you a custom build (48 hours), and once a month I will update the timer with all the custom features I made from customer feedback and custom improvements.
Also, if there`s some type of feature you want to add in yourself, the logic is made available in the source and commented for ease of use and custom modifications.
