Treehouse

MooTools CountDown Plugin

By on  

There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your reward. Using MooTools, I've created a CountDown plugin that allows you to easily implement a similar system.

The MooTools JavaScript

var CountDown = new Class({

	//implements
	Implements: [Options,Events],

	//options
	options: {
		element: 'countdown',
		start: 10,
		finish: 0,
		startFont: '36px',
		finishFont: '12px',
		onComplete: $empty,
		duration: 1000
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
	},
	
	//get things started
	start: function() {
		this.anim();
	},
	
	//animate!
	anim: function() {
		this.options.element.set('text',this.options.start--);
		var fx = new Fx.Tween(this.options.element,{
			duration: this.options.duration,
			link: 'ignore',
			onComplete: function() {
				if(this.options.start >= this.options.finish) {
					this.anim();
				} else {
					this.fireEvent('complete');
				}
			}.bind(this)
		}).start('font-size',this.options.startFont,this.options.finishFont);
	}
});

/* usage */
window.addEvent('domready',function() {
	var cd = new CountDown({
		element: $('countdown'),
		start: 12,
		finish: 0,
		onComplete: function() {
			this.options.element.set('text','Done! Your special code is: ').setStyle('color','#090');
		}
	}).start();
});

The CountDown class provides options to allow you to customize your countdown:

  • element: The element that will contain the countdown text
  • start: The starting number (defaults to 10)
  • finish: The ending number (defaults to 0)
  • duration: Duration between numbers (defaults to 1000, or 1 second)
  • startFont: The starting text font-size
  • finishFont: The ending text font-size
ydkjs-5.png

Recent Features

  • CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

  • Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

Incredible Demos

  • Create a Spinning, Zooming Effect with CSS3

    In case you weren't aware, CSS animations are awesome.  They're smooth, less taxing than JavaScript, and are the future of node animation within browsers.  Dojo's mobile solution, dojox.mobile, uses CSS animations instead of JavaScript to lighten the application's JavaScript footprint.  One of my favorite effects...

  • Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I...

Discussion

  1. That looks really cool, David!

  2. That’s 100% better than the RapidShare countdowns.

  3. yeah it is better then the rapidshare countdown.

  4. This is so cool!

  5. Very cool effect! I love it :)

  6. cssProdigy

    Once again , great job!

  7. This is pretty cool. Nice one.

  8. Nice script. The animation looks great. And is super useful. I’m trying to mod your script so I can use as a time based ajax form saving tool, like Gmail or Facebook does with messages as a user types… I’m using the basic MooTools Form.Send event but am having something difficulties.

    window.addEvent('domready', function() {
    
    $('myForm').addEvent('submit', function(e) {
        //Prevents the default submit event from loading a new page.
        e.stop();
        //Empty the log and show the spinning indicator.
        var log = $('log_res').empty().addClass('ajax-loading');
        //Set the options of the form's Request handler. 
        //("this" refers to the $('myForm') element).
        this.set('send', {onComplete: function(response) { 
            log.removeClass('ajax-loading');
            log.set('html', response);
        }});
        //Send the form.
        this.send();
    });
    }); 
    

    Where and how would I go about using the above Form.Send event as function that is called from your countdown script once it reaches the end. Any help would be greatly appreciated. I’ve been tinkering for a few hours with nothing working… it’s prolly a little over my head.

  9. Justin

    can this be used to add external content from another page after the countdown?

  10. yeffo

    This kind of plugin is what I needed for my site, it’s great!!! The shame is that when I try to put a variable in the start and finish inputs it don’t works ç_ç

    I’m sure, David, that you can help me and people like that is tryng to do the same… I’ll be very gratefull, if you do

  11. Ho thai tru nhan

    hi david !can you help me buil the countdown .
    it not work with my mootool file.if i use your file (moo1.2.js) have conflig inmy site.

    plsease help me !
    this my file http://9xozo.com/nuke9xozo_h//themes/white/tootip/mootools.js.php

    first Thanks for this !

  12. Thanx!

    Exactly what i needed :)

  13. Hi David,

    Very Nice effect !

    Did you plan to manage timestamp and display like :

    1 hours 38 minutes 03
    1 hours 38 minutes 02

    Thanks

  14. Hi David,

    I extend your plugin to manage timestamp.
    I draft the article on my blog (in French and in English).
    Could I give you the link?

    I shall quote you in the thanks.

    (A friend will translate the french version because my english isn’t fluent :s)

  15. Here, this is the MooCountdown : http://web-innovation.fr/blog/?p=239

    It extends this class to the use of Timestamp.

    Thanks for your work =)

  16. Clayton Swan

    Hey I’ve been looking at your timer here and I like it alot but I need to add something to it and I cannot figure out how.

    What I need is a way of stopping it mid-way through at an arbitrary point. I can’t figure out how.

    Does anybody have any ideas?

  17. I am having trouble getting this to work in Asp.Net. Here is my HTML code below. Do I need to assign it to a label or some other type of control? Any suggestions? Thanks.

    $('#countdown').countDown({
        startNumber: 10,
        callBack: function (me) {
            $(me).text('All done! This is where you give the reward!').css('color', '#090');
        }
    });
    
  18. [...] Resource: Sample | Tutorial [...]

  19. This tool is beneficiary for both intermediate and advanced Java developer. Good framework.

  20. [...] MooTools CountDown Plugin [...]

  21. [...] MooTools CountDown Plugin [...]

  22. […] Check out the MooTools version. […]

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!