├── readme.md
└── countdown
    ├── jquery.countdown.css
    └── jquery.countdown.js


/readme.md:
--------------------------------------------------------------------------------
 1 | # jQuery Countdown
 2 | 
 3 | A simple jQuery plugin for creating a countdown timer. Example:
 4 | 
 5 | ```js
 6 | $(function(){
 7 | 	
 8 | 	var note = $('#note'),
 9 | 		ts = new Date(2012, 0, 1),
10 | 		newYear = true;
11 | 	
12 | 	if((new Date()) > ts){
13 | 		// The new year is here! Count towards something else.
14 | 		// Notice the *1000 at the end - time must be in milliseconds
15 | 		ts = (new Date()).getTime() + 10*24*60*60*1000;
16 | 		newYear = false;
17 | 	}
18 | 		
19 | 	$('#countdown').countdown({
20 | 		timestamp	: ts,
21 | 		callback	: function(days, hours, minutes, seconds){
22 | 			
23 | 			var message = "";
24 | 			
25 | 			message += days + " day" + ( days==1 ? '':'s' ) + ", ";
26 | 			message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
27 | 			message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
28 | 			message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";
29 | 			
30 | 			if(newYear){
31 | 				message += "left until the new year!";
32 | 			}
33 | 			else {
34 | 				message += "left to 10 days from now!";
35 | 			}
36 | 			
37 | 			note.html(message);
38 | 		}
39 | 	});
40 | 	
41 | });
42 | ```
43 | For more examples go to the plugin homepage on [Tutorialzine](http://tutorialzine.com/2011/12/countdown-jquery/).
44 | 


--------------------------------------------------------------------------------
/countdown/jquery.countdown.css:
--------------------------------------------------------------------------------
 1 | .countdownHolder{
 2 | 	width:450px;
 3 | 	margin:0 auto;
 4 | 	font: 40px/1.5 'Open Sans Condensed',sans-serif;
 5 | 	text-align:center;
 6 | 	letter-spacing:-3px;
 7 | }
 8 | 
 9 | .position{
10 | 	display: inline-block;
11 | 	height: 1.6em;
12 | 	overflow: hidden;
13 | 	position: relative;
14 | 	width: 1.05em;
15 | }
16 | 
17 | .digit{
18 | 	position:absolute;
19 | 	display:block;
20 | 	width:1em;
21 | 	background-color:#444;
22 | 	border-radius:0.2em;
23 | 	text-align:center;
24 | 	color:#fff;
25 | 	letter-spacing:-1px;
26 | }
27 | 
28 | .digit.static{
29 | 	box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
30 | 	
31 | 	background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
32 | 	background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
33 | 	background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
34 | 	background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
35 | 	background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
36 | 	
37 | 	background-image: -webkit-gradient(
38 | 		linear,
39 | 		left bottom,
40 | 		left top,
41 | 		color-stop(0.5, #3A3A3A),
42 | 		color-stop(0.5, #444444)
43 | 	);
44 | }
45 | 
46 | /**
47 |  * You can use these classes to hide parts
48 |  * of the countdown that you don't need.
49 |  */
50 | 
51 | .countDays{ /* display:none !important;*/ }
52 | .countDiv0{ /* display:none !important;*/ }
53 | .countHours{}
54 | .countDiv1{}
55 | .countMinutes{}
56 | .countDiv2{}
57 | .countSeconds{}
58 | 
59 | 
60 | .countDiv{
61 | 	display:inline-block;
62 | 	width:16px;
63 | 	height:1.6em;
64 | 	position:relative;
65 | }
66 | 
67 | .countDiv:before,
68 | .countDiv:after{
69 | 	position:absolute;
70 | 	width:5px;
71 | 	height:5px;
72 | 	background-color:#444;
73 | 	border-radius:50%;
74 | 	left:50%;
75 | 	margin-left:-3px;
76 | 	top:0.5em;
77 | 	box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
78 | 	content:'';
79 | }
80 | 
81 | .countDiv:after{
82 | 	top:0.9em;
83 | }


--------------------------------------------------------------------------------
/countdown/jquery.countdown.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @name		jQuery Countdown Plugin
  3 |  * @author		Martin Angelov
  4 |  * @version 	1.0
  5 |  * @url			http://tutorialzine.com/2011/12/countdown-jquery/
  6 |  * @license		MIT License
  7 |  */
  8 | 
  9 | (function($){
 10 | 	
 11 | 	// Number of seconds in every time division
 12 | 	var days	= 24*60*60,
 13 | 		hours	= 60*60,
 14 | 		minutes	= 60;
 15 | 	
 16 | 	// Creating the plugin
 17 | 	$.fn.countdown = function(prop){
 18 | 		
 19 | 		var options = $.extend({
 20 | 			callback	: function(){},
 21 | 			timestamp	: 0
 22 | 		},prop);
 23 | 		
 24 | 		var left, d, h, m, s, positions;
 25 | 
 26 | 		// Initialize the plugin
 27 | 		init(this, options);
 28 | 		
 29 | 		positions = this.find('.position');
 30 | 		
 31 | 		(function tick(){
 32 | 			
 33 | 			// Time left
 34 | 			left = Math.floor((options.timestamp - (new Date())) / 1000);
 35 | 			
 36 | 			if(left < 0){
 37 | 				left = 0;
 38 | 			}
 39 | 			
 40 | 			// Number of days left
 41 | 			d = Math.floor(left / days);
 42 | 			updateDuo(0, 1, d);
 43 | 			left -= d*days;
 44 | 			
 45 | 			// Number of hours left
 46 | 			h = Math.floor(left / hours);
 47 | 			updateDuo(2, 3, h);
 48 | 			left -= h*hours;
 49 | 			
 50 | 			// Number of minutes left
 51 | 			m = Math.floor(left / minutes);
 52 | 			updateDuo(4, 5, m);
 53 | 			left -= m*minutes;
 54 | 			
 55 | 			// Number of seconds left
 56 | 			s = left;
 57 | 			updateDuo(6, 7, s);
 58 | 			
 59 | 			// Calling an optional user supplied callback
 60 | 			options.callback(d, h, m, s);
 61 | 			
 62 | 			// Scheduling another call of this function in 1s
 63 | 			setTimeout(tick, 1000);
 64 | 		})();
 65 | 		
 66 | 		// This function updates two digit positions at once
 67 | 		function updateDuo(minor,major,value){
 68 | 			switchDigit(positions.eq(minor),Math.floor(value/10)%10);
 69 | 			switchDigit(positions.eq(major),value%10);
 70 | 		}
 71 | 		
 72 | 		return this;
 73 | 	};
 74 | 
 75 | 
 76 | 	function init(elem, options){
 77 | 		elem.addClass('countdownHolder');
 78 | 
 79 | 		// Creating the markup inside the container
 80 | 		$.each(['Days','Hours','Minutes','Seconds'],function(i){
 81 | 			$('<span class="count'+this+'">').html(
 82 | 				'<span class="position">\
 83 | 					<span class="digit static">0</span>\
 84 | 				</span>\
 85 | 				<span class="position">\
 86 | 					<span class="digit static">0</span>\
 87 | 				</span>'
 88 | 			).appendTo(elem);
 89 | 			
 90 | 			if(this!="Seconds"){
 91 | 				elem.append('<span class="countDiv countDiv'+i+'"></span>');
 92 | 			}
 93 | 		});
 94 | 
 95 | 	}
 96 | 
 97 | 	// Creates an animated transition between the two numbers
 98 | 	function switchDigit(position,number){
 99 | 		
100 | 		var digit = position.find('.digit')
101 | 		
102 | 		if(digit.is(':animated')){
103 | 			return false;
104 | 		}
105 | 		
106 | 		if(position.data('digit') == number){
107 | 			// We are already showing this number
108 | 			return false;
109 | 		}
110 | 		
111 | 		position.data('digit', number);
112 | 		
113 | 		var replacement = $('<span>',{
114 | 			'class':'digit',
115 | 			css:{
116 | 				top:'-2.1em',
117 | 				opacity:0
118 | 			},
119 | 			html:number
120 | 		});
121 | 		
122 | 		// The .static class is added when the animation
123 | 		// completes. This makes it run smoother.
124 | 		
125 | 		digit
126 | 			.before(replacement)
127 | 			.removeClass('static')
128 | 			.animate({top:'2.5em',opacity:0},'fast',function(){
129 | 				digit.remove();
130 | 			})
131 | 
132 | 		replacement
133 | 			.delay(100)
134 | 			.animate({top:0,opacity:1},'fast',function(){
135 | 				replacement.addClass('static');
136 | 			});
137 | 	}
138 | })(jQuery);


--------------------------------------------------------------------------------