Looking for an easy way to participate in tomorrow’s SOPA (and PIPA) strike? The SOPA Strike website has some code you can use to automatically load this page.
I’ve set up my own customized version, which you’re welcome to use. This does not completely black out your site. Instead, the page loads with a black screen. Then after a few seconds, the words "STOP SOPA" with a "Learn more…" link appear in white. The black box then fades to slightly transparent and animates to the upper left corner of the screen. It then stays fixed in the corner as the user scrolls around. The site is still usable, but the “STOP SOPA” message is ever-present. (Be forewarned: as I did not take the time to set up cookies, the entire process also repeats on each new page load.)
If you’d like to see how it works, I set up an awesome fake site to demonstrate the blackout animation in action.
If your site is already using jQuery, simply copy the code below into your page, ideally just after the <body> tag:
<script type="text/javascript" src="http://atomic.room34.com/sopa_blackout.js"></script>
If you’re not already using jQuery on your site, you just need to include it from Google Code first, like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://atomic.room34.com/sopa_blackout.js"></script>
If you’re using PHP, you can even use this code to automatically make it appear at 8 AM EST and disappear at 8 PM EST. (Update the times as needed to represent your time zone, and remove the Google Code line if you’re already using jQuery.)
<?php
if (time() > mktime(8,0,0,1,18,2012) && time() < mktime(20,0,0,1,18,2012)) {
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://atomic.room34.com/sopa_blackout.js"></script>
<?php
}
?>
Note: As indicated above, I built this quickly, and have not done a lot of cross-browser testing. It’s pretty basic, but it may not display correctly in some older browsers, especially earlier versions of Internet Explorer. Use at your own risk… just like the Internet itself!