SPOILER ALERT! A happy little bit of javascript to hide spoilers on your site.

Overview

SPOILER ALERT!

Don't spoil it! Hide copy and images with a bit of SVG blur. Taste on mouseover. Eat on click.

Do you publish spoilers? Do you wish you could have them on your page in a way that wasn't fucking rude? With Spoiler Alert! you can! Hide spoilers with a bit of blur.

Usage

To make your site spoiler free, simply include spoiler.js, then, add this somewhere:

spoilerAlert('spoiler, .spoiler');

To control the maximum and partial blurs, you can pass arguments:

spoilerAlert('spoiler, .spoiler', {max: 10, partial: 4});

Have fun! Play with it!

Demo

Take a look at this to see it in action!

Tested browsers

  • Chrome
  • Safari
  • Firefox
  • Mobile Safari
Comments
  • Added in support for IE 4 - 9 blurs using CSS MS Filters.

    Added in support for IE 4 - 9 blurs using CSS MS Filters.

    Added in functionality for native blurs in IE versions 4 to 9. IE 10 will now use the native blur filter like other CSS3 capable browsers. The previous code shunned all IE users including users of IE10 who can support the blur filter.

    opened by Vheissu 4
  • Fixing up formatting and added in ability to chain jQuery functions.

    Fixing up formatting and added in ability to chain jQuery functions.

    I noticed a $(this).each was being used, so I added in a return this.each instead so chainability with other functions is kept intact. I also cleaned some some of the variables and added in missing semicolons and fixed if statements that were short-handed. Some personal preferences with formatting and whatnot might come into play here.

    I indented everything 4 spaces which cleans things up too.

    opened by Vheissu 4
  • Blur effect on text is too heavy

    Blur effect on text is too heavy

    I just checked the demo and it seems to me like the blur in the text is so heavy, the text is barely visible. It requires quite a bit of focus to tell if there is supposed to be a blurred text in there, or not. Imho, I think the "un-hovered" blur value should be at about 6px and go down to 2-3px when in hover state.

    opened by varemenos 2
  • Added some basic IE9/10 support

    Added some basic IE9/10 support

    I've merged in gh-pages, here, so that it's possible to alter the sample consumer of the API even as we are working on the API itself. Otherwise there's no relationship between the example gh-pages and the API whose development is still underway.

    opened by codemercenary 2
  • change mouse pointer on hover to suggest clicking

    change mouse pointer on hover to suggest clicking

    When I first hovered over the sample spoilered image and saw it get less blurry, I wondered “why is the unspoilered image blurry?” Then I tried clicked on the image, and that got me the actual image. It didn’t occur to me to click on the image at first, because the mouse pointer was a normal arrow. A pointing hand cursor would have fixed that. Text also has this problem – it currently has an I-beam, leading one to expect that you can select the text, but that clicking won’t do anything special.

    This CSS changes the cursor appropriately on hover, given the call $('spoiler, .spoiler').spoilerAlert():

    spoiler, .spoiler {
        cursor: pointer;
    }
    

    Apply that CSS property to the selected elements is probably the easiest way to implement this. That would mean calling jQuery’s css function like $element.css('cursor', 'pointer').

    I’m not quite sure where in your JavaScript code it would go. My best guess is right after this line – you would write $spoiler.css('cursor', 'pointer').

    opened by roryokane 1
  • Re-enabling spoiler alert initializes on the wrong blur.

    Re-enabling spoiler alert initializes on the wrong blur.

    When hovering over a Spoiler Alert, the max blur changes to the partial blur. When clicking the blur is removed. When clicking again, the blur is restored. It is then set to the max blur, which is a bit unlogical, because when I clicked, I was hovering over the blurred item, so I would expect it to be set to the partial blur.

    opened by rolfvandekrol 1
  • remove blur completely

    remove blur completely

    a blur of 0px still looks a little odd in chrome -- slightly boldface and blurry. if i remove the "filter" style from the element, it looks normal again.

    a guess: chrome is rendering pixels when it does the blur, even at 0px, only without a filter, does it render in normal retina text.

    fix would be to remove the "filter" css-es when the transition is complete.

    opened by robey 1
  • Minor performance improvements

    Minor performance improvements

    I made some minor performance improvements by caching userAgent, making use of $spoiler instead of $(this), and chaining jQuery methods. (This last one has more to do with personal coding style - no real performance improvements there.)

    opened by rolyatmax 0
  • Rename data variable `state` to avoid collisions

    Rename data variable `state` to avoid collisions

    Rename $spoiler.data('state') to $spoiler.data('spoiler-state') on the off chance that another jQuery plugin is using the variable state. For instance, maybe a plugin would allow spoilers to be dragged around the page, and store whether the spoiler has been moved yet in state. It’s unlikely, but there’s little harm in being careful.

    I chose the name spoiler-state, but shrouded-state or hidden-state might also work.

    opened by roryokane 0
  • Add time option to hide the voucher after some time

    Add time option to hide the voucher after some time

    Add time option that when you click on the text/image, the text/image will be only visible for a provided time in seconds and it will be blurred after the time expires. Its good for sensitive information. The time should be in seconds or miliseconds

    opened by ririko5834 0
  • Add fallback css

    Add fallback css

    #21 - Add fallback for browsers that don't support CSS Filters.

    Used text-shadow (caniuse) and window.getComputedStyle() (caniuse), so browser support should be pretty good.

    opened by jspolice 0
  • Possible to remove hover and click events?

    Possible to remove hover and click events?

    After seeing the browser support, I thought maybe I could use this to get blur effects on images, which this plugin does quite well. I'm just wondering if its possible to remove hover and click events altogether for some initialization?

    opened by MaazAli 0
  • reveal original text on hover instead of click

    reveal original text on hover instead of click

    Hi, Great plugin! I'm wondering if it's possible to reveal the original text/image on hover instead of clicking to see the original text. This can be great. Is this possible ?

    opened by agispas 1
Owner
Joshua Hull
Joshua Hull
API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

API routes are great for APIs, but for small projects where you have to access server data or hide application logic, you can just call a server function from the client.

null 3 Mar 6, 2022
Gmail-like client-side drafts and bit more. Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters.

Sisyphus Plugin developed to save html forms data to LocalStorage to restore them after browser crashes, tabs closings and other disasters. Descriptio

Alexander Kaupanin 2k Dec 8, 2022
Mini-site de streaming réalisé dans le cadre d'une présentation orale sur le sujet du protocole RTP pour la matière Services Réseaux.

Mini-site de streaming réalisé dans le cadre d'une présentation orale sur le sujet du protocole RTP pour la matière Services Réseaux.

Quentin 1 Jan 21, 2022
Free, open-source crypto trading bot, automated bitcoin / cryptocurrency trading software, algorithmic trading bots. Visually design your crypto trading bot, leveraging an integrated charting system, data-mining, backtesting, paper trading, and multi-server crypto bot deployments.

Free, open-source crypto trading bot, automated bitcoin / cryptocurrency trading software, algorithmic trading bots. Visually design your crypto trading bot, leveraging an integrated charting system, data-mining, backtesting, paper trading, and multi-server crypto bot deployments.

Superalgos 3.1k Jan 1, 2023
osmoscraft 833 Dec 31, 2022
Web app for adding EU Digital COVID Certificates to your wallet apps

Web app for adding EU Digital COVID Certificates to your wallet apps

CovidPass 1.2k Dec 31, 2022
BetterDiscord plugin to see what your friends are playing across platforms, all on Discord

CrossPlatformPlaying A plugin that brings Rich Presence to games that don't support it, and lets you see what your friends are playing even if they tu

Giorgio 38 Dec 12, 2022
A Sequelize web builder interface. To make your own sequelize schema

A Sequelize web builder interface. To make your own sequelize schema

Ulysse 5 Mar 9, 2022
A personal home page for quick access to all your personal apps/sites

Fenrus Fenrus personal home page/dasbhoard. It allows you to have a custom home page/new tab page with quick access to your personal apps. For support

John Andrews 196 Dec 31, 2022
Add weak event listeners from your components/classes based on WeakRefs

Add weak event listeners from your components/classes based on WeakRefs. This package handles the boilerplate for you, which isn't too much anyways but not particularly good looking.

Ashish Shubham 3 Feb 25, 2022
A cool Discord bot to manage tickets on your server 🎫

Discord Tickets Bot A cool Discord bot to manage tickets on your server ?? Project under construction... follow the progress on the Discord server. If

null 11 Oct 10, 2022
JavaScript Survey and Form Library

SurveyJS is a JavaScript Survey and Form Library. SurveyJS is a modern way to add surveys and forms to your website. It has versions for Angular, jQue

SurveyJS 3.5k Jan 1, 2023
⚡️ A resource to help figure out what JavaScript array method would be best to use at any given time

JavaScript Array Explorer When I was first learning array methods, I spent a lot of time digging through the docs to find the appropriate one, and I h

Sarah Drasner 2.6k Jan 2, 2023
🌳 Tiny & elegant JavaScript HTTP client based on the browser Fetch API

Huge thanks to for sponsoring me! Ky is a tiny and elegant HTTP client based on the browser Fetch API Ky targets modern browsers and Deno. For older b

Sindre Sorhus 8.5k Jan 2, 2023
Extensive math expression evaluator library for JavaScript and Node.js

?? Homepage Fcaljs is an extensive math expression evaluator library for JavaScript and Node.js. Using fcal, you can perform basic arithmetic, percent

Santhosh Kumar 93 Dec 19, 2022
Vanilla JavaScript emoji picker component

Vanilla JavaScript emoji picker ?? Screenshot Demo and Documentation https://emoji-button.js.org Features ?? Vanilla JS, use with any framework ?? Use

Joe Attardi 1.1k Dec 31, 2022
📝 Algorithms and data structures implemented in JavaScript with explanations and links to further readings

JavaScript Algorithms and Data Structures This repository contains JavaScript based examples of many popular algorithms and data structures. Each algo

Oleksii Trekhleb 158k Dec 31, 2022
This is my To-do-list project for my Javascript module at Microverse.

To do List This is a To do list project built for learning purposes. Built With HTML Bootstrap Javascript CSS HTML Webpack How to use it Clone the rep

Jonathas Tavares 4 Oct 8, 2021
A JavaScript, zero-dependency, super small version of IP2Location LITE country lookups.

A JavaScript, zero-dependency, super small version of IP2Location LITE country lookups.

Statsig 34 Dec 14, 2022