Code to provide 3 digit days in countdown

When trying to apply the patch I am getting:
error: patch failed: js/jquery_countdown_timer.js:4
error: js/jquery_countdown_timer.js: patch does not apply

This patch adds 3rd digit to the days counter. Not too pretty, but works. The problem is that the whole counter was coded with only 2 digits per "section" in mind, so the patch looks more like a hack :)

Damn PHP habits. This patch will work for Chrome too.

#4 Patch works like a charm on D7, cross-browsers! Thanks!

Is anyone interested in co-maintaining this module? I currently cannot afford the time to test and commit patches and finish the D8 version.

I used what SiliconMind did but I made some minor adjustments to the output portion because I needed the formatting to stay the same even when adding a third digit to the days section.

Just replace the code at line 31 - 117 the line numbers are if you still have the commented section at the top. I hope this helps!

(function tick(){
		
	// Time left
	left = Math.floor((options.timestamp - (new Date())) / 1000);
	
	if(left < 0){
		left = 0;
	}
	
	// Number of days left
	d = Math.floor(left / days);
	updateDuo(1, 2, d, 0);
	left -= d*days;
	
	// Number of hours left
	h = Math.floor(left / hours);
	updateDuo(3, 4, h);
	left -= h*hours;
	
	// Number of minutes left
	m = Math.floor(left / minutes);
	updateDuo(5, 6, m);
	left -= m*minutes;
	
	// Number of seconds left
	s = left;
	updateDuo(7, 8, s);
	
	// Calling an optional user supplied callback
	options.callback(d, h, m, s);
	
	// Scheduling another call of this function in 1s
	setTimeout(tick, 1000);
})();
	
// This function updates two (or optionally three) digit positions at once
	function updateDuo(minor, major, value, third){
	  if (typeof third !== 'undefined' && third >= 0)
	    switchDigit(positions.eq(third),Math.floor(value/100)%10);
		switchDigit(positions.eq(minor),Math.floor(value/10)%10);
		switchDigit(positions.eq(major),value%10);
	}
	
	return this;
};


function init(elem, options){
	elem.addClass('countdownHolder');

	// Creating the markup inside the container
	$.each(['Days','Hours','Minutes','Seconds'],function(i){
                    

        if (this == 'Days') {
            $('<span class="count'+this+'">'+
                    '<span class="position">'+
                            '<span class="digit static">0</span>'+
                    '</span>'+
                    '<span class="position">'+
                            '<span class="digit static">0</span>'+
                    '</span>'+
            '</span>').appendTo(elem);
		  $('.countDays').append('<span class="position">\
	        <span class="digit static">0</span>\
	        </span><br />');
		} else {
			$('<span class="count'+this+'">'+
                '<span class="position">'+
                        '<span class="digit static">0</span>'+
                '</span>'+
                '<span class="position">'+
                        '<span class="digit static">0</span>'+
                '</span><br />'+
        	'</span>').appendTo(elem);
		}

		$('.count'+this).append('<span class="text-center countTitle">'+
                	this+
                '</span>');

		if(this!="Seconds"){
			elem.append('<span class="countDiv countDiv'+i+'"></span>');
		}
		
	});

}

Hi everyone,

i'm new in drupal and javascript.
Your code works fine for me. I have changed the code a little bit for my claims

Right now it looks like this:

234
:12:32:12

Days
:Hours:Minutes:Seconds

But i want it to look like this:

234 Days
12:32:12

EDIT:

I got it :-)

Here is the Code:

	function init(elem, options){
		elem.addClass('countdownHolder');

		// Creating the markup inside the container
		$.each(['Days'],function(i){
			$('<span class="count'+this+'">'+
				'<span class="position">'+
					'<span class="digit static">0</span>'+
				'</span>'+
				'<span class="position">'+
					'<span class="digit static">0</span>'+
				'</span>'+
				'<span class="position">'+
					'<span class="digit static">0</span>'+
				'</span>'+
			'</span>').appendTo(elem);

		$('.count'+this).append('<span class="text-center countTitle">'+
                this+
                '</span><br />');

		});
		// Creating the markup inside the container
		$.each(['Hours','Minutes','Seconds'],function(i){
			$('<span class="count'+this+'">'+
				'<span class="position">'+
					'<span class="digit static">0</span>'+
				'</span>'+
				'<span class="position">'+
					'<span class="digit static">0</span>'+
				'</span>'+
			'</span>').appendTo(elem);
			
			if(this!="Seconds"){
				elem.append('<span class="countDiv countDiv'+i+'"></span>');
			}
		});

Can anyone upload the full working JS file ? I can't get the three digits to show ... :-(

None of these "patches" work for me and I also need 3 digit days to show up. Anyone?

Ok, so, just cutting and pasting the code did not work, but I was able to get it functioning using bits and pieces of the code snippets above. What I had at the end that is now working is below:

(function($){
	
	// Number of seconds in every time division
	var days	= 24*60*60,
		hours	= 60*60,
		minutes	= 60;
	
	// Creating the plugin
	$.fn.countdown = function(prop){
		
		var options = $.extend({
			callback	: function(){},
			timestamp	: 0
		},prop);
		
		var left, d, h, m, s, positions;

		// Initialize the plugin
		init(this, options);
		
		positions = this.find('.position');
		
		(function tick(){
			
			// Time left
			left = Math.floor((options.timestamp - (new Date())) / 1000);
			
			if(left < 0){
				left = 0;
			}
			
			// Number of days left
	d = Math.floor(left / days);
	updateDuo(1, 2, d, 0);
	left -= d*days;


	// Number of hours left
	h = Math.floor(left / hours);
	updateDuo(3, 4, h);
	left -= h*hours;


	// Number of minutes left
	m = Math.floor(left / minutes);
	updateDuo(5, 6, m);
	left -= m*minutes;


	// Number of seconds left
	s = left;
	updateDuo(7, 8, s);
			
			// Calling an optional user supplied callback
			options.callback(d, h, m, s);
			
			// Scheduling another call of this function in 1s
			setTimeout(tick, 1000);
		})();
		
		// This function updates two (or optionally three) digit positions at once
	function updateDuo(minor, major, value, third){
	  if (typeof third !== 'undefined' && third >= 0)
	    switchDigit(positions.eq(third),Math.floor(value/100)%10);
		switchDigit(positions.eq(minor),Math.floor(value/10)%10);
		switchDigit(positions.eq(major),value%10);
	}
		
		return this;
	};


	function init(elem, options){
		elem.addClass('countdownHolder');

		// Creating the markup inside the container
		$.each(['Days','Hours','Minutes','Seconds'],function(i){
        if (this == 'Days') {
            $(''+
                    ''+
                            '0'+
                    ''+
                    ''+
                            '0'+
                    ''+
            '').appendTo(elem);
		  $('.countDays').append('\
	        0\
	        
');
		} else {
			$(''+
                ''+
                        '0'+
                ''+
                ''+
                        '0'+
                '
'+
        	'').appendTo(elem);
		}


		$('.count'+this).append(''+
                	this+
                '');


		if(this!="Seconds"){
			elem.append('');
		}


	});
	

	}

	// Creates an animated transition between the two numbers
	function switchDigit(position,number){
		
		var digit = position.find('.digit')
		
		if(digit.is(':animated')){
			return false;
		}
		
		if(position.data('digit') == number){
			// We are already showing this number
			return false;
		}
		
		position.data('digit', number);
		
		var replacement = $('',{
			'class':'digit',
			css:{
				top:'-2.1em',
				opacity:0
			},
			html:number
		});
		
		// The .static class is added when the animation
		// completes. This makes it run smoother.
		
		digit
			.before(replacement)
			.removeClass('static')
			.animate({top:'2.5em',opacity:0},'fast',function(){
				digit.remove();
			})

		replacement
			.delay(100)
			.animate({top:0,opacity:1},'fast',function(){
				replacement.addClass('static');
			});
	}
})(jQuery);

Thanks, #4 works - directed here from Code Karate

Just tested the patch in #4--all appears to be operating normally at this time.

I just applied the patch and tested. Works perfectly thanks.

patch was outdated with the latest release!

Since new release update with showing weeks functionality this wont be continue ...