
Spoiler Alert – JQuery plugin for sensitive content - joshbuddy
http://joshbuddy.github.com/spoiler-alert/
======
underwater
You could achieve the same effect with a couple of lines of CSS. As a bonus
you wouldn't pop up the same alert box six times during page load for Internet
Explorer users.

~~~
Kerrick
Specifically, these lines: <http://jsfiddle.net/Kerrick/ZLGtn/>

Works in browsers that support CSS Filters.

~~~
eksith
By "browsers that support CSS Filters", you mean webkit only?

Looks like the JS version is still required until that changes (hopefully
soon). Shame webkit is becoming the new IE.

------
anonymouz
If JavaScript is disabled it falls back to simply displaying the spoiler.
That's a really bad default.

~~~
DigitalSea
I submitted a pull request that implements support for blurring in IE versions
4 to 9 with 10 obviously supporting blurring via SVG filter effects which was
already implemented. Unless I'm missing a browser here, there should now be no
browser that isn't supported.

~~~
anonymouz
I suppose I am not the only one that browses unknown sites with JavaScript
disabled (NoScript). That's what I was thinking about, more so than old
browsers.

~~~
DigitalSea
Ah, got you. What would be a suitable fix for this? wrapping the text in an
element styled with black text and background then perhaps when you focus on
the blacked out text it shows it and when you blur it hides it again?

Proof of concept:

<span class="teasertext" tabindex="0">this is teaser text</span>

.teasertext { background: #000; color: #000; }

.teasertext:focus { background: inherit; color: inherit; outline: none; }

------
DigitalSea
Not bad, but pretty buggy even in Chrome on Windows. Selecting the text
sometimes doesn't de-blur it, hovering images only results in partial blur (I
later realised you click to get it to work). Great idea, but definitely needs
some more work before it can be considered a definitive solution for blurring
out text and imagery. I forked the project and made some adjustments that were
annoying me and submitted a pull request. The lack of semicolons and shorthand
if statements bothered me, as did the lack of support for chainability as
well. I might contribute a little more to it later on with some newer ideas
and support for older browsers.

------
pizza
Wouldn't the spoiler still show up in Google searches? An alternative would be
to obfuscate (i.e. randomly arrange the letters) the spoiler text and then
make the script de-obfuscate it on-hover. Just a thought.

~~~
mmahemoff
There should be a microformat for spoilers, to make this kind of thing more
accessible.

------
thegrimmest
Does not seem to be working in Chrome for Android, version 18.0.1025469.
Spoilers do not appear blurred.

~~~
hayksaakian
Fixed in chrome beta, but yeah you're right; many android users won't be able
to use this.

------
javajosh
Less blurry is a hint? Legibility is a binary value, and beyond a certain
threshold of blur, the value is false. Period. Plus, that behavior is
confusing - you should have a tool tip on hover, explaining that you need to
click to reveal. You should also explain any cross-browser tricks you needed
to do to get it to work, otherwise people will think this is trivial and
pointless.

~~~
joshbuddy
Hopefully, this is all fixed up now. What do you think? (Take a look at the
demo again, should have all the latest changes)

~~~
javajosh
The title attr is a good start, but I think you might want a real tooltip
library because it takes too long for the 'native' tooltip to show. Top-notch
usability is the key to a library like this getting adopted.

------
beefsack
Fantastic work, looks really sweet too. Would be great to see without the
jQuery dependency if possible.

~~~
joshbuddy
Should be easy enough to remove ... happy to take a pull request to fix it!

------
callmecosmas
Cool work but doesn't mix well with text selection. I'm not into js but I
wonder if it would be easy to distinguish between clicking on one spot and
clicking and dragging for say copy-pasting.

------
awad
Doesn't seem to work on Safari for me, is fine in Chrome though.

~~~
joshbuddy
Oh :( It works for me. I'm using Version 6.0.2 (8536.26.17). What about you?

~~~
nopassrecover
Doesn't work for me in Chrome (it unblurs a little, but not completely).
Version 24.0.1312.57 on Win7. I think there's an update so I'll try that
later.

~~~
plainspace
Maybe we should use a tooltip on the blur to explain things.

~~~
ahsteele
Yeah I think the partial unblur affect is cool, but after a period w/o someone
clicking a tooltip would be useful.

------
nemesisj
Spoiler alert: doesn't work on iOS. Tapping just reveals it.

~~~
dylangs1030
Are you using mobile safari or a third party browser?

~~~
nemesisj
I'm using Chrome.

------
thesis
Works for me in Chrome. Really cool.

~~~
jarrett
Really cool, but using Chrome 25.0.1364.99 on the Mac, the spoilers only de-
blur partially, then stop.

~~~
abhinavg
I think that's the expected behaviour. You're supposed to click to de-blur all
the way.

~~~
mxxx
i didn't realise this and came to report a bug. i don't think it's very self
explanatory from a UX perspective...

~~~
pests
Same here. Was about to make a post until I saw your comment. Even tried
highlighting.

------
Mahn
Initial thoughts before clicking: "Oh, I bet it's an effect inspired on
Quora". Bingo.

------
ProNihilist
Does not work on Opera 12.14 (thank you for trying to be accommodating though
<3)

~~~
rartichoke
Yep, confirming it doesn't work for me either with Opera using the same
version in Windows 7.

------
dmak
Sweet! I initially thought it was a security thing after reading the title.

------
ankit84
Why they did not test for IE 10?

