FF1+ IE8+ Opr7+

3D Cube CountDown script

Author: Dynamic Drive

Description: Cube CountDown script takes advantage of CSS3's transform property to display 3D cubes that rotate to count down to any desired future date.  Specify the top most unit of each counter, whether it's "days", "hours", "minutes", or "seconds".  Two event handlers are available for you to run custom code while the counter is winding down (every second), and also, when the target date/time has been reached.

Using CSS, you can customize the counter's visual style in a variety of ways, including optimizing for mobile browsers by either making the counter "vertical" in nature, or scaling down the size of the cubes simply by decreasing the counter's CSS font-size property. Furthermore, the script works across all major browsers and devices; in legacy browsers such as IE8 and IE9, the countdown will simply be non 3D. All this makes for a countdown script that looks good no matter the screen size or device. Who says 3D is more hassle than good?

Demos:

until October 17, 2018 11:26:30!

until Christmas!


Directions Developer's View

Step 1: Insert the below script into the HEAD section of your page:

Select All

The code above references the following external files, which you should download ("Right Click", and select "Save As"):

Step 2: Insert the below example script into the BODY section of your page where you wish the countdown to be shown:

Select All

You're done with installation!

Setup Info

To set up a cube countdown, initiate a new instance of new cubecountdown() after the document has loaded, for example:

jQuery(function($){ // on DOM load

	var mycountdown = new cubecountdown({
		containerid: 'futuredate',
		targetdate: 'October 17, 2018 11:26:30',
		size: ['10em', '6em'], // specify cube dimensions in "em" only
		unit: ['days']
	})

}

Where "mycountdown" should be an arbitrary but unique variable for each instance of 3D countdown on your page. The function cubecountdown() accepts the following options,  each separated by comma:

setting Description
countainerid: "string"

Required

The ID of a empty DIV container that will house the countdown.
targetdate: "JavaScript_date_string"

Required

Valid JavaScript date string representing the future date/time you wish to count down to. The string should be in a format recognized by the Date.parse() method. A couple of examples:
  • 'October 17, 2018 11:26:30'
  • 'December 25, 2015'

This string can also be constructed dynamically, which is helpful for counting down to events that are annual in nature, such as New Years. In this case, we can use JavaScript to fill in the correct year and return the proper date string:

  • new Date( new Date().getFullYear() +1, 0, 1 ) //upcoming New Years date string

The above parameters translate to "current year + 1", "January", and "1st". As you can see, in JavaScript, months are represented numerically starting at 0, where 0 = "January", 1 = "February" etc.

The resulting initialization code would look like:

var mycountdown = new cubecountdown({
	containerid: 'futuredate',
	targetdate: new Date( new Date().getFullYear() +1, 1, 1 ),
	size: ['10em', '6em'], // specify cube dimensions in "em" only
	unit: ['days']
})
size: ['width_em', 'height_em']

defaults to ['8em', '6em']

The dimensions of each cube inside the countdown, in "em". The reason for using this relative unit is to facilitate easy scaling of the cubes upwards or downwards if desired afterwards. Inside ddcubeclass.css, all units are expressed in percentage or em values, with the cubes themselves carrying a default font-size of 10px to create the base unit. By adjusting this font size, we can instantly make the cubes scale proportionally. More details on this below.
unit: "days" or "hours" or "minutes" or "seconds"

defaults to "days"

Sets the top most unit of the countdown.
fxduration: seconds

defaults to 0.5

Sets the duration of the cube rotating effect, in seconds. Largest number supported is 0.8 (or 0.8 seconds), just below the 1 second interval in which the countdown updates.

Inside the BODY section of your page, you should create an empty DIV with an ID that corresponds to the "containerid" setting of the initialization code to display the countdown in:

<div id="futuredate"></div>

The onEnd() and onCount() events

The onEnd and onCount events are your gateway to running your own code when a countdown has finished, and while it is counting down, respectively. Most commonly, you'll just be making use of the former. To do so, upon initializing a countdown, simply attach the desired event handler to the instance variable and define the function you want to run:

var mycountdown = new cubecountdown({
	containerid: 'futuredate',
	targetdate: 'October 17, 2018 12:00:00',
	size: ['10em', '6em'], // specify cube dimensions in "em" only
	unit: ['days']
})

mycountdown.onEnd = function(){
	location.replace('http://mysite.com/sales.htm') // redirect to sales page when target date is met
}

There is also the onCount() event handler at your disposal, which is called every second the countdown winds down towards its target date. It's useful, for instance, when you wish to do something when the value inside a specific field is the desired value (ie: the "hour" field is currently 20), or when there is 3 hours or less left before the target date is reached. The later scenario comes in handy more often, for example, for performing specific actions as the time to the target date draws nearer, such as to convey a sense of urgency.

The onCount() event is automatically passed 2 parameters- diff and formatdiff. The first parameter contains the total time remaining in seconds, which is useful if you wish to know how much time remains until the target date; with the below example, we display a custom message when there's only 3 hours or less remaining on a sale (the target date):

var mycountdown = new cubecountdown({
	containerid: 'futuredate',
	targetdate: 'October 17, 2018 12:00:00',
	size: ['10em', '6em'], // specify cube dimensions in "em" only
	unit: ['days']
})

mycountdown.onCount = function(diff, formatdiff){
	// console.log(diff): integer (seconds)
	// console.log(diffobj): {days:int, hours:int, minutes:int, seconds: int}
	// Do something if 3 hours or less before target date
	if (diff < 60 * 60 * 3){ // if diff is less than 3 hours (expressed in seconds)
		$('#warning').html('Only 3 hours or less before sale ends! Hurry!')
	}
}

The formatdiff parameter works differently, and tells you the exact value of each cube field at this moment as they appear on your screen. It returns an object literal in the format of {days:int, hours:int, minutes:int, seconds: int}. So formatdiff.hours for example would return the value of the "hours" field at the moment.

Customizing the style of the countdown

The default style of each countdown cube is specified inside ddcubeclass.css. Apart from the dimensions of each cube, which is defined inside the initialization script above, everything else should be via CSS. As best practices, avoid modifying ddcubeclass.css directly, but instead, define your own overriding custom styles following it inside the HEAD section of your page or a blank .css file. For example:

<style>

#futuredate .ddcubecountdown{
	display: block; /* display each cube on its own line */
	margin-bottom: 5px;
}

#futuredate .ddcubecountdown ul li{
	background: darkred; /* change color of cubes */
}

#futuredate .ddcubecountdown ul li div{ /* DIV that contains countdown digits */
	font-size: 2em;
}

</style>

Replace #futuredate with the ID of your countdown container. Each cube  consists of a DIV with the CSS classes "ddcubeclass ddcubecountdown days", where "days" changes based on the unit the cube represents ("days", "hours", "minutes", and "seconds"). This distinction lets you style each cube field separately if you wish. Inside each DIV cube is a UL list with four child LIs, one for each side of the cube.

- Creating a responsive countdown

Cube Countdown is designed to be responsive across all screen and device sizes. By default the individual cubes will wrap around to the next line if the parent container isn't wide enough. However, you can go a step further, and shrink the size of the cubes proportionally, or even make the countdown vertical in layout, on demand.

To retain the existing proportions of a countdown but scale its overall size (dimensions, font size etc) downwards or upwards, modify the cube's main container DIV's font-size property:

#futuredate .ddcubecountdown{
	font-size: 8px /* Shrink cube sizes. Default font size is 10px */
}

The above shrinks the size of the cubes.

To force the countdown cubes to drop down one following the next, so its layout becomes vertical, simply give the main container DIV a display:block setting:

#futuredate .ddcubecountdown{
	display: block; /* display each cube on its own line */
	margin-bottom: 5px; /* add some spacing between each cube */
}

Putting everything together now, the following CSS changes the countdown interface to "vertical" plus enlarges the cubes on small screen devices:

<style>

@media screen and (max-device-width: 480px) {
	.ddcubecountdown{ /* target all countdowns on the page */
		display: block !important; /* display each cube on its own line */
		font-size: 15px !important; /* scale cubes up */
		margin-bottom: 10px !important;
	}
}
</style>
Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post