- Important note: On 22 September 2017, this script was significantly updated. Its previous form violated 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 they want 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 local storage is used, to ensure the visitor won't see this dialog for this particular page again.
You can see a simple demo here.
Installation
Usage
To mark the spoiler area on your page, wrap that area in <div id="SpoilerAlert"> 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
questionproperty. 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
yesornoproperty. 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
1600in 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
};