Documentation V 2.1.2

Get your own easily customizable countdown script without any further JS knowledge! Count Everest is quickly integrated into your own markup. It’s extendable with callback functions, provides many options (e.g.: left-hand zeros), and comes with an easy-to-follow documentation. Localize it within seconds. Use your own font. And enjoy it even in Internet Explorer. We can’t wait to see what you create with it.

Rate this plugin

First of all: Don't forget to rate Count Everest on CodeCanyon.

It's good to know what others think about our work. You can rate it in the download area after login into your account on CodeCanyon.

Quick installation

Step 1: Choose and edit one of the theme.html files

Choose the theme-*.html that suits you best and open it to set your target date for the countdown at the end of the file.

Step 2: Upload files

Upload all files and folders via FTP to your webserver.

Step 3: Test it in your browser

Open the theme-*.html that you have chosen in your favourite browser. Done!


Advanced installation (for developers)

Step 1: Link required files

The Count Everest Plugin is based on jQuery, so it's important that you load it right after the jQuery library.

<!-- Load jQuery library -->
<script src="js/vendor/jquery-1.11.2.min.js">

<!-- Load Count Everest jQuery Plugin after jQuery library -->
<script src="js/vendor/jquery.counteverest.min.js">

Step 2: Create HTML markup

By default you can use the following HTML markup. The surrounding <div class="countdown"> is needed for calling the plugin. Every <span> element representing a time unit and the corresponding label. If you don't want one of them, remove it! Of course you can use your own markup. Just define the sizzle selectors by using the options.

<div class="countdown">
	<span class="ce-days"></span> <span class="ce-days-label"></span>
	<span class="ce-hours"></span> <span class="ce-hours-label"></span>
	<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
	<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>

Step 3: Call the countEverest

Now call the countEverest method on <div class="countdown">. Note that the call must be inside the $(document).ready().

$(document).ready(function() {
	$('.countdown').countEverest({
		day: 1,
		month: 1,
		year: 2015
	});
});

Step 4: Customization

See the following sections with several examples, options, API methods and callback functions to customize your countdown.

Examples

Basic example

<div class="countdown">
	<span class="ce-days"></span> <span class="ce-days-label"></span>
	<span class="ce-hours"></span> <span class="ce-hours-label"></span>
	<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
	<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>
$(document).ready(function() {
	$('.countdown').countEverest({
		day: 1,
		month: 1,
		year: 2020
	});
});

Basic example with time zone definition (UTC+1h)

With the definition of a time zone you can sync the target date in every browser around the world to one special moment. The countdown in this example is set to New Year 2020 in Berlin, Germany. See the options for more details.

<div class="countdown">
    <span class="ce-days"></span> <span class="ce-days-label"></span>
    <span class="ce-hours"></span> <span class="ce-hours-label"></span>
    <span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
    <span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>
$(document).ready(function() {
    $('.countdown').countEverest({
        day: 1,
        month: 1,
        year: 2020,
        timeZone: 1
    });
});

Example with days only

<div class="countdown">
	<span class="ce-days"></span> <span class="ce-days-label"></span>
</div>
$(document).ready(function() {
	$('.countdown').countEverest({
		day: 1,
		month: 1,
		year: 2020
	});
});

Example with deciseconds

<div class="countdown">
	<span class="ce-days"></span> <span class="ce-days-label"></span>
	<span class="ce-hours"></span> <span class="ce-hours-label"></span>
	<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
	<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
	<span class="ce-dseconds"></span> <span class="ce-dseconds-label"></span>
</div>
$(document).ready(function() {
	$('.countdown').countEverest({
		day: 1,
		month: 1,
		year: 2020
	});
});

Example with deciseconds and singular unit label (e.g.: look at the "s" of deciseconds)

<div class="countdown">
	<span class="ce-days"></span> <span class="ce-days-label"></span>
	<span class="ce-hours"></span> <span class="ce-hours-label"></span>
	<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
	<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
	<span class="ce-dseconds"></span> <span class="ce-dseconds-label"></span>
</div>
$(document).ready(function() {
	$('.countdown').countEverest({
		day: 1,
		month: 1,
		year: 2020,
        singularLabels: true
	});
});

Example with milliseconds

<div class="countdown">
	<span class="ce-days"></span> <span class="ce-days-label"></span>
	<span class="ce-hours"></span> <span class="ce-hours-label"></span>
	<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
	<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
	<span class="ce-mseconds"></span> <span class="ce-mseconds-label"></span>
</div>
$(document).ready(function() {
	$('.countdown').countEverest({
		day: 1,
		month: 1,
		year: 2020
	});
});

Example with translated units

<div class="countdown">
	<span class="ce-days"></span> <span class="ce-days-label"></span>
	<span class="ce-hours"></span> <span class="ce-hours-label"></span>
	<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
	<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>
$(document).ready(function() {
	$('.countdown').countEverest({
		day: 1,
		month: 1,
		year: 2020,
		daysLabel: 'Tage',
		hoursLabel: 'Stunden',
		minutesLabel: 'Minuten',
		secondsLabel: 'Sekunden',
		decisecondsLabel: 'Zehntelsekunden',
		millisecondsLabel: 'Millisekunden'
	});
});

Define server time with PHP

For defining the server time via PHP the server-side script language has to be installed on your webserver. The initializing JavaScript code must be placed in a PHP file (e.g. .php, .phtml, etc.) and is not working in JavaScript files by default. See options for more details.

<div class="countdown">
	<span class="ce-days"></span> <span class="ce-days-label"></span>
	<span class="ce-hours"></span> <span class="ce-hours-label"></span>
	<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
	<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>
$(document).ready(function() {
	$('.countdown').countEverest({
		day: 1,
		month: 1,
		year: 2020,
        currentDateTime: '<?php echo date('c'); ?>'
	});
});

Target date is the current date plus 30 seconds

This is not a special feature of this plugin. This example uses normal JavaScript for this purpose.

<div class="countdown">
	<span class="ce-hours"></span> <span class="ce-hours-label"></span>
	<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
	<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>
$(document).ready(function() {
	var currentDate = new Date();
	currentDate.setSeconds(currentDate.getSeconds() + 30);

	$('.countdown').countEverest({
		day: currentDate.getDate(),
		month: currentDate.getMonth() + 1,  //this is necessary because of the JavaScript standard. 0 = January and 11 = December.
		year: currentDate.getFullYear(),
		hour: currentDate.getHours(),
		minute: currentDate.getMinutes(),
		second: currentDate.getSeconds()
	});
});

Count to 8 pm every day

This is not a special feature of this plugin. This example uses normal JavaScript for this purpose.

<div class="countdown">
    <span class="ce-hours"></span> <span class="ce-hours-label"></span>
    <span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
    <span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>
$(document).ready(function() {
    var currentDate = new Date();

    //after 8 pm, set next day
    if (currentDate.getHours() >= 20) {
        currentDate.setDate(currentDate.getDate() + 1);
    }

    $('.countdown').countEverest({
        day: currentDate.getDate(),
		month: currentDate.getMonth() + 1,  //this is necessary because of the JavaScript standard. 0 = January and 11 = December.
		year: currentDate.getFullYear(),
		hour: 20,
		minute: 0,
		second: 0,
        timeZone: currentDate.getTimezoneOffset() / -60  //this is the current time zone offset, e.g. +1
    });
});

Using the callback function onComplete

Running...
<div class="countdown">
	<span class="ce-hours"></span> <span class="ce-hours-label"></span>
	<span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
	<span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>
<div id="message">Running...</div>
$(document).ready(function() {
	var currentDate = new Date();
	
	$('.countdown').countEverest({
		day: currentDate.getDate(),
		month: currentDate.getMonth() + 1,  //this is necessary because of the JavaScript standard. 0 = January and 11 = December.
		year: currentDate.getFullYear(),
		hour: currentDate.getHours(),
		minute: currentDate.getMinutes(),
		second: currentDate.getSeconds() + 30,
		onComplete: function() {
			$('#message').text('Complete').addClass('complete');

			//you can use a redirect too
			//window.location.replace('http://anacoda.de');
		}
	});
});

Destroy and reinitialize countdown every 10 seconds with API methods

<div class="countdown">
    <span class="ce-hours"></span> <span class="ce-hours-label"></span>
    <span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
    <span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>
$(document).ready(function() {
    function initCountdown() {
        var currentDate = new Date();
        var $countdown = $('.countdown');
        $countdown.countEverest({
            day: currentDate.getDate(),
            month: currentDate.getMonth() + 1,  //this is necessary because of the JavaScript standard. 0 = January and 11 = December.
            year: currentDate.getFullYear(),
            hour: currentDate.getHours(),
            minute: currentDate.getMinutes(),
            second: currentDate.getSeconds() + 10,
            onComplete: function() {
                $countdown.countEverest('destroy');
                initCountdown();
            }
        });
    }
    initCountdown();
});

Get a reference of the plugin after initialization

With the reference you can see inside the plugin for using the raw properties, e.g. the target date as JavaScript date string. Put the reference in console.log() to see more information in the developer tool of your browser.

<div class="countdown">
    <span class="ce-days"></span> <span class="ce-days-label"></span>
    <span class="ce-hours"></span> <span class="ce-hours-label"></span>
    <span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
    <span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
    <span id="message"></span>
</div>
$(document).ready(function() {
    $('.countdown').countEverest({
        day: 1,
        month: 1,
        year: 2020
    });

    var plugin = $('.countdown').data('countEverest');
    $('#message').text(plugin.targetDate);
});

Count up with specific start date

This example shows the time which is passed since Count Everest launched on Envato.

<div class="countdown">
    <span class="ce-days"></span> <span class="ce-days-label"></span>
    <span class="ce-hours"></span> <span class="ce-hours-label"></span>
    <span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
    <span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>
$(document).ready(function() {
    $('.countdown').countEverest({
        day: 17,
        month: 1,
        year: 2014,
        countUp: true
    });
});

Count up time since page load

This example uses the native JavaScript date object to set the start date to the current time and count up.

<div class="countdown">
    <span class="ce-hours"></span> <span class="ce-hours-label"></span>
    <span class="ce-minutes"></span> <span class="ce-minutes-label"></span>
    <span class="ce-seconds"></span> <span class="ce-seconds-label"></span>
</div>
$(document).ready(function() {
    var currentDate = new Date();
    $('.countdown').countEverest({
        day: currentDate.getDate(),
        month: currentDate.getMonth() + 1,  //this is necessary because of the JavaScript standard. 0 = January and 11 = December.
        year: currentDate.getFullYear(),
        hour: currentDate.getHours(),
        minute: currentDate.getMinutes(),
        second: currentDate.getSeconds(),
        countUp: true
    });
});

Options

Option Type Default Value Description
day Integer 1 Use this to specify the day in a month of the target date. The value have to be an integer between 1 and 31.
month Integer 1 Use this to specify the month of the target date. The value have to be an integer between 1 and 12.
year Integer 2050 Use this to specify the year of the target date in four digits, e.g. 2021.
hour Integer 0 Use this to specify the hour of the target date. The value have to be an integer between 0 and 23.
minute Integer 0 Use this to specify the minute of the target date. The value have to be an integer between 0 and 59.
second Integer 0 Use this to specify the second of the target date. The value have to be an integer between 0 and 59.
millisecond Integer 0 Use this to specify the millisecond of the target date. The value have to be an integer between 0 and 999.
countUp Boolean false Enable this option to count up. You have to define your start date by using day, month, year, hour, minute, second and millisecond. See "counting up" examples for more information.

Please note: The callback "onComplete" will never call.
timeZone Number null Define the offset from coordinated universal time (UTC) for the location of your target date to sync the countdown in the browsers of the users around the world. The default value "null" disables the timezone calculation. If you want to use the feature, set a value from -12 to 14. Decimal values, e.g. 3.5 are also allowed. Please refer to http://www.timeanddate.com/worldclock/ to find out your correct time zone. Keep in mind, that the offset from UTC of many location changes, when daylight saving time starts or ends.

Example 1: I want to set my countdown to a club opening for 20 March 2014, 8pm. The club is based in Berlin. The offset from UTC in Berlin is normally 1. I have to set "timeZone: 1".

Example 2: Same case, but other opening date. We now want to set the target date for the club opening to 10 May 2014. The daylight saving time in Berlin starts on 29 March this year. For this case I have to set "timeZone: 2".
currentDateTime String null Set this option to define the current date and time (e.g. the server time via PHP), which is used for the calculation of the remaining time to target date. Otherwise the plugin uses the current time of the browser or operating system. Date strings which complies to the ISO 8601 standard are allowed, e.g. "2014-02-27T13:37:00+01:00".
See http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15 for more details.

To set the current server time via PHP use the following code. Be sure that your file has a PHP file extension (e.g. .php, .phtml, etc.) "currentDateTime: '<?php echo date('c'); ?>'"
daysWrapper String ".ce-days" This is the sizzle selector for the days value inside your countdown wrapper.
hoursWrapper String ".ce-hours" This is the sizzle selector for the hours value inside your countdown wrapper.
minutesWrapper String ".ce-minutes" This is the sizzle selector for the minutes value inside your countdown wrapper.
secondsWrapper String ".ce-seconds" This is the sizzle selector for the seconds value inside your countdown wrapper.
decisecondsWrapper String ".ce-dseconds" This is the sizzle selector for the deciseconds value inside your countdown wrapper. If this element is found, the highspeedTimeout is used for the countdown calculation. See the explanation below for more details.
millisecondsWrapper String ".ce-mseconds" This is the sizzle selector for the milliseconds value inside your countdown wrapper. If this element is found, the highspeedTimeout is used for the countdown calculation. See the explanation below for more details.
daysLabelWrapper String ".ce-days-label" This is the sizzle selector for the unit "days" inside your countdown wrapper.
hoursLabelWrapper String ".ce-hours-label" This is the sizzle selector for the unit "hours" inside your countdown wrapper.
minutesLabelWrapper String ".ce-minutes-label" This is the sizzle selector for the unit "minutes" inside your countdown wrapper.
secondsLabelWrapper String ".ce-seconds-label" This is the sizzle selector for the unit "seconds" inside your countdown wrapper.
decisecondsLabelWrapper String ".ce-dseconds-label" This is the sizzle selector for the unit "deciseconds" inside your countdown wrapper.
millisecondsLabelWrapper String ".ce-mseconds-label" This is the sizzle selector for the unit "milliseconds" inside your countdown wrapper.
singularLabels Boolean false Use singular unit labels which can defined with the options dayLabel, hourLabel, minuteLabel, secondLabel, decisecondLabel, millisecondLabel.
daysLabel String "Days" This is the unit label inside daysLabelWrapper. If singularLabels is enabled and the remaining days are greater than 1 (one), this label is used.
dayLabel String "Day" Same as above, but this label is used if singularLabels is enabled and the value of the remaining days is 1 (one). Set it to null, if you want to use the daysLabel always or use singularLabels instead.
hoursLabel String "Hours" This is the unit label inside hoursLabelWrapper. If singularLabels is enabled and the remaining hours are greater than 1 (one), this label is used.
hourLabel String "Hour" Same as above, but this label is used if singularLabels is enabled and the value of the remaining hours is 1 (one). Set it to null, if you want to use the hoursLabel always or use singularLabels instead.
minutesLabel String "Minutes" This is the unit label inside minutesLabelWrapper. If singularLabels is enabled and the remaining minutes are greater than 1 (one), this label is used.
minuteLabel String "Minute" Same as above, but this label is used if singularLabels is enabled and the value of the remaining minutes is 1 (one). Set it to null, if you want to use the minutesLabel always or use singularLabels instead.
secondsLabel String "Seconds" This is the unit label inside secondsLabelWrapper. If singularLabels is enabled and the remaining seconds are greater than 1 (one), this label is used.
secondLabel String "Second" Same as above, but this label is used if singularLabels is enabled and the value of the remaining seconds is 1 (one). Set it to null, if you want to use the secondsLabel always or use singularLabels instead.
decisecondsLabel String "Deciseconds" This is the unit label inside decisecondsLabelWrapper. If singularLabels is enabled and the remaining deciseconds are greater than 1 (one), this label is used.
decisecondLabel String "Decisecond" Same as above, but this label is used if singularLabels is enabled and the value of the remaining deciseconds is 1 (one). Set it to null, if you want to use the decisecondsLabel always or use singularLabels instead.
millisecondsLabel String "Milliseconds" This is the unit label inside millisecondsLabelWrapper. If singularLabels is enabled and the remaining milliseconds are greater than 1 (one), this label is used.
millisecondLabel String "Millisecond" Same as above, but this label is used if singularLabels is enabled and the value of the remaining milliseconds is 1 (one). Set it to null, if you want to use the millisecondsLabel always or use singularLabels instead.
timeout Integer 1000 After this time in milliseconds the calculation of the countdown is triggered periodically. The default value fits if you want to show seconds as your smallest time unit, otherwise read the explanation about the highspeedTimeout param bellow.
highspeedTimeout Integer 4 Same as timeout, but this is only in use if the decisecondsWrapper or millisecondsWrapper are set to an existing element. This is necessary for the fast recalculation, which is needed for the presentation of deciseconds and milliseconds. The default value is the official W3C standard for HTML5 browsers. The calculation with the highspeedTimeout consumes more resources, so use it only when necessary.
leftHandZeros Boolean true Use this option to force left-hand zeros. Every value will have two digits unless there are more digits necessary to display the remaining time (e.g. days and milliseconds).
wrapDigits Boolean true Wrap each digit with a span tag to customize it individual.
wrapDigitsTag String "span" Type of tag which will be used to wrap each digit.

API methods

After initialization you can control the countdown with one of the command strings in this form: $('#countdown').countEverest('command');.

Command Description
destroy Stops the countdown and removes the plugin instance.
getOption Get current option value by key. See options section, which keys are allowed.
e.g. get the target year with this piece of code:
$('#countdown').countEverest('getOption', 'year'); //returns e.g. 2015
The opposite method is called setOption. See below for more details.
pause Pauses the countdown. Countdown can be resumed with resume command. Keep in mind the time is running further. Only the display of the countdown is paused.
resume Resumes a paused countdown.
setOption Set new option value by key. See options section, which keys are allowed.
e.g. set a new target year with this piece of code:
$('#countdown').countEverest('setOption', 'year', 2020);
The opposite method is called getOption. See above for more details.

Callback functions

In every callback function below you can use this to get a reference of the plugin, which contains the current environment with all attributes, like current time values or settings. Check output of console.log(this); within your callback function in your development tool.

Name Description
onInit This option is for a callback function which is called in the initialization process. This callback is triggered right before the first calculation is done, so this doesn't contain the remaining time.
beforeCalculation This option is for a callback function which is called BEFORE every recalculation of the countdown starts. The timeout or the highspeedTimeout option defines how often the calculation process will run.
afterCalculation This option is for a callback function which is called AFTER every recalculation of the countdown was performed. The timeout or the highspeedTimeout option defines how often the calculation process will run.
onChange This option is for a callback function which is only called after a change in the countdown display is done, like a step from one second to another. This callback will be called after the calculation process.
onComplete This option is for a callback function which is called when the target date is reached. The function will not be called if the "countUp" option is enabled.

Changelog

Version 2.1.2

Version 2.1.1

Version 2.1

Version 2.0

Version 1.6

Version 1.5

Version 1.4.1

Version 1.4

Version 1.3.1

Version 1.3

Version 1.2

Version 1.1

Version 1.0

Support

Do you have questions? Get in touch with us via email: support@anacoda.de

We want to increase quality permanently! If you should encounter difficulties and/or malfunctioning in code, design and/or bugs, dead links a.s.o. we would love to hear from you: support@anacoda.de

Support for our items includes:

Item support does not include: