Countdown Magento CMS Page Content Using jQuery and Layout XML

Create a cool page that only shows content after a certain date.

Download this Countdown jQuery Plugin by Keith Wood.

Extract the contents of the ZIP file to your preferred Magento theme JS folder (in my case /js/jquery/jquery.countdown.package-1.6.1/).

Copy the file ‘jquery.countdown.css’ to your skin folder (to take advantage of your CDN settings).

Create a new CMS page and add the title.

In the Content field (hide the WYSIWYG editor) enter:

<script type="text/javascript">
jQuery(function () {
	jQuery("#before").show(); 
	jQuery("#after").hide(); 
	

// set the due date/time
	var eventDate = new Date()
	var eventDate = new Date("January 1, 2014 00:00:00"); 

// load the countdown
	jQuery('#defaultCountdown').countdown({ 
            until: eventDate, 
            timezone: +10,         // set your timezone here (this is AEST)
            onExpiry: liftOff,     // a callback function to call at the due date/time (see below)
            alwaysExpire: true 
        });

// a callback function to call at the due date/time	
	function liftOff() { 
		//console.log('liftOff');
		var template = 'WRITE YOUR HAPPY NEW YEAR CONTENT HERE';
		jQuery("#before").hide(); 
		jQuery("#after").append(template); 
		jQuery("#after").show(); 
	} 
	
// a function to create a link that will help us test it before the due date
	jQuery('#shortlyStart').click(function() { 
		jQuery('#defaultCountdown').countdown('option', { until: -3580 }); 
	}); 	
});
</script>

    <div id="countdownContainer" style="">
        <!-- div to show before due date/time //-->
        <div id="before">
            <p>Counting down to 1 Jan <span id="year">2014</span>, 12:00am AEST.</p>
            <div id="defaultCountdown"></div>
        </div>
        <!-- div to show after and on due date/time //-->
        <div id="after">
            <p>This is it!</p>
        </div>
        <!-- a button to test before date/time... remove for production //-->
        <button type="button" id="shortlyStart">Click here to test before start date</button>        
    </div>

Go to Design Tab > Page Layout > Layout Update XML and enter:

<reference name="head"> 
	<action method="addJs"><script>jquery/jquery.countdown.package-1.6.1/jquery.countdown.min.js</script></action>
	<action method="addCss"><stylesheet>css/countdown.css</stylesheet></action>
</reference>