NSFW Blocker Using MooTools and CSS

By  on  

One of my guilty pleasures is scoping out the latest celebrity gossip from PerezHilton.com, DListed.com, and JoBlo.com. Unfortunately, these sites occasionally post NSFW pictures which makes checking these sites on lunch a huge gamble -- a trip to HR's office could be just a click away.

Since most of the time it's just a portion of a given picture that could be considered inappropriate, I asked myself if there was a way to get the gist of an article's graphic without having to hide the entire image. For that reason, I've created a NSFW blocker using CSS and MooTools.

Step 1: The XHTML

<div class="nsfw-wrapper">
	<div class="blocker" style="width:32px;height:50px;margin:68px 0 0 38px;"></div>
	<img src="johnny-cash.jpg" alt="Johnny Cash" />
</div>
<div class="nsfw-wrapper">
	<div class="blocker" style="width:30px;height:30px;margin:47px 0 0 13px;"></div>
	<div class="blocker" style="width:30px;height:30px;margin:60px 0 0 121px;"></div>
	<img src="2pac.jpg" alt="Tupac Shakur" />
</div>
<div class="nsfw-wrapper">
	<div class="blocker" style="width:50px;height:50px;margin:118px 0 0 80px;"></div>
	<img src="bush.jpg" alt="President Bush" />
</div>

Each wrapper DIV is given the nsfw-wrapper class. Inside the DIV is another DIV which serves as a blocker for the other element, the image. I recommend using an inline style to define the height, weight, and position of the blocker.

Step 2: The CSS

.nsfw-wrapper 	{  width:200px; float:left; margin:0 20px 0 0; }
.blocker			{ background:#f00; position:absolute; }

The nsfw-wrapper class can be formatted any way you'd like. The nsfw class must be positioned absolutely and you can choose any background color you'd like for your blocker.

Step 3: The Mootools JavaScript

//window on dom ready
window.addEvent('domready', function() {
	$$('.nsfw-wrapper').each(function(el) {
		el.addEvents({
				'mouseenter': function() {
			//fade out the blocker
			el.getElements('div').each(function(div) {
				div.fade('out');
			});
		},
		'mouseleave': function() {
			//fade out the blocker
			el.getElements('div').each(function(div) {
				div.fade('in');
			});
		  }
		});
	});
});

Once the DOM is ready, we grab each wrapper. For every wrapper, we add an event that fades out the blocker(s) on mouse enter and fades the blocker back in when the mouse leaves.

This example is safe for work -- blocked middle fingers only.

Recent Features

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    PHP Woot Checker &#8211; Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

  • By
    CSS Selection Styling

    The goal of CSS is to allow styling of content and structure within a web page.  We all know that, right?  As CSS revisions arrive, we're provided more opportunity to control.  One of the little known styling option available within the browser is text selection styling.

Discussion

  1. Thanks for that. I haven’t tried it, but it seems useful. It might help many that don’t like to makeover the pictures.

  2. Loved the post David and gave you some love on Ajaxian. Keep up the good work:

    http://ajaxian.com/archives/nsfw-blocker-using-mootools

  3. Glad you like it Rey!

  4. Congrats David! This post was just put on Ajaxian! Keep it up!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!