Although it’s possible to achieve opacity using CSS, the hacks involved aren’t pretty. If you’re using the MooTools javascript library, opacity is as easy as using an element’s “set” method. The following MooTools snippet takes every image with the “opacity” class and sets the element’s opacity based upon the number in the image’s rel tag. MooTools 1.2 is required.

The MooTools Javascript

/* on dom ready ... */
window.addEvent('domready', function() {
	/* for each image that requires opacity */
	$$('.opacity').each(function(el) {
		/* set the opacity based on the alt value */
		el.set('opacity','.' + el.get('rel'));
	});
});

The XHTML

<img src="rod.jpg" rel="80" class="opacity" />
<img src="rod.jpg" rel="60" class="opacity" />
<img src="rod.jpg" rel="40" class="opacity" />
<img src="rod.jpg" rel="20" class="opacity" /><br />

The Result

One aspect of WordPress I dislike is that trackbacks display as a comment with the rest of a post’s comments. Trackbacks are a nuisance when there’s a great conversation going within the post’s comments. Some users, however, love trackbacks so I can’t simply get rid of them. I know there are plugins available to separate trackbacks from post comments, but I’ve chosen a different approach.

Using PHP, MooTools javascript, and simple CSS, I’ve added functionality to my website to toggle trackback display at the click of a link. Want to do the same? Follow these steps.

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

.highlight		{ background:#d5fcdc; }
.even			{ background:#fff; }
.mo			{ background:#e3f1fb; }
.odd			{ background:#eee; }
.zebra th		{ padding:5px; background:#ddd; border-bottom:1px solid #999; text-align:left; font-weight:bold; }
.zebra td		{ padding:5px 20px 5px 5px; border-bottom:1px solid #ddd; }

The above CSS is extremely basic. I’ve styled the <TH> tag so that it stands out from table rows. There are four states of rows in my zebra table: highlighted (or “clicked on”), regular even and odd, and a mouseover state — these are represented by the “even”, “mo”, “highlight”, and “odd” classes. I’ve added padding and a bottom border to the <TD>’s for presentation.

Though MooTools 1.2 is in its second beta stage, its basic syntax and theory changes have been hashed out. The javascript library continues to improve and become more flexible.

Fellow DZone Zone Leader Boyan Kostadinov wrote a very useful article detailing how you can add a Gmail-like Ajax display to your website using the Prototype javascript library. The article got me to thinking: could it be helpful to always display an Ajax notification message upon every request’s initial request, success event, and failure event? Maybe even only for debugging purposes?

Though their theories on javascript coding differ, javascript framework developers keep a tight lip when it comes to commenting on other frameworks. When another framework is brought up, the developer usually gives generic responses like “they’re doing good work” or “they’ve got a unique approach.” Anything outside of this response seems to gain unwanted attention, which is exactly what MooTools’ Olmo did last week.

Here’s the sequence of events that led to his eventual departure from MooTools:

1. Olmo gave a presentation about MooTools in which he said some inflamatory comments about the jQuery framework and posted it on the official MooTools Blog. The blog post has been taken down but you can view the video below.