28 comments

[ 4.2 ms ] story [ 69.3 ms ] thread
I had a number of friends with small sites who weren't extremely literate when it came to html/js, but who wanted to join in with the January 18th site blackout. We ended up creating this. It's a small one line piece of JS that people can add for a simple blackout wall with information on SOPA/PIPA.
Great job. You should add the following to the header:

"January 18th is Stop SOPA day"

A better choice of words than what we had. Changed!
Obligatory "you don't have friends".

Add a datetime check so I can set it and forget it.

We may provide that in the setup options - we've had a few people who wanted to have it up outside of the 18th.
Author of the js side here. I'll definitely look into seeing how much extra bulk will be needed for this. We're trying to keep the file as small as possible and generally as cross-browser friendly as possible.
datetime check feature added!
Haha! I made the same thing last night!

https://github.com/Miserlou/Blaccupy

Great minds think alike, eh?..

(comment deleted)
Haha, I was working on the same idea today!
I was going to today lol, thanks for saving me the trouble (i'm a noob when it comes to javascript.)

Thanks goes to Everyone who made one btw. - End Edit

Ctrl+clicking on a link to open in a new page removes the blackout.
Clicking anywhere will remove it. Many people didn't want to black out their site completely, so we provided a clickthrough mechanism.
With the new push there is now a secret undocumented sopablackout_srsbzns=true flag you can set if you want the blackout to never go away.
Cool!

An option to have this activate only on the 18th would be great. I'd kinda like to include the code now but have it do nothing until the 18th. Also, is the "sopablackout_id = 'element-id'" option working? Didn't seem to do anything different for me.

In my testing it does. If you've set that option and it doesn't look any different, then perhaps the element you're attaching to is the full size of the page? The attach-to-element feature is for people who say, only wanted to cover the header of their site. There's some hack in there to figure out the position and height of that element and have the popover cover that (also, if the element is too small, the popover might be larger such that the message shows). Always open to bug reports.
Yeah, the id thing could just be my theme's layout. I don't feel like debugging so I'll just let it run full page, no bigs.
Here we go. Ended up a commit where I fixed a typo related to that wasn't merged in yet. It should be all good! Thanks for the support!
Great idea. If this gets wide adoption, which I hope it does, you'll want to ensure that your Javascript code is on a fast CDN or hosted locally, otherwise the sites will stall loading it.
I've got a lot of faith in varnish, so I'm pretty sure things should hold up on this end. However, yes, if you are worried about relying on an external resource by all means curl/wget/whatever the js file and server it up yourself. You just won't get any fixes or features we push in the meantime.
Great idea! I think it could be improved with a minor adjustment. The first thing I saw on that page was "(click here to continue)", which I did before I realized there was text at the top of the screen. You see, "(click here to continue)" is something I see on a lot of pop-over ads and splash-screens, so my brain has been trained to blindly click through to the next page. I think with some minor adjustments, the heading can be made more prominent.
Can I make a suggestion? Have the text fade in.

I think it would give it a bit more ooomph.

That's a great suggestion, but the js snippet does not rely on any external toolkit that would make cross-browser text fading easy to do. Everything it needs to work it provides for itself. It's not even minified but ends up 1.7KB gzipped. I kinda like it that way.

Also, the snippet is really meant for people who can't do this on their own - really, someone with beginner jQuery skills can probably create this on their own site in 10 minutes, so forgive it for being bare bones.

small sites wont make a difference. we need google/youtube to do this.
I love that every site now submitted to HN uses twitter bootstrap. It's an awesome CSS framework, give it a try if you havn't already!
The first time I run across a website using this on the 18th I'm going to drop the script it into adblock's blacklist and be done with it.