Thursday, April 17th, 2008
Spoiler Blocker When JS Isn’t Available
Category: jQuery
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.
-
-
$(document).ready(function() {
-
-
$(".spoiler")
-
//hide the spoiler
-
.children("span.hidden").hide()
-
//hide the whitespace inside it
-
.children("br").hide()
-
//step back up a level
-
.end()
-
//find the sibling
-
.prev("span.message")
-
//add the click handler to show the spoiler
-
.click(function() {
-
//use a callback So FX execute non-simultaneously;
-
$(this).fadeOut(600, function() {
-
$(this).next().fadeIn(600);
-
})
-
})
-
;
-
-
});
-
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.
Related Content:
That’s a long way to scroll in a RSS post. Good way to hide spoilers though.
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
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>
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.
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…