Do you run a forum or something related, where the users are able to publish opinions, tutorials etc about Games, Movies, Books etc? You may not, you are obligated to allow the publishers to hide content that contains sensitive information (spoilers) about some theme. Otherwise people that visit your website will probably never come back if they discover that the true identity of Batman is Bruce Wayne, maybe not with something banal but important themes.
There are many solutions around the web for such a problem, however most of them are too agressive and pretty awful. By using simple CSS, once you move the mouse over an item that contains a spoiler, you may already know what's all about it, without ever want it. That's why in this article we'll show you how to hide spoilers using blur with the help of a JavaScript plugin that handles perfectly this feature.
1. Download and include Spoiler Alert
To achieve your goal, we'll recommend you to use the Spoiler Alert plugin. This plugin allows you to hide text and images with a bit of SVG blur. With a mouseover, your user will get a hint about the spoiler and will know what it's all about with a click. So with the help of JavaScript and some blur, your website content will protect the knowledge of your visitor.
Download a copy of the Spoiler Alert script from the official repository, either the minified or full version here. Alternatively you can use the free CDN. Then proceed to include it in your document using a simple script tag:
<!-- From the CDN -->
<script src="https://cdn.rawgit.com/joshbuddy/spoiler-alert/master/spoiler.min.js"></script>
<!-- Or from a minified local copy -->
<script src="spoiler.min.js"></script>Till the date, the plugin isn't made to work with a module bundler as browserify or webpack (using require) as it creates a global variable in the window namely spoilerAlert. For more information about this plugin, please visit the official repository at Github here.
2. Using the plugin
As previously mentioned, the plugin is globally exposed in the spoilerAlert variable. This variable is a function that expects up to 2 arguments. The first argument is a query selector string that selects all the desired elements where the blur will be applied. This query will be used internally with a document.querySelectorAll(your selector) function. The following example shows how to blur spoiler tags and elements with the class spoiler:
<p>The secret identity of Bruce Wayne is <spoiler>Batman</spoiler></p>
Listen to me carefully, <span class="spoiler">Mark David Chapman</span> killed John Lennon because <span class="spoiler"> he had a lot of psychological issues, one of them being that he literally heard voices in his head.</span>
<script>
spoilerAlert("spoiler, .spoiler");
</script> That means that you can blur any element in your document (event the entire html document). The second argument is optional an needs to be object with 2 properties namely max and partial. These values are the blur value desired for the element on every phase (partial when mouseover and max when no mouse near), by default, if this argument is not providen, spoilerAlert will use 4 for the max option and 2 for the partial:
<p>The secret identity of Bruce Wayne is <spoiler>Batman</spoiler></p>
Listen to me carefully, <span class="spoiler">Mark David Chapman</span> killed John Lennon because <span class="spoiler"> he had a lot of psychological issues, one of them being that he literally heard voices in his head.</span>
<script>
spoilerAlert("spoiler, .spoiler", {
max: 10,
partial: 5
});
</script> After executing the function, your elements will have the blur effect that prevent spoilers from being read.
Happy spoiler prevention !
