mcountdown jQuery plugin

Play with this live demo!

Please note: at least one parameter between duration and endDate is mandatory and you can use up to two out of duration, endDate and startDate at the same time. You can check how to use every mcountdown parameter by clicking beside each of them.

duration [dd:hh:mm:ss]

duration: is the duration of the countdown. This parameter can be used:

alone: the starting date will be local machine time (or your setting of nowOverride)
together with endDate: the starting date will be calculated from duration and endDate (if the starting date results in the past, it will be re-calculated using local machine time or your setting of nowOverride)
together with startDate: the end date of the countdown will be calculated from startDate and duration (if it results in the past an error message will be shown)

endDate [YYYY/MM/DD hh:mm:ss]

endDate: it is the target date for the countdown to end. This parameter can be used:

alone: the starting date will be local machine time (or your setting of nowOverride)
together with duration: the starting date will be calculated from duration and endDate (if the starting date results in the past, it will be re-calculated using local machine time or your setting of nowOverride)
together with startDate: the duration of the countdown will be calculated from startDate and endDate (if startDate is in the past, it will be re-calculated using local machine time or your setting of nowOverride)

startDate [YYYY/MM/DD hh:mm:ss]

startDate: it is the starting date of the countdown. This parameter can be used:

together with duration: the end date of the countdown will be calculated from startDate and duration (if it results in the past an error message will be shown)
together with endDate: the duration of the countdown will be calculated from startDate and endDate (if startDate is in the past, it will be re-calculated using local machine time or your setting of nowOverride)

nowOverride [YYYY/MM/DD hh:mm:ss]

nowOverride: it is the date that you can set to override local machine time.

autoStart [true/false]

autoStart: it is the parameter that states if the countdown shoul start automatically or manually.

if there is a startDate value, the countdown will start automatically independently from autoStart value

cycle [true/false]

cycle: it is the parameter that states if the countdown shoul reset to initial values once completed.

countdownLabel [string]

countdownLabel: it is the label to be shown before countdown units.

leave blank if you don't want any label to be shown before countdown units

countdownUnitsToShow [days,hours,minutes,seconds]

countdownUnitsToShow: it is an array of strings that contains the units to be shown: days, hours, minutes and seconds.

leave an element blank if you don't want it to be shown: for example setting ["hours","minutes","seconds"] will result in days NOT showing and hours being increased accordingly if it is the case

countdownUnitsLabels [days,hours,minutes,seconds]

countdownUnitsLabels: it is the array of strings containing the labels to be shown after the digits in the countdown for days, hours, minutes and seconds respectively.

use an empty string if you don't want the label to be shown: for example setting [" "," hours "," minutes "," "] shows labels only for hours and minutes
remember to match labels to the digits to be shown (previous parameter): for example if you set countdownUnitsToShow to ["hours","minutes","seconds"] you have to set only the three labels for hours, minutes and seconds [" h ", " m ", " s "]

showElapsedTime [true/false]

showElapsedTime: it is the parameter that indicates if the time elapsed from the countdown start has to be shown.

elapsedTimeLabel [string]

elapsedTimeLabel: it is the label to be shown before the elapsed time.

elapsedTimeUnitsToShow [days,hours,minutes,seconds]

elapsedTimeUnitsToShow: it is an array of strings that contains the units to be shown for elapsed time: days, hours, minutes and seconds.

leave an element blank if you don't want it to be shown: for example setting ["hours","minutes","seconds"] will result in days NOT showing and hours being increased accordingly if it is the case

elapsedTimeUnitsLabels [days,hours,minutes,seconds]

elapsedTimeUnitsLabels: it is the array of strings containing the labels to be shown after the digits in the elapsed time for days, hours, minutes and seconds respectively.

use an empty string if you don't want the label to be shown: for example setting [" "," hours "," minutes "," "] shows labels only for hours and minutes
remember to match labels to the digits to be shown (previous parameter): for example if you set elapsedTimeUnitsToShow to ["hours","minutes","seconds"] you have to set only the three labels for hours, minutes and seconds [" h ", " m ", " s "]

MCountDown Characteristics

MCountDown is super easy to setup, just take one of the examples provided and tune it to fit your needs!
No javascript or jQuery knowledge is required, just follow the basic initialization steps in the documentation
MCountDown comes with a lot of useful options to fit every project need, just keep on reading
MCountDown works well on all major browsers (Firefox, Chrome, IE, Opera) and also on mobile (both iOS and Android native browsers)
MCountDown is multi instance, you can set up as many counters as you wish on a single page
You can style almost any part of MCountDown as you wish all via CSS: no images needed! You can style all digits and labels separately, you can style error messages and of course you can use your own fonts!
MCountDown is responsive
MCountDown shows you descriptive and well formatted error message, if it is the case
MCountDown comes with 5 different responsive layouts out of the box (with 4 demos each!) and many more coming with new releases!
- Layouts show you how much you can customize the aspect of your countdown to fit any website layout you want to create
- Demos for each layout show you how to use the plugin parameters to build any kind of countdown you can imagine
MCountDown comes with 3 bonus callback functions to be used as you prefer!
MCountDown comes with 12 bonus background blurred images (.jpg 1024x768) to enhance your countdown!
MCountDown offers you detailed documentation, free updates and friendly support
If you are a developer you can extend and customize MCountDown as you wish: the code is fully commented!

Want to go deep into more technical things? Explore MCountDown options!

You can set the duration of the countdown or a target endDate
You can start the countdown programmatically by setting a startDate
You can mix duration, endDate and startDate settings to obtain any kind of countdown you could possibly imagine of!
You can override local machine time and set your own "now" (with nowOverride)
You can start the countdown automatically or manually (with autoStart)
You can reset the initial parameters after the countdown has finished (with cycle), you can set up an "infinite" countdown if you choose to start it automatically!
You can set a label to be shown before the countdown digits (with countdownLabel)
MCountDown can show days, hours, minutes and seconds (all with extra zero left padding if needed) and you can choose which units you want to be shown (with countdownUnitsToShow). If you don't want to show days for instance, hours will be recalculated accordingly (and so forth, if you don't want to show hours, minutes will be recalculated accordingly)
You can choose the label to be shown after each digit (with countdownUnitsLabels)
You can show the time elapsed from the start of the countdown (with showElapsedTime) ...
... and also the label to be shown before the elapsed time digits (with elapsedTimeLabel)
As for countdown units, MCountDown lets you show days, hours, minutes and seconds for elapsed time (all with extra zero left padding if needed) and you can choose which units you want to be shown (with elapsedTimeUnitsToShow) the other units will be recalculated accordingly if it is the case
You can choose the label to be shown after each elapsed time digit (with elapsedTimeUnitsLabel)
You have three callback functions that you can use for MCountDown customization:
- onInit to be called just after MCountDown initialization
- onChange to be called after a change in the smallest unit that is shown (as set by countdownUnitsToShow)
- onComplete to be called after MCountDown is complete

MCountDown Set up for this demo

Files to be included

<!-- one of mcountdown styles -->
<link rel="stylesheet" href="path_to_css/mcountdown_classic_style.css" type="text/css" media="screen">	
<!-- last jQuery version available -->
<script type="text/javascript" src="path_to_js/jquery-last.min.js"></script>
<!-- mcountdown jQuery plugin -->
<script type="text/javascript" src="path_to_js/jquery.mcountdown-1.0.min.js"></script>

HTML code for MCountDown

<!-- for styling purposes I used a wrapper for the counter <div> (if you use it remember to add a .mcountdown-wrapper class for it) -->
<div class="mcountdown-wrapper">
	
	<!-- this is the only mandatory <div>, it must have .mcountdown-counter class -->
	<div id="counter" class="mcountdown-counter"></div>
	
	<!-- if the countdown should start manually, you will need a <div> for control buttons and it must have .mcountdown-controls class -->
	<div class="mcountdown-controls">
		
		<!-- note: control buttons must have these classes -->
		<span class="mcountdown-start">start</span>
		<span class="mcountdown-stop">stop</span>
		<span class="mcountdown-reset">reset</span>
	</div>
</div>

CSS rules for this demo

/* you can style your counter as you wish, this is how I did it for this demo */
/* counter wrapper */	
.mcountdown-wrapper {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1140px;
	text-align: center;
}

/* counter */
#counter {
	position: relative;
	margin: 0 auto 1em auto;
	width: 100%;
	border: 3px solid #ff00ff;
	border-radius: 0.5em;
	padding: 0.5em 0.3em;
	background: #f0f0f0;
	background: rgba(255,255,255,0.85);
}

#counter h1 {
	font-size: 2.5em;
	font-weight: 700;
	margin-bottom: 0.3em;
}

#counter p {
	font-size: 1.25em;
	line-height: 120%;
}

#counter p.mcountdown-paragraph {
	font-size: 2.5em;
}

.mcountdown-counter .mcountdown-paragraph > div,
.mcountdown-counter .mcountdown-paragraph-elapsed > div {
	display: inline;
}

/* control buttons */
.mcountdown-controls {
	position: relative;
	margin: 2em auto;
	text-align: center;
}

.mcountdown-controls span {
	border: 2px solid #ff00ff;
	border-radius: 0.5em;
	padding: 0.5em 1em;
	margin: 0.5em;
	background: #f0f0f0;
	background: rgba(255,255,255,0.85);
	cursor: pointer;
}

.mcountdown-controls span:hover {
	background: #fafafa;
}

.mcountdown-controls span.disabled {
	cursor: auto;
}

.mcountdown-controls span.disabled:hover {
	background: #f0f0f0;
}

MCountDown initialization for this demo

$(document).ready(function() {
	$("#counter").mcountdown({
		duration: "00:00:00:20", // countdown duration
		autoStart: true, // automatic start
		cycle: true, // reset all parameters after countdown is complete
		countdownUnitsToShow: ["days","hours","minutes","seconds"], // show days, hours, minutes and seconds in the countdown
		countdownUnitsLabels: [" days "," hours "," minutes "," seconds"], // these are the labels to be shown after the digits
		showElapsedTime: true, // show time elapsed from countdown start
		elapsedTimeLabel: "Elapsed time: ", // this is the label to be shown before elapsed time digits
		onComplete: changeMyColors // this is my custom function to be called after countdown is complete
	});
});

MCountDown jQuery plugin

Play with this live demo!

MCountDown Unique Features