Spoiler Alert – JQuery plugin for sensitive content | Hacker News Reader

Spoiler Alert – JQuery plugin for sensitive content

joshbuddy.github.com

99 pointsjoshbuddy42 comments

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.

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

Works in browsers that support CSS Filters.

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.

Having to hold the mouse down while reading it seems a little awkward.

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

Seriously agreed; I would think it at least has CSS fallbacks that black things out.

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.

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.

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; }

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.

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.

This was just an idea.. I couldn't find anyone else trying to solve this issue. But .. give it a go. Seems to me that would only work for text though.

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

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

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

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.

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

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.

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

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

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.

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

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

Doesn't work in Safari 5.1 for Windows (the last version available for Windows). That said, Safari for Windows might not be worth supporting.

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.

It unblurs a little and then you click to make it unblur all the way. I was confused at first too. :)

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

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

Safari 5.1.7 (7534.57.7). Admittedly, I should update it, but the inspector on Safari 6 does not agree with me.

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

Are you using mobile safari or a third party browser?

I'm using Chrome.

Works for me in Chrome. Really cool.

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

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

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

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

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

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

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

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

Why they did not test for IE 10?

Reply on news.ycombinator.com