WordPress-Style Comment Controls Using MooTools or jQuery

By  on  

WordPress has a nice little effect on the Admin Dashboard where it shows and hides the comment control links when you mouseover and mouseout of the record's container. Here's how to achieve that effect using MooTools or jQuery.

The XHTML

<!-- more records above -->
<div class="record">
	<p>
		<strong>Comment Person 2</strong><br />
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
	</p>
	<div class="record-controls">
		<a href="#" class="unapprove">Unapprove</a> |
		<a href="#">Edit</a> |
		<a href="#">Reply</a> |
		<a href="#">Spam</a> |
		<a href="#" class="delete">Delete</a>
	</div>
</div>
<div class="record">
	<p>
		<strong>Comment Person 3</strong><br />
		Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
	</p>
	<div class="record-controls">
		<a href="#" class="unapprove">Unapprove</a> |
		<a href="#">Edit</a> |
		<a href="#">Reply</a> |
		<a href="#">Spam</a> |
		<a href="#" class="delete">Delete</a>
	</div>
</div>
<!-- more records below -->

Notice that we place the links into the pageand DO NOT inject them using MooTools or jQuery. Why? So that if the user doesn't have JavaScript enabled, they can still see the links.

The CSS

.record				{ width:700px; border:1px solid #ccc; padding:15px; margin:0 0 15px 0; }
.record:hover		{ background:#eee; }
.record-controls	{ font-size:10px; }
.unapprove			{ color:#d98500; }
.delete				{ color:#bc0b0b; }

You may modify the above CSS any way you'd like.

The MooTools JavaScript

/* when the dom is ready... */
window.addEvent('domready',function() {
	/* hide all controls right away */
	$$('div.record-controls').setStyle('visibility','hidden');
	/* add events for show/hide */
	$$('div.record').each(function(rec) {
		var controls = rec.getFirst('div.record-controls');
		rec.addEvents({
			mouseenter: function() { controls.fade('in') },
			mouseleave: function() { controls.fade('out') }
		});
	});
});

Once the DOM is ready, we hide all controls and direct MooTools to show and hide the record controls on the mouseover and mouseout events.

The jQuery JavaScript

/* when the dom is ready... */
$(document).ready(function(){
	/* hide all controls right away */
	$('div.record-controls').css('visibility','hidden');
	/* add events for show/hide */
	$('div.record').each(function() {
		var controls = $(this).children('div.record-controls');
		$(this).hover(
			function() { $(controls).css('visibility','visible') },
			function() { $(controls).css('visibility','hidden') }
		);
	});
});

The above achieves a similar effect using jQuery.

I like hiding these links by default because the link colors can be distracting. What do you think?

Recent Features

  • By
    LightFace:  Facebook Lightbox for MooTools

    One of the web components I've always loved has been Facebook's modal dialog.  This "lightbox" isn't like others:  no dark overlay, no obnoxious animating to size, and it doesn't try to do "too much."  With Facebook's dialog in mind, I've created LightFace:  a Facebook lightbox...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    MooTools Zebra Tables Plugin

    Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors. The CSS The above CSS is extremely basic.

  • By
    Image Manipulation with PHP and the GD Library

    Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once. ...OK I'm rubbish when it comes to Photoshop.

Discussion

  1. Simple, and very usefull as usual, Mr W !!

    thx a lot

  2. I liked the juxtaposing of mootools and jQuery.

    Useful illustration for those of us that only use one or the other.

    d.

    • Cornelia

      Very good indeed. Very instructive, I liked very much. Good luck!

  3. The very equivalent, however, would be using .fadeIn and .fadeOut in the jQuery version

  4. You guy are perfect. Short excellent articles on site. Thank you David !

  5. I have been getting familiar with jQuery recently and the more I get into it, the more I’m impressed with it. When I first heard about jQuery I was definitely intimidated by it since I had no previous background with javascript, but I soon realized once you get the basics down its not very hard to pull of some neat effects.

  6. Great example. I’ve been using prototype and wanted to give jQuery a try on a new project. This was a perfect example and something that I needed in my project. Thanks.

  7. h-a-r-v

    Te fade effect would only be nice if the background color was “fading in” along with it. Now it looks just bad – two different hover effects.

  8. Lol, there is certainly no doubt that these up and coming Martial Arts like any other athlete is bigger, better, quicker, stronger and even more skilled. Weather it’s Conventional Martial Arts or MMA, beginning at such a young age is such an enormous benefit.

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