Thursday, April 17th, 2008

Spoiler Blocker When JS Isn’t Available

Category: jQuery

<p>Ever gone to a site to read up on your favorite show or get the lowdown on a new movie only to have the whole plot spoiled because you weren’t forewarned that the “whole freakin’ script” was injected into the article?!?! Yeah, I’ve been there and it ain’t fun!

Chris Coyier of CSS-Tricks came up with a solution called Fade-in Spoiler Revealer which used jQuery to allow the user to click on a div that blocked view of the spoiler and see the contents. This was a very cool technique and caught the attention of Brian Dillard. Brian wondered how this script could be adapted to work with RSS readers and mobile browsers:

My only reservation about Coyier’s technique was its reliance on JavaScript, and only JavaScript, to hide spoiler-laden content. With RSS and mobile browsing on the rise, lots of people read content in user-agents without JavaScript support. Shouldn’t we try to protect them, too? I commented to this effect on the original article, then realized that I should just write the code myself as proof of concept.

Brian Dillard came up with his own version of a spoiler blocker which, through a little progressive enhancement, accommodates for situations where JS is not enabled (eg: a RSS reader). His code consists of two parts; the jQuery code which hides the spoiler and binds the click event to a fade effect and the HTML which is progressive enhanced.

javascript
< view plain text >
  1. $(document).ready(function() {
  2.    
  3.     $(".spoiler")
  4.         //hide the spoiler
  5.         .children("span.hidden").hide()
  6.         //hide the whitespace inside it
  7.         .children("br").hide()
  8.         //step back up a level
  9.         .end()
  10.         //find the sibling
  11.         .prev("span.message")
  12.         //add the click handler to show the spoiler
  13.         .click(function() {
  14.             //use a callback So FX execute non-simultaneously;
  15.             $(this).fadeOut(600, function() {
  16.                 $(this).next().fadeIn(600);
  17.             })
  18.         })
  19.     ;
  20.    
  21. });
  1. <p class="spoiler">
  2.     In the movie "Citizen Kane," Charles Foster Kane's last
  3.     word, "Rosebud," turns out to be ...
  4.     <span class="message">
  5.         (<a href="#answer">Click here if you'd like to be spoiled.</a>)
  6.     </span>
  7.     <span class="hidden">
  8.         <br /><br /><br /><br /><br /><br /><br />
  9.         <br /><br /><br /><br /><br /><br /><br />
  10.         <br /><br /><br /><br /><br /><br /><br />
  11.         <br /><br /><br /><br /><br /><br /><br />
  12.         <br /><br /><br /><br /><br /><br /><br />
  13.         <br /><br /><br /><br /><br /><br /><br />
  14.         <br /><br /><br /><br /><br /><br /><br />
  15.         <br /><br /><br /><br /><br /><br /><br />
  16.         <br /><br /><br /><br /><br /><br /><br />
  17.         <br /><br /><br /><br /><br /><br /><br />
  18.         <br /><br /><br /><br /><br /><br /><br />
  19.         <br /><br /><br /><br /><br /><br /><br />
  20.         <br /><br /><br /><br /><br /><br /><br />
  21.         <br /><br /><br /><br /><br /><br /><br />
  22.         <br /><br /><br /><br /><br /><br /><br />
  23.         <br /><br /><br /><br /><br /><br /><br />
  24.         <a name="answer"></a>a sled.
  25.     </span>
  26. </p>

You can see the demo here. You’ll need to turn off JavaScript in order to see it.

This is one way of managing the user experience in user-agents without JavaScript support but I’m sure that the Ajaxian crowd has developed other ways of tackling this same problem. We’d like to hear about it so comment away.

Posted by Rey Bango at 10:46 am
5 Comments

+++--
3.1 rating from 22 votes

5 Comments »

Comments feed TrackBack URI

That’s a long way to scroll in a RSS post. Good way to hide spoilers though.

Comment by webxl — April 17, 2008

well the freaking code doesn’t work :|

either way my first example was simply setting a span’s display from “none” to “” or “block” and the second was a simple link to another page.

people can hide stuff if they want, problem is, they don’t care

Comment by jaimz — April 17, 2008

Let’s see if this comes out:


<!DOCTYPE html>
<title>Spoiler</title>
<style type="text/css">
.spoiler-target { visibility: hidden; }
.spoiler-target:target { visibility: visible; }
</style>
<p>It turns out <a href='#spoilt1'>(reveal)..</a></p>
<p id='spoilt1' class="spoiler-target">he's really a woman.</p>

Comment by DanielJames — April 18, 2008

Oh good, it came out readable. Of course, it requires CSS, and a decent level of CSS support at that. It could be combined with all those line breaks, which could then be hidden with display: none. And the javascript could work around deficient browsers. Which covers most of the cases, but leaves a few edge cases (screenreaders, compilers with poor CSS support and javascript turned off).

Less clever but probably better: put the spoiler on another page. And display it using javascript when available.

Comment by DanielJames — April 18, 2008

I would just say, ditch that big ass BR code and use CSS

a[href^="#spoil"]:hover:after { content: ” > ” attr(title); }

See spoiler:

But than again, there must be some reason why didn’t use that…

Comment by V1 — April 18, 2008

Leave a comment

You must be logged in to post a comment.