Blogger spoiler tags version two: cross-browser

I made my choice about spoilers: blurry text effect for the engines that support it and blocked-out text for those who don't. This way I see pretty things and people using inferior browsers still get a spoiler effect. ;)

Note: This particular version won't show up in feed readers or on Blogger's mobile template. I'll include instructions to get it to work in readers/mobile later!

My code has been modified from the previous, simpler version to be like this:

CSS: (for just plain black spoilers)
/* Spoiler tags*/

.spoiler {
color: black;
background-color:black;
}
.spoiler:hover{
background-color:transparent;
text-shadow: 0px 0px 0px #000000;
}

You do not need the
text-shadow 
line if you will only use block spoilers; you must leave it in if you want blur spoilers. Here's what the blocked-out spoilers look like:


Jquery/javascript: (to add functionality for blurry spoilers for the browsers that support it)
<script>
if($.browser.mozilla || $.browser.webkit){
     $(&quot;head&quot;).append(&quot;<style type='text/css'>.spoiler{background-color:transparent;color:transparent;text-shadow:0px 0px 5px #000000;}</style>&quot;);
};
</script>

Remember: if you haven't already, you need to include the JQuery library for the above blurry spoilers to work:
<script src='http://code.jquery.com/jquery-latest.min.js'/>

For Blogger Blogs
In Dashboard -> Design -> "Edit HTML"
Find the line "]]></b:skin>" and paste the CSS directly before it.
Then, paste the javascript and jquery line directly after the "]]></b:skin>" tag. That aprt of your template code should now look like,

.spoiler {
color: black;
background-color:black;
}
.spoiler:hover{
background-color:transparent;
text-shadow: 0px 0px 0px #000000;
}

]]></b:skin>

<!-- this is the jquery library -->
<script src='http://code.jquery.com/jquery-latest.min.js'/>

<!-- this is for spoiler tags -->
<script>
if($.browser.mozilla || $.browser.webkit){
     $(&quot;head&quot;).append(&quot;<style type='text/css'>.spoiler{background-color:transparent;color:transparent;text-shadow:0px 0px 5px #000000;}</style>&quot;);
};
</script>


As before, the spoiler tags are used like this:
<span class="spoiler"> My secret words </span>

In a blogger blog, you need to be switched to the "Edit HTML" view in the post editor to have the "span" tag work correctly.

It's set up such that by default, all browsers use the black-out approach. I then run the crude little script and if the browser is using the Gecko or Webkit engine, it alters the css of the page so that the class
spoiler 
uses the blur instead. Here's blur spoilers in Firefox:


Screencaps of how the blur text renders in each web browser can be found in my previous post.

Internet Explorer versions under 7 doesn't support
hover 
on non-link elements, so the box stays there even on mouse hover. You can either leave things be (people can still reveal the text by simply highlighting it) or you can add hover functionality for IE versions less than 7 using Jquery.

11 things about

Blogger spoiler tags version two: cross-browser
  1. Once again, thanks for this! I've got actual working spoiler tags now.

    ReplyDelete
  2. Crap dude, that is awesome. I definitely want to use that on my blog... Now I only need to find a use for blocking out text and making someone scroll over it to see it!

    Hmmm...

    ReplyDelete
  3. Haha, I'm sure you can find *something*

    ReplyDelete
  4. Hi, this looks awesome but I can't get it to work? I'm using the tag , which I assume is wrong. Could you tellme where to put your code, and give a small example of the post code?

    ReplyDelete
  5. Chad: Sorry; it appears I had some problems in the post formatting and some important code wasn't displaying! That's completely my fault.

    ReplyDelete
  6. Thanks! This was really helpful.

    ReplyDelete
  7. Nice, finally! Really REALLY helpful for not ruining books!

    ReplyDelete
  8. Lol sorry for 3 different comments, but I just almost did a spit-take with your heading! I didn't notice the companion cube before! Glad to see another blogger that loves portal! :D

    ReplyDelete
    Replies
    1. Haha, no problem! If you look really closely, you'll see a Pyro too. :3

      Delete

Copyright 2012 Phile not Found. See About
Powered by Blogger

"Whenever you find that you are on the side of the majority, it is time to pause and reflect."