FANDOM


Important note: As of September 22nd, 2017 this script has been majorly updated due to violating customization policy. Please update your use of this script accordingly.

SpoilerAlert hides a specified area of a page, covering it with a dialog that asks the visitor if he wants to risk seeing spoilers or not. If not, the area will remain hidden. If the visitor accepts, the foreground fades away and reveals the area. Additionally a cookie is set, to ensure the visitor won't see this dialog for this particular page again.

You can see a simple demo here.

Installation

See also: Help:Including additional CSS and JS, Help:Advanced CSS and JS
  • For site-wide use, an administrator can add the line below to the wiki's MediaWiki:ImportJS page. Note that JavaScript must be enabled on the wiki.
dev:SpoilerAlert/code.js

Usage

To mark the spoiler area on your page, wrap that area in <div id="SpoilerAlert"></div> inside the source editor. An example of this can be found inside the demo's source code.

Important note: If more than 50% of the page's height is inside the <div> tag above, the spoiler warning will not be displayed. This was done to bring customization policy violations to a minimum.

Configuration

You can configure the script to your liking by adding the following to MediaWiki:Common.js on your wiki and then modifying the values:

window.SpoilerAlertJS = {
    question: 'This area contains spoilers. Are you sure you want to read it?',
    yes: 'Yes',
    no: 'No',
    fadeDelay: 1600
};
  • If you want to change the text displayed on the spoiler dialog to be changed, change the question property. For example, like:
    question: 'Stop right there! This area contains some spoilers. Do you want to see them?',
  • If you want to change the text displayed on Yes/No buttons, change the yes or no property. For example, like:
    yes: 'Sure',
    no: 'Nah',
  • If the fade out effect after clicking the Yes button seems to be too long or short to you, you can change 1600 in the above configuration to a number of milliseconds you want the dialog to be fading out. For example:
    fadeDelay: 500

Example

This is an example configuration you can use for SpoilerAlert. It will:

  • Set the question asked on spoiler areas to "Stop right there! This area contains some spoilers. Do you want to see them?"
  • Set the Yes/No button texts to "Sure"/"Nah"
  • Set the fade out delay to 0.5 seconds.
window.SpoilerAlertJS = {
    question: 'Stop right there! This area contains some spoilers. Do you want to see them?',
    yes: 'Sure',
    no: 'Nah',
    fadeDelay: 500
};

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.