Fandom

Wikia Developers Wiki

Countdown

869pages on
this wiki
Add New Page
Talk125 Share

The Countdown script creates a countdown clock where specified.

What it does

You add an element with a target date to the page and this script will replace that date with a countdown until the day/hour/minute/second of that date is reached.

Installation

See also: Help:JavaScript and CSS Cheatsheet

Using the new MediaWiki:ImportJS, you can include this immediately to your wikia by adding:

dev:Countdown/code.js

If you want to include this the older way, copy and paste the following into your wiki's MediaWiki:Common.js page:

importArticles({
    type: "script",
    articles: [
        "w:c:dev:MediaWiki:Countdown/code.js"
    ]
});

If your MediaWiki:Common.js page already has an import like the one above, just add "w:c:dev:MediaWiki:Countdown/code.js" to the list, as described here.

Creating a countdown

A countdown can be added to a page using the following format:
<span class="countdown" style="display:none;">Only <span class="countdowndate">January 01 2018 00:00:00</span> until the new year...</span>
The text within "countdown" only appears when the countdown is active. Any text before "countdowndate" will precede the countdown, and any text after "countdowndate" will follow the countdown.

The example above produces:

(Countdown example)


An optional span with class "nocountdown" can be used as alternative text when the countdown script does not work or while it is loading.

  • e.g. Using <span class="nocountdown">It's almost the new year!</span> results in
    "It's almost the new year!" while the script loads.

This span should be placed directly after the countdown code above.

Time zones

Using the example code above, the countdown works relative to the reader's system clock. While this may be useful in cases such as counting down to the new year, it is impractical in others.

Two methods can be used to make the countdown work based on a specific time zone. The easiest is to add the time zone identifier to the end of the code. For example, to make a countdown for Eastern Standard Time (EST):

<span class="countdowndate">January 01 2018 00:00:00 EST</span>

While this method works with most identifiers, it does not work for some daylight savings variants (e.g. British Summer Time - BST).

An alternative and more reliable method is to add the Coordinated Universal Time (UTC) offset to the end of the code. For example, to make a countdown for EST, which has an offset of -5 hours:

<span class="countdowndate">January 01 2018 00:00:00 -0500</span>

Note that changes to and from daylight savings are not done automatically, and must be done by the user - either with the daylight savings identifier, or by using the UTC offset.

Options

Ending the Countdown

How do you want the download to end? There are five options:

  1. counting up from zero — this is the default for legacy reasons
  2. removal of the countdown container
  3. stopping the countdown at zero
  4. replacing the countdown with something else
  5. calling a custom JavaScript function of your choice

Countup

Since this is the default option, you needn't do anything.

Remove

Add a data-end attribute with the value "remove" to the container:

<span data-end="remove" class="countdown" style="display:none;">
Only <span class="countdowndate">January 01 2018 00:00:00</span> until the new year...
</span>

Stop

Add a data-end attribute with the value "stop" to the container:

<span data-end="stop" class="countdown" style="display:none;">
Only <span class="countdowndate">January 01 2018 00:00:00</span> until the new year...
</span>

Replacement

Add a data-end attribute with the value "toggle" to the container. Additionally you will have to add a data-toggle attribute with a selector that points to the replacement:

<span data-end="toggle" data-toggle=".post-countdown" class="countdown" style="display:none;">
Only <span class="countdowndate">January 01 2018 00:00:00</span> until the new year...
</span>
<span class="post-countdown" style="display:none;">Happy 2018!</span>

Note the dot in the value of data-toggle! The expected value is a CSS or jQuery selector. So that's ".name" for classes. "#name" for IDs. Etc.

Custom Callback

Add a data-end attribute with the value "callback" to the container. Additionally you will have to add a data-callback attribute with the name of the function you want to call:

<span data-end="callback" data-callback="myFunction" class="countdown" style="display:none;">
Only <span class="countdowndate">January 01 2018 00:00:00</span> until the new year...
</span>

The countdown will stop at zero and then your function will be called. The countdown container will be the this object of the function.

To make the function available to the Countdown module, you will have to add it to the module itself:

window.countdownTimer = {
    myFunction: function () {
       $(this).text('Happy 2018!');
    }
}

Leading Zeros

By default leading zeros will be shown:

0 days, 0 hours, 10 minutes and 10 seconds

If you prefer this instead:

10 minutes and 10 seconds

you need to add a data-options attribute with the value "no-leading-zeros":

<span data-options="no-leading-zeros" class="countdown" style="display:none;">
Only <span class="countdowndate">January 01 2018 00:00:00</span> until the new year...
</span>

Localisation

Localized messages can be added using the language code as a key and then creating an object for the messages. See example below for how to override the default messages used for the English language.

countdownTimer.translations = { 
    en: {
        and: 'and',
        second: 'second',
        seconds: 'seconds',
        minute: 'minute',
        minutes: 'minutes',
        hour: 'hour',
        hours: 'hours',
        day: 'day',
        days: 'days'
    }
};

Adding translations

The local equivalents of following time intervals are required by the script:

  • second/seconds
  • minute/minutes
  • hour/hours
  • day/days

In addition, the localised version of "and" is required.

If you would like to help out, please post translations for these on the script's talk page (or add them to MediaWiki:Countdown/code.js directly if you are comfortable with doing so).

Major Updates

December 9, 2012
Pecoes: complete rewrite and addition of a few options
June 28, 2012
Eladkse: simplified singular/plural code.
January 31, 2012
Eladkse: added localisation code by Dantman.
July 7, 2011
Eladkse: added code to allow the definition of singular and plural forms of time.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.