Create a Simple, Powerful Product Highlighter with MooTools

Believe it or not, there's a lot of powerful interactivity you can bring to your site using javascript besides slick navigation menus! This tutorial will help you find your inner cow by introducing you to one of the most powerful and modular javascript libraries—MooTools! We'll be creating a flexible tool for highlighting your sites products or services using the MooTools javascript framework. Also, learn some of the many reasons why MooTools just might be the right javascript library for all of your future projects!

The Demo

So here's what we're building, it's a clever rollover mechanism that works really well as a product highlighter.

Why MooTools?

I know what you're thinking... What could MooTools possibly have to offer that might cause me to break off my long-standing relationship with jQuery—Or Prototype and Scriptaculous for that matter!

One of the biggest problems I've ran into with using jQuery in the past, is the fact that so many of their plugins are created and developed independently—which MEANS, you're placing your trust in a stranger to be actively updating their plugin as the jQuery library continues to release newer and newer versions as well. When this fails (and often times it does) you'll find yourself searching for the proper version of the core library that'll allow your script to function correctly!

Maybe Prototype and its well known partner in crime, Scriptaculous, are more your style. In this particular case you'll be deprived of your right of modularity, and you're forced to include two beefy sized libraries on all of your pages—or in some cases a plugin file as well!

So if MooTools is so great then... why isn't it used more? Why aren't there gazillions of tutorials and books on every library shelf?! There's a handful of reasons:

MooTools is geared more towards the intermediate to advanced scripter.
You won't find collections of cut and paste plugins that allow for immediate implementation.
MooTools users are (for whatever reason) associated with having an elitest disposition.

However, you will find ample tools for working with more unique areas of scripting, like JSON file parsing, cookies, and flash embedding to name a few. Also, a convenient download page that lets you choose exactly what you need for your project so you can ensure the smallest file size possible.

Step 1 - Get MooTools!

Head over to the MooTools Core Builder page! For this particular project, you'll want to select Fx.Morph, Element.Event, DomReady, and Selectors and hit "Download" using YUI Compressor. All dependencies are automatically chosen for you. Be mindful, as certain browsers will add a '.txt' extension to a javascript file for your protection. This will obviously need to be removed, and feel free to trim off some of the beefy characters in the file name.

Step 2 - Attach MooTools to your HTML document

Create the HTML document you'll be using for this project, and attach the MooTools library. My page head looks something like this:



	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Mootools - Product Highlights!</title>
	
	<script src="mootools.js" type="text/javascript"></script>
	
	...
	
	</head>

Step 3 - Lay down your CSS and HTML

Take a look at the following styles and HTML to see how I've laid out the page.

CSS code:



<style type="text/css" media="screen">
	body {
		margin: 0;
		padding: 0;
		background: #1a1613 url(images/bg_tutBody.gif) repeat-x;
	}
	img { border: 0; }
	
	#siteWrap { /* The wrapper for my page icons and bubbles */
		margin: 287px auto 0 auto;
		width: 642px;
		height: 345px;
		position: relative;
		background: transparent url(images/bg_pageWrap.jpg) no-repeat top left;
	}
	
	#pageWrap { /* Wrapper for my page icons */
		position: absolute;
		z-index: 5;
		top: 138px;
		left: 134px;

	}
	/* Page specific styles */
	#psdPage {
		margin-right: 19px;
		float: left;
		cursor: pointer;
	}
	#netPage {
		margin-right: 20px;
		float: left;
		cursor: pointer;
	}	
	#audioPage {
		float: left;
		cursor: pointer;
	}
	#bubbleWrap { /* Wrapper for my bubbles */
		position: absolute;
		z-index: 10;
		left: 158px;
		top: 30px;
	}
	.bubble {
		position: absolute;
	}

</style>

HTML code:



<div id="siteWrap">
	<div id="bubbleWrap" style="visibility: hidden;">
		<div class="bubble"><img src="images/bubble_PSD.jpg" alt="PSDTUTS" /></div>
		<div class="bubble"><img src="images/bubble_NET.jpg" alt="NETTUTS" /></div>
		<div class="bubble"><img src="images/bubble_AUDIO.jpg" alt="AUDIOTUTS" /></div>
	</div>
	
	<div id="pageWrap">
		<div class="page" id="psdPage"><a href="#"><img src="images/page_PSD.jpg" alt="PSDTUTS" /></a></div>
		<div class="page" id="netPage"><a href="#"><img src="images/page_NET.jpg" alt="NETTUTS" /></a></div>
		<div class="page" id="audioPage"><a href="#"><img src="images/page_AUDIO.jpg" alt="AUDIOTUTS" /></a></div>
		
	</div>
</div>

Notice how I have the HTML laid out. I will not be using ID's to select any of the page or bubble elements, and instead creating arrays of all elements containing the two classes, which will allow for this script to scale regardless of how many items you choose to highlight! All bubbles and pages are contained in a wrapper which is absolutely positioned within the site wrapper (which contains our background where all of this is sitting on top of).

Step 4 - Add your javascript

We'll start by creating a wrapper function for our javascript code which places an event listener on the window object, firing once the DOM is loaded and ready. This is important because we need our script to immediately begin altering the DOM once its available.

If we DON'T use this wrapper function, it's quite likely you'll get errors claiming that certain elements don't exist. Another option could be to place the embedded javascript at the end of the document body. However, if you decide to attach the script externally, you'll run into this problem once again, so it's a good habit to get into now!

Another option for 'domready' is to use 'load' which will fire once the page (images included) is completely loaded. We don't want this for this particular project because it means images (such as our bubbles) might intitally flash on the screen before being hidden by our script.

One other important thing to note—if you DO decide to link this script from an external '.js' file, you'll want to ensure you link it AFTER you've linked the MooTools library in the document head.


window.addEvent('domready', function() {

	...

});

Next we start by creating the arrays for both our page and bubble elements and set some initial in-line styles.

	

window.addEvent('domready', function() {
	
	// Create variables (in this case two arrays) representing our bubbles and pages
	var myPages = $$('.page');
	var myBubbles = $$('.bubble');
	
	// Set bubbles opacity to zero so they're hidden initially 
	// and toggle visibility on for their container	back on
	myBubbles.setStyle('opacity', 0);
	$('bubbleWrap').setStyle('visibility','visible')
	
});

Lastly, we'll attach event listeners to the page icons to fire morph effects on their corresponding bubbles. Note that the order of the bubbles as laid out in the HTML is the SAME order of the page icons. This is important!


window.addEvent('domready', function() {
	
	// Create variables (in this case two arrays) representing our bubbles and pages
	var myPages = $$('.page');
	var myBubbles = $$('.bubble');
	
	// Set bubbles opacity to zero so they're hidden initially 
	// and toggle visibility on for their container	back on
	myBubbles.setStyle('opacity', 0);
	$('bubbleWrap').setStyle('visibility','visible')
	
	// Add our events to the pages
	myPages.each(function(el, i) {
		/* Here we change the default 'link' property to 'cancel' for our morph effects, which 
		   ensures effects are interrupted when the mouse is leaving and entering
		   to immediately begin the morph effect being called */
		el.set('morph', {link : 'cancel'});
		
		el.addEvents({
			'mouseenter': function() {
				myBubbles[i].morph({
					'opacity' : 1,
					'margin-top' : '-15px'
				});
			},
			'mouseleave' : function() {
				myBubbles[i].morph({
					'opacity' : 0,
					'margin-top' : 0
				});
			}	
		});
	});
});

You'll notice that we're attaching a function using the each() method to all of the elements of the 'myPages' array. And for each function we pass in 'el' which represents the page element, and 'i' which is an integer representing the placement of that page element within its array. We use the 'i' variable for calling the morph effect on the appropriate and corresponding bubble element within the 'myBubbles' array.

And thats it! Pretty painless wasn't it? Be sure to view the working demo, and also bookmark the MooTools Docs page and MooTools Download page for future reference! I hope this tutorial was helpful, and I look forward to putting together something a bit more advanced in the near future using the power of MooTools classes!