Animated responsive countdows jQuery plugin
CSS JavaScript HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

MB Coming Soon Timer

Animated responsive countdonw for jQuery.

New in version 1.2.0

Some bug was corrected. Now interval parameter amd stop method work like expected.

New in version 1.1.0

Added speed options property. Now you may customize animation speed. Range is from 0 to "interval". Consider to use 20-50 milliseconds less then interval to avoid animation breaks. Added sample custom stylesheet mb-comingsoon-iceberg.css (and corrisponding less file). Simply use this file instead of the default one or create your own.

Getting started

<!-- Create a div container -->
<div id="myCounter"></div>

<!-- Load jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
	// If load from CDN fail load jQuery locally
	if (typeof jQuery == 'undefined') {
            document.write(unescape("%3Cscript src='js/Lib/jquery-1.11.0.min.js' type='text/javascript'%3E%3C/script%3E"));
        }
</script>
<!-- Load Mb Coming Soon Timer -->
<script src="js/jquery.mb-comingsoon.min.js"></script>
<script>
	// You have few way to initialize the plugin
	// Passing a Date
	$('#myCounter').mbComingsoon(new Date(2014, 5, 3, 9)) //Expires June 5th 2014 9 o'clock
	//or...
	// Passing a string (At your own risk, it's culture dependent!)
	$('#myCounter').mbComingsoon("June 5th 2014") 
	//or
	//Passing an object containing full options
	$('#myCounter').mbComingsoon({
			expiryDate: Date,
			interval: Number, 		//Counter uopdate interval
			localization: {
				days: "days", 		//Localize labels of counter
                                    hours: "hours",
                                    minutes: "minutes",
                                    seconds: "seconds"
			},
			speed: Number,			//Animation duration in milliseconds from 0 to interval
			callBack: Function  		//Function executed on expiry or if espired
							//Callback function pass e reference to the 
							//mbComingSoon object itself as parameter 
							// Example:
							// function(t) {
							//	$(t).mbComingSoon({expiryDate:  a New Date})
							// 	$(t).mbComingSoon('start');
							// }
		}); 
	// Finally you have some additional Methds to control the plugin
	$('#myCounter').mbComingSoon('start') 		// start counter
	$('#myCounter').mbComingSoon('stop') 		// stop counter
	$('#myCounter').mbComingSoon(options: Object) 	// Update options
</script>

Notes

MbComingsoon is resposive and it is compatible with (but not dependent by) Bootstrap. MbCaomingsoon dinamically load a subset (only 0-9 characters) of "Open Sans Condensed" Google Font (bold style). If your site already use this font you may comment realated line in mb-comingsoon.less (and recompile) or in css file.

Try a demo here.