Spoiler Fix for IE<=9

by Marventus

HTML

<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700|Oxygen:400,700|Montserrat+Subrayada:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,800,700' rel='stylesheet' type='text/css'>
    
<div id="wrap">
    <div id="header">
      <h1><a href="index.html">SPOILER ALERT!</a></h1>
      <p id="subtitle"><strong>Don't spoil it! Hide anything with a bit of blur. Hint on mouseover. Reveal on click.</strong></p>
    </div>

    <div id="informations">
      <ul>
        <li>
          <div class="group row">
            <div class="col-1">
              <h3>Works with images:</h3>
              <p>This just in ... kittens are just so ...</p>
              <p><img class="spoiler" src="http://placekitten.com/440/280" width="350px"></p>
            </div>
            <div class="col-2">
              <h3>Works with copy:</h3>
                <p>Sharon <span class="spoil">shoots Adama. It's really tragic. There's so much blood. Haha.</span> Classic Sharon!</p>
              <p>Turns out Jesus <span class="spoil">dies, but is brought back to life.</span> A twist worthy of M Night Shamamanalayan!</p>
              <p>On the Itchy &amp; Scratchy CD-ROM, is there a way to get out of the dungeon without using the wizard key? <span class="spoil">You have to find the golden challice and invoke it three times.</span> What the hell are you talking about?</p>
              <p>SPOILER ALERT <span class="spoil">Everybody dies eventually. I'm not trying to be a pessimist or something, just, value life. Or don't. </span> But at least try to look surprised when you reach the end.</p>
            </div>
          </div>
        </li>
        <li>
          <div class="group row">
            <div class="col-1">
              <p>To make your site spoiler free, simply include spoiler.js.<br>Then, add this somewhere:</p>
            </div>
            <div class="col-2">
              <pre><code><span style="color:...

CSS

/* ****************************************************

  @file         screen.css
  @description  Spoiler Alert! screen stylesheet

***************************************************** */

@import url("reset.css");

/* @section Basic
******************************************************************************/

html { font-size: 62.5%; }
html, body { height: 100%; }

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 150%;
  line-height: 1.4;
  color: #2f2219;
  background: #DA4D2F;
  position: relative;
  padding: 0 30px;
}

p,ul,ol,dl,table,pre { margin-bottom: 1em; }
ul { margin-left: 20px; }
a { text-decoration: none; cursor: pointer; color: #FEE2BC; font-weight: bold; }
a:focus { outline: 1px dotted; }
a:visited {  }
a:hover, a:focus { color: #2f2219; text-decoration: none; }
a *, button * { cursor: pointer; }
hr { display: none; }
small { font-size: 90%; }
input, select, button, textarea, option { font-family: Arial, "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; font-size: 100%; }
button, label, select, option, input[type=submit] { cursor: pointer; }
.group:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .group {display: inline-block;}
/* Hides from IE-mac \*/ * html .group {height: 1%;} .group {display: block;} /* End hide from IE-mac */
sup { font-size: 80%; line-height: 1; vertical-align: super; }
button::-moz-focus-inner { border: 0; padding: 1px; }
span.amp { font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; font-weight: normal; font-style: italic; font-size: 1.2em; line-height: 0.8; }
h1,h2,h3,h4,h5,h6 { line-height: 1.1; }

h1, h2 {
  font-size: 420%;
  margin: 0 0 0.1em;
  font-family: 'Montserrat Subrayada', sans-serif;
  font-weight: 700;
  text-shadow: 1px 1px 10px rgba(0,0,0,0.25);
}

h2 {
	font-size: 300%;
	text-align: center;
	color: #FEE2BC;
	margin-top: 0.5em;
	margin-bottom: 0.1em;
}

h1 a,
h1 a:hover {
  color: #FEE2BC;
  font-weight:...

JavaScript

(function($) {
    var browser = {};
    browser.mozilla = /mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase());
    browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
    browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
    browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
    var defaults = {
        max: 4,
        partial: 2,
        hintText: 'Click to reveal completely'
    },
        alertShown = false
    ;
    $.fn.spoilerAlert = function(opts) {
        opts = $.extend(defaults, opts || {});
        var maxBlur = opts.max,
            partialBlur = opts.partial,
            hintText = opts.hintText
        ;
        //console.log(opts.max);
        if (!alertShown && browser.msie) {
            alert("WARNING, this site contains spoilers!");
            alertShown = true;
        }
        return this.each(function() {
            var $spoiler = $(this);
            $spoiler.data('spoiler-state', 'shrouded');
            var animationTimer = null,
                currentBlur = maxBlur,
                cancelTimer = function() {
                    if (animationTimer) {
                        clearTimeout(animationTimer);
                        animationTimer = null;
                    }
                };
            var filterValue,
                applyBlur = function(radius) {
                    currentBlur = radius;
                    if (browser.msie) {
                        filterValue = radius > 0 ? "progid:DXImageTransform.Microsoft.Blur(pixelradius="+radius+")" : "";
                        $spoiler.css('filter', filterValue);
                        $spoiler.parents('p').addClass('spoiler');
                    } else if (browser.mozilla) {
                        filterValue = radius > 0 ? "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='" + radius + "'...