One of the more impressive MooTools plugins to hit the Forge recently was The Wall by Marco Dell’Anna.  The Wall creates an endless grid of elements which can be grabbed and dragged, fading in elements as they are encountered.  Let me show you a quick usage of the Wall!

The HTML

There are two elements in the setup: a viewport and a wall holder:

<div id="viewport">
	<div id="wall"></div>
</div>

Easy enough.

The CSS

The CSS must be configured to accommodate your wall.  Your viewport’s height and width properties should be multiples of your block heights.  You don’t have to configure the viewport that way, but it you wall will be more visually appealing.

#viewport		{ border:1px solid #ccc; width:450px; height:450px; position:relative; overflow:hidden; }
#wall			{ z-index:1; }
#wall img		{ width:150px; height:150px; display:block; float:left; }

My viewport will be 450 x 450, with each element being 150 x 150.

The MooTools JavaScript

It all starts by creating a Wall instance, providing width, height, rangex, and rangey attributes, providing them as the size of the elements (or not):

// When the DOM is ready
window.addEvent("domready", function() {

	// Define a few variables, including the number of images and the "current index"
	var numImages = 23, // 24 images, 0 index
		counter = 0;

	// Create the Wall
	new Wall("wall", {
		width: 150,
		height: 150,
		rangex: [-150,150],
		rangey: [-150,150],
		callOnUpdate: function(items) {
			// For every item returned...
			items.each(function(item) {
				// Inject a new image, fade it in
				new Element("img", {
					src: (++counter) + ".jpg",
					styles: {
						opacity: 0
					}
				}).inject(item.node).fade(1);
				// Reset to image one if the maxlength is greater than the counter
				if(counter > numImages) counter = 1;
			});
		}
	}).initWall();
});

The callOnUpdate method is most important, providing an index by which you can inject your new element (in our case, an image).  Once the counter reaches its maximum length, the index is reset, and the wall continues!

Awesome work by Marco.  My example is just the most basic of usages — visit Marco’s website to see the additional options and examples he has provided.  I can see someone using The Wall to generate a very creative, all-encompassing website!

MooTools Wall Plugin is a post from: David Walsh :: Legendary scribbles about JavaScript, HTML5, AJAX, PHP, CSS, and ∞.

Go to Source

In this post we will look at how to use the canvas tag and clipping to create images that aren’t so rectangular.

Setting up the Canvas

In this example, I am going to be using an image of Ryan, and see if I can modify the shape of it, using the canvas.

First we need a canvas tag in our page

1

<canvas id="c" width="200" height="158"></canvas>

This just sets up a simple canvas with the width and height of our image. I chose these dimensions so that it does not take up any more space than is needed.

Next in JavaScript we will get the canvas and its drawing context in JavaScript

1
2
3

// Grab the Canvas and Drawing Context
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

So now we are ready to begin drawing our image into the canvas.

Drawing the Image into the Canvas

We have our canvas set up, now we need to draw the image into that canvas. We can do this easily, but we need an HTML img element with our image in order to draw it.

We could grab an <img> tag from our page, but we can do it using JavaScript.

1
2
3
4
5
6
7
8
9
10

// Create an image element
var img = document.createElement('IMG');
 
// When the image is loaded, draw it
img.onload = function () {
    ctx.drawImage(img, 0, 0);
}
 
// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

Run this code

Here we are creating a new element for our image. Since we can’t draw the image until it has been downloaded, we need to wait for onload to draw it. Inside of the onload listener, we call the ctx.drawImage(), and pass it the img element. We also pass 0, 0 meaning we want to draw 0 pixels from the top and left.

Finally we set the src of our image, which triggers the browser to fetch the image data.

Clip that Image

In the canvas, we can use a technique called clipping. We can use a path we define to specify that future operations should only affect the area within the path.

Since the canvas is transparent, if we create a clipping path, and then draw the image, the image will only show up inside the shape of that path.

So let’s draw a circle, clip to that path, and draw the image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Create an image element
var img = document.createElement('IMG');
 
// When the image is loaded, draw it
img.onload = function () {
 
    // Save the state, so we can undo the clipping
    ctx.save();
 
 
    // Create a circle
    ctx.beginPath();
    ctx.arc(106, 77, 74, 0, Math.PI * 2, false);
 
    // Clip to the current path
    ctx.clip();
 
 
    ctx.drawImage(img, 0, 0);
 
    // Undo the clipping
    ctx.restore();
}
 
// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

Run this code

You may notice the ctx.save() and ctx.restore() calls. This is because anything we try to do to the canvas after we clip it will only work within the clipping region. We call save() before we clip and then call restore() after, and the state of the canvas will be restored to before the clipping was applied. Everything you drew will remain, but the clipping definition will be gone.

Go Crazy

You can clip to more than just circles. You can clip to any shape you want. You just need to define your path.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// Create an image element
var img = document.createElement('IMG');
 
// When the image is loaded, draw it
img.onload = function () {
 
    // Save the state, so we can undo the clipping
    ctx.save();
 
 
    // Create a shape, of some sort
    ctx.beginPath();
    ctx.moveTo(10, 10);
    ctx.lineTo(100, 30);
    ctx.lineTo(180, 10);
    ctx.lineTo(200, 60);
    ctx.arcTo(180, 70, 120, 0, 10);
    ctx.lineTo(200, 180);
    ctx.lineTo(100, 150);
    ctx.lineTo(70, 180);
    ctx.lineTo(20, 130);
    ctx.lineTo(50, 70);
    ctx.closePath();
    // Clip to the current path
    ctx.clip();
 
 
    ctx.drawImage(img, 0, 0);
 
    // Undo the clipping
    ctx.restore();
}
 
// Specify the src to load the image
img.src = "http://i.imgur.com/gwlPu.jpg";

Run this code

You can use clipping in combination with other techniques to create some pretty interesting effects. What cool effects can you create?

Go to Source

ScrollSpy’s / “Go To Top” Basic Usage

The first step will be creating the CSS for the “Go To Top” link.  The link will be styled to work well within the traditional browser since that’s our priority.

#totop {
	color:#090;
	font-weight:bold;
	text-shadow:1px 1px 0 #ccc;
	bottom:10px;
	right:10px;
	font-size:1.1em;
	position:fixed;
	display:block;
	z-index:10;
}

The link is set to display 10px from the bottom of the screen at any given time.  The ScrollSpy usage is fairly simple;  when the “enter” threshold is met, the element fades in:

// When the DOM is ready
window.addEvent("domready",function() {
	// Create the "top" link
	var top = new Element('a', {
		id: 'totop',
		text: 'Top',
		styles: { opacity: 0 },
		href: '#top'
	}).inject(document.body);
	// Create a ScrollSpy instance
	var spy = new ScrollSpy({
		min: 150,
		onEnter: function(pos) {
			top.fade(1);
		},
		onLeave: function(pos) {
			top.fade(0);
		}
	});
});

At this point, the “Go To Top” link functionality will work great within your typical web browser.  Your mobile browser?  Not so much.  Why?

The Mobile Issue

The reason you wont see the GTT link follow the browser as it scrolls is two fold:

1. Your mobile device’s browser sees the the page as one “view”, and pages downward.  Thus, fixing a link to the bottom keeps it there, regardless of where the user is in the page.
2. The scroll event only fires at the end of the user’s scroll, not during, so the link will not follow the user as they scroll.  Once the scroll ends, the link will “jump” down to the bottom of the view.

With those two details in mind, let’s fix this scrolling CSS problem.

The Solution:  Position Reassignment onScroll

The only way to fix the scrolling problem is to adjust a few of the CSS settings we provided for the traditional browser.  Instead of using fixed positioning, we’re going to use absolute positioning and we’ll also update the CSS top setting to place the element within the viewport.

// If this is an iOS mobile platform...
if(Browser.Platform.ios || Browser.Platform.android) {
	// Change styling of the TOP element's position
	top.setStyles({
		position: "absolute",
		bottom: "auto"
	});
	// Add a scroll event to...
	spy.addEvent("scroll",function(position) {
		// ...position the element
		 // 20px offset from bottom
		top.setStyle("top",(position.y + window.getSize().y - 20) + "px");
	});
}

One we establish that the client is a mobile browser, we swap out the positioning styles and add a scroll event to ScrollSpy to update the top position of the GTT link at the end of every scroll.  Probably easier than you thought, no? This solution was tested on iPad, iPhone, and Android.

There you have it!  The problem isn’t with ScrollSpy;  it’s with the way that mobile browsers handle fixed positioning.  No updates to ScrollSpy will be made on account of mobile, as ScrollSpy is simply used to get positioning information;  as long as the position information is provided, you can add positioning styles to desired elements.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: MooTools ScrollSpy, Mobile Devices, JavaScript Scroll Events, and CSS Positioning

Related posts:

1. CSS Fixed Positioning
2. Mobile Touch Events in MooTools 1.3
3. Prevent Page Zooming in Mobile Browsers
4. “Top” Watermark Using MooTools
5. Scrolling “Agree to Terms” Component with MooTools ScrollSpy

Go to Source

Slick Selector Engine

The biggest update is the inclusion of the new Slick standalone selector engine. The engine was developed by Thomas Aylott, Fabio Costa and Valerio Proietti with accuracy and portability in mind, allowing the engine to not only provide MooTools developers with excellent selector support but also the ability for it to be included in other projects as well. The MooTools team created over 3,000 tests to ensure that even the most obscure scenarios were considered. The inclusion of Slick also allowed the team to extend the Element method to allow creation of DOM elements using complex CSS selector expressions. Very cool!

Core Updates

The MooTools team also focused on enhancing the core API in preparation for MooTools 2.0 by deprecated every $- prefixed function and nd moving those to the relevant natives namespaces:

We have revised the whole base of our library to speed up MooTools, to provide an even more beautiful API and to make our library future-proof. In order to reduce the amount of global variables we have moved all $-prefixed functions into their according namespace ($splat » Array.from, …). In short we think that with 1.3 you are getting the best MooTools experience ever.

New Build Manager

Building a new version of MooTools has always been easy using the builder and now it’s been improved via the new Packager preprocessor which allows you to create custom MooTools builds from Github repositories. It handles code dependencies and already provides support for several MooTools plugins. The new Packager is a PHP 5.2+ library but can also be found as a Python app thanks to Aaron Newton’s work.

MooTools Runner

To make sure that MooTools continues to adhere to the projects’s specifications, Christoph Pojer & Arian Stolwijk spent some time over the summer building a new spec testing engine called MooTools Runner which has been adopted by all major MooTools projects – Core, More and Slick. The engine is based on Jasmine and runs all specs within just 2 seconds. In addition, code coverage was increased to about 95%, ensuring excellent test coverage for Core.

Download it!

Once you’re ready, you can grab the latest version of MooTools or roll your own via the following links:

• Download MooTools Core 1.3
• Build MooTools Core 1.3
• Build MooTools More 1.3RC
• Update from 1.2 to 1.3 with 1.2 compatibility.
• Upgrade from 1.2 to 1.3 and drop 1.2 compatibility.
• Fork / clone MooTools 1.3 from GitHub, and build it yourself with Packager.
• Read the commit logs to see precisely what has changed.
• Browse the Documentation for Core & More.

Go to Source

var img = new Element('img',{
	alt: this.title ? this.title.get('html') : this.options.url,
	src: this.options.url,
	events: {
		error: function() {
			this.messageBox.set('html',this.options.errorMessage);
			img.dispose();
		}.bind(this),
		load: function() {
			img.setStyle('display','');
			this.unfade();
			if(!this.footer) {
				img.setStyle('cursor','pointer').addEvent('click',this.close.bind(this));
			}
		}.bind(this)
	},
	styles: {
		display: 'none'
	}
}).inject(this.messageBox);

On a hunch I detached the “src” assignment and coded that as a separate statement:

var img = new Element('img',{
	alt: this.title ? this.title.get('html') : this.options.url,
	events: {
		error: function() {
			this.messageBox.set('html',this.options.errorMessage);
			img.dispose();
		}.bind(this),
		load: function() {
			img.setStyle('display','');
			this.unfade();
			if(!this.footer) {
				img.setStyle('cursor','pointer').addEvent('click',this.close.bind(this));
			}
		}.bind(this)
	},
	styles: {
		display: 'none'
	}
});
img.set('src',this.options.url).inject(this.messageBox); //for ie

Not too surprisingly that worked. The reason my modification worked is that image was being pulled from cache as soon as the SRC attribute was set, thus “beating” the event assignment to the punch. Keep this in mind if you run into onLoad issues with your images.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Image onLoad Event + JavaScript Issue with Internet Explorer

Related posts:

1. CSS Image Filters in Internet Explorer
2. MooTools onLoad SmoothScrolling
3. Rounded Corners in Internet Explorer
4. Prevent Internet Explorer’s Default Image Dragging Action
5. IE Says “Internet Explorer cannot open the Internet Site ________. Operation Aborted.” I Say “WTF?”

Go to Source

Another one of my popular, early blog posts has been AJAX Username Availability Checker Using MooTools 1.2. Looking back now, the code is atrocious and very inflexible. I’ve taken some time to update the post to be more reliable, clean, and speedy.

The HTML

<p><strong>Please provide your desired username: &nbsp;&nbsp;&nbsp;</strong>
	<input type="text" name="username" id="username" size="30" class="basis" />
</p>

The foundation of the system is the INPUT element with a specific ID. No other elements are required. The eventual IMG element will be generated by MooTools.

The CSS

.basis		{ padding:5px; border:1px solid #ccc; }
.available	{ border:1px solid #008000; background:#90ee90; }
.taken		{ border:1px solid #fc0; background:#fffea1; }

You’ll want to create three CSS classes: one that is always applied to the input, another class which represents an available username, and one last class to represent a taken username. Green is always good to use for positive results. As for how you denote a taken username, please don’t be a #f00.

The MooTools JavaScript

var AvailabilityChecker = new Class({

	//implements
	Implements: [Options,Events],

	//options
	options: {
		trigger: 'keyup',
		offset: { x:0, y:0 },
		minLength: 5,
		availableClass: 'available',
		takenClass: 'taken',
		availableImage: '',
		takenImage: '',
		url: 'ajax-username-check.php'
	},

	//initialization
	initialize: function(element,options) {
		//set options
		this.setOptions(options);
		this.element = document.id(element);
		this.lastValue = this.element.value;
		this.cache = {};
		//create the image which will display to the side
		var pos = this.element.getCoordinates();
		this.image = new Element('img',{
			src: '',
			styles: {
				'z-index': 100000,
				position: 'absolute',
				top: pos.top + this.options.offset.y,
				left: pos.left + pos.width + this.options.offset.x
			}
		}).inject(document.body);
		//workers and removers
		this.comparer = function(response) {
			this.cache[this.element.value] = response;
			var state = (response == '1') ? 'available' : 'taken';
			this.element.addClass(this.options[state + 'Class']);
			this.image.set('src',this.options[state + 'Image']);
			return state;
		};
		this.remover = function() {
			this.element.removeClass(this.options.availableClass).removeClass(this.options.takenClass);
		};
		//create the request which will be frequently used
		this.request = new Request({
			url: this.options.url,
			method: 'get',
			link: 'cancel',
			onRequest: this.remover.bind(this),
			onComplete: this.comparer.bind(this)
		});
		//add listener
		this.element.addEvent(this.options.trigger,function() {
			var value = this.element.value;
			if(value.length >= this.options.minLength && value != this.lastValue) {
				this.validate(this.lastValue = value);
			}
		}.bind(this));
	},

	//a method that does whatever you want
	validate: function(value) {
		this.fireEvent('check');
		if(this.cache[value] != undefined) {
			return this.comparer(this.cache[value]);
		}
		else {
			return this.request.send('username=' + value + '&ajax=1');
		}
		return this;
	}

});

//USAGE!
window.addEvent('domready', function() {
	var validator = new AvailabilityChecker('username',{
		trigger: 'keyup',
		availableImage: 'checkmark.jpg',
		takenImage: 'warning.jpg',
		offset: { x: 4, y: 4 },
		minLength: 4,
		url: '<?php echo $_SERVER["PHP_SELF"]; ?>'
	});
});

The original class featured a host of problems. No element was required, a new Request was being generated every keystroke, results weren’t cached. Ugh. Those have all been fixed and I’ve added event functionality to the class. I’ve also implemented many new MooTools best practices.

I know the class doesn’t feature many methods and still isn’t ultimately flexible but the truth is that this type of widget can be very specific. What this class aims to accomplish to provide you with a basic class you can build from.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: AJAX Username Availability Checker Using MooTools

Related posts:

1. AJAX Username Availability Checker Using MooTools 1.2
2. Form Element AJAX Spinner Attachment Using MooTools
3. Caching AJAX Results in JavaScript
4. Form Element AJAX Spinner Attachment Using jQuery
5. AJAX Page Loads Using MooTools Fx.Explode

Go to Source

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.

HTML5 brings to the spec a dedicated <nav> element that should be used as the container for any major navigation structure, such as the main vertical or horizontal site navigation menus, or an in-page table of contents for example. IE unfortunately doesn’t support this new element yet, but there is a simple fix we can use, of which I’m sure you’re all aware.

Using CSS3 we can do away with what would have required the use of several background images and possibly an additional wrapping container or two and rely (almost) purely on some of the new style properties, such as rounded corners and drop-shadows for example, that are available to supporting browsers. Again, not all browsers (cough, IE!) support these new rules, but we can very easily provide fall-back solutions for the browsers that can’t handle our styles.

Step 1. Getting Started

We’ll need a copy of the latest release of jQuery, version 1.4.2 at the time of writing, as well as a copy of the current version (1.1) of the excellent Modernizr library, which we’ll use to target supporting browsers with the CSS3 we use.

Create a project folder for the files we’ll create somewhere on your machine and call it nav, inside this folder create three new folders; one called js, one called css and one called fallback. Make sure copies of both jQuery and Modernizr are saved in the js folder.

Step 2. The Underlying Page

Begin the coding by creating the following page in your favourite code editor:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML5, CSS3 and jQuery Navigation menu</title>
		<link rel="stylesheet" href="css/nav.css">
		<!--[if IE]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body class="no-js">
		<nav id="topNav">
	        	<ul>
       		     	<li><a href="#" title="Nav Link 1">Nav Link 1</a></li>
				<li>
                	<a href="#" title="Nav Link 1">Nav Link 2
					<ul>
                    	<li><a href="#" title="Sub Nav Link 1">Sub Nav Link 1</a></li>
						<li><a href="#" title="Sub Nav Link 2">Sub Nav Link 2</a></li>
						<li><a href="#" title="Sub Nav Link 3">Sub Nav Link 3</a></li>
						<li><a href="#" title="Sub Nav Link 4">Sub Nav Link 4</a></li>
						<li class="last"><a href="#" title="Sub Nav Link 5">Sub Nav Link 5</a></li>
                    </ul>
				</li>
				<li><a href="#" title="Nav Link 1">Nav Link 3</a></li>
				<li><a href="#" title="Nav Link 1">Nav Link 4</a></li>
				<li><a href="#" title="Nav Link 1">Nav Link 5</a></li>
			</ul>
		</nav>
		<script src="js/jquery.js"></script>
		<script src="js/modernizr.js"></script>
	</body>
</html>

Save this as nav.html in the nav folder. We start out with the minimal HTML5 doctype, which allows us to specify the type of document in a quarter of the code we used to use. We also specify the default language and the character encoding; although the document will still validate without these two things, it’s good practice to include them and the page will trigger validator warnings if the default language isn’t specified. We then link to a style sheet (we’ll create this next) and use a conditional comment that targets IE to load Remy Sharp’s excellent html5.js script if required.

In the body of the page we have the <nav> element as the container for a traditional list of links, and we’ve thrown in a sub-menu for good measure too. The element doesn’t magically create a navigation menu for us, and it doesn’t include any new menuitem elements or anything like that so an unordered list is still an appropriate choice. The <nav> element is just a semantic container for our menu, which describes its function within the document, to replace the generic &div> element which states nothing inherently about its purpose on the page.

At the end of the body we link to our script files jQuery and Modernizr. We’ll use jQuery a little later on when we come to add the behaviour for the menu, but Modernizr will do its thing straight away, detecting the capabilities of the browser in use and adding a series of class names to the HTML element, which we can use to add our CSS3 so that it is only applied to browsers that can make use of them. We’ve also added the class name no-js to the <body> of the page; we’ll remove it later if JavaScript is enabled so we can also use it to add styles that should only be applied when JavaScript is disabled.

Step 3. Some Basic Styling

Now let’s add some basic styling; create the following style-sheet:

/* JS disabled styles */
.no-js nav li:hover ul { display:block; }

/* base nav styles */
nav { display:block; margin:0 auto 20px; border:1px solid #222; position:relative; background-color:#6a6a6a; font:16px Tahoma, Sans-serif; }
nav ul { padding:0; margin:0; }
nav li { position:relative; float:left; list-style-type:none; }
nav ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
nav li a { display:block; padding:10px 20px; border-left:1px solid #999; border-right:1px solid #222; color:#eee; text-decoration:none; }
nav li a:focus { outline:none; text-decoration:underline; }
nav li:first-child a { border-left:none; }
nav li.last a { border-right:none; }
nav a span { display:block; float:right; margin-left:5px; }
nav ul ul { display:none; width:100%; position:absolute; left:0; background:#6a6a6a; }
nav ul ul li { float:none; }
nav ul ul a { padding:5px 10px; border-left:none; border-right:none; font-size:14px; }
nav ul ul a:hover { background-color:#555; }
Save this file in the css directory as nav.css. The first rule is purely for when JavaScript is disabled, and allows the hidden submenu to be displayed on hover purely with CSS. The rest of the code defines a set of base styles that format the <nav> menu in the way that we want without adding anything too decorative. Note that we’re using the :after pseudo-selector to clear the floated list items; normally this would be added using a class name to that it could be applied to the containers of any floated elements on the page. At this point our page should look like this:

Step 4. CSS3

Next we can add our CSS3:

/* CSS3 */
.borderradius nav { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; }
.cssgradients nav { background-image:-moz-linear-gradient(0% 22px 90deg, #222, #999); background-image:-webkit-gradient(linear, 0% 0%, 0% 70%, from(#999), to(#222)); }
.boxshadow.rgba nav { -moz-box-shadow:2px 2px 2px rgba(0,0,0,.75); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.75); box-shadow:2px 2px 2px rgba(0,0,0,.75); }
.cssgradients nav li:hover { background-image:-moz-linear-gradient(0% 100px 90deg, #999, #222); background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#222), to(#555)); }
.borderradius nav ul ul { -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.boxshadow.rgba nav ul ul { background-color:rgba(0,0,0,0.8); -moz-box-shadow:2px 2px 2px rgba(0,0,0,.8); -webkit-box-shadow:2px 2px 2px rgba(0,0,0,.8); box-shadow:2px 2px 2px rgba(0,0,0,.8); }
.rgba nav ul ul li { border-left:1px solid rgba(0,0,0,0.1); border-right:1px solid rgba(0,0,0,0.1); }
.rgba nav ul ul a:hover { background-color:rgba(85,85,85,.9); }
.borderradius.rgba nav ul ul li.last { border-left:1px solid rgba(0,0,0,0.1); border-bottom:1px solid rgba(0,0,0,0.1); -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -webkit-border-bottom-left-radius:4px; -webkit-border-bottom-right-radius:4px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; }
.csstransforms ul a span { -moz-transform:rotate(-180deg);-webkit-transform:rotate(-180deg); }

Using the classes added to the <html> element by Modernizr we can easily and safely add the CSS3 styles that we want. We use the border-radius style to give the <nav> element rounded corners; We need to give Mozilla and Webkit prefixed style declarations as well as the standard border-radius styles for browsers that support them, such as Opera. We need to do this with most of our CSS3 styles.

As well as corner-rounding of the <nav> we also give it a gradient and a drop shadow. The gradient styles are fairly complex and are different for Mozilla and Webkit based browsers, which are the only browsers currently implementing them. Both browsers use the background-image property. In Firefox we use -moz-linear-gradient to add a linear gradient. It requires values which correspond to the starting point of the gradient (0%), the point at which the first color blends into the second color (22px), the angle of the gradient axis (90deg), the first color (#999) and the second color (#222).

We can get the same gradient in Safari or Chrome using -webkit-gradient and the syntax is subtly different; we specify that it should be a linear gradient and then provide two points which tell the browser where the gradient should start and end. The values in the example correspond to left, top and right values of 0% and 70% for the bottom, which gives us the same style as that used in Firefox. Lastly we specify the colors of the gradient.

When we apply the drop-shadow we combine it with the Modernizr class for RGBA as well as boxshadow so that our shadow can be transparent. The properties for Mozilla and webkit are the same, and we also supply the actual box-shadow property for supporting browsers. The values we specify for this rule are the left offset (2px), the top offset (2px), the amount of blurring (2px) and lastly the color of the shadow (0,0,0). The color is where we use RGBA, which allows us to set the opacity to 75% (.75).

Another interesting style we use is transform to rotate some text 180 degrees; when we write the script in a moment, you’ll see that we add a sub menu indicator in the form of a caret sign to any list items that contain a submenu – this style will rotate the character to that it is pointing down, which means that in supporting browsers we don’t even need to use an image for this feature.

The remaining rules set different gradients, rounded edges, opacity with RGBA and drop shadows on other elements in the <nav> menu, such as nice bottom rounded corners and a drop shadow on the submenu, as well inverting the gradient for an attractive hover state. Now our navigation menu should look like this in a supporting browser:

In supporting browsers we can make our elements look pretty hot without using a single image, which means our pages will load much quicker with far fewer HTTP requests. However, not all browsers will support the CSS3 styling, notably any version of IE, so we still need to define our fallback styles. Add the following code to the style sheet:

/* fallbacks */
.no-cssgradients nav, .no-js nav { padding-bottom:4px; border:none; background:url(../fallback/navBG.gif) repeat-x 0 0; }
.no-borderradius nav ul, .no-js nav ul { background:url(../fallback/navRight.gif) no-repeat 100% 0; }
.no-borderradius nav ul ul, .no-js nav ul ul { background:none; }
.no-borderradius nav li, .no-js nav li { height:44px; }
.no-cssgradients nav li:hover, .no-js nav li:hover { background:url(../fallback/navOverBG.gif) repeat-x 0 0; }
.no-borderradius nav li li, .no-js nav li li { height:auto; width:98%; left:-2px; }
.no-borderradius nav li:first-child, .no-js nav li:first-child { background:url(../fallback/navLeft.gif) no-repeat 0 0; }
.no-borderradius nav li:first-child:hover, .no-js nav li:first-child:hover { background:url(../fallback/navOverLeft.gif) no-repeat 0 0; }
.no-borderradius nav li li:first-child, .no-js nav li li:first-child { background:none; }
.no-rgba nav ul ul, .no-js nav ul ul { left:1px; padding-left:2px; background:url(../fallback/subnavBG.png) no-repeat 100% 100%; }
.no-rgba nav ul ul a, .no-js nav ul ul a { left:3px; }
.no-rgba nav ul ul a:hover { background:url(../fallback/subOverBG.png) repeat 0 0; }
.no-csstransforms ul a span { height:7px; width:12px; margin-top:8px; text-indent:-5000px; overflow:hidden; background:url(../fallback/indicator.png) no-repeat 0 0; }
.no-borderradius ul ul li.last { margin-bottom:10px; }
.no-cssgradients.boxshadow nav { box-shadow:none; }

Modernizr will also add class names showing which CSS3 features are not available to the browser, so we can easily supply alternative rules, which make use of image-based fallbacks where features are not supported as well as any styles we may need as a result of using the images.

You’ll notice that we also use selectors that target our no-js class here too; this is because when JavaScript is disabled, Modernizr will not run and will not add the class names we need to the document, so our non-CSS3 fallbacks also become our non-js fallbacks as well.

Step 5. Adding the Script

Now let’s add some script. The first thing we need to do is remove the no-js class from the body of the page when JavaScript is not disabled. We want to do this as soon in the page rendering process as possible to avoid a flicker when the styles are changed. Directly after the opening body tag add the following code:

<script>
	var el = document.getElementsByTagName("body")[0];
	el.className = "";
</script>

All we do is get the <body> element by tag name and set its className property to an empty string. Normally we would use jQuery to do that for us, but because jQuery won’t have loaded when this script is executed we can’t use it. We could load jQuery before this of course, but we’d then take a massive performance hit. Our script is only 2 lines of code so it won’t cause a significant delay, and because it will be executed before the browser has even processed the mark-up for the <nav> element, there will be no flash of unstyled content.

Now that the class has been removed from the body our CSS submenus will no longer work so we can add this behaviour back in with jQuery and enhance it a little at the same time. At the end of the document, directly after the script reference for Modernizr add the following code:

<script>
	(function($){

		//cache nav
		var nav = $("#topNav");

		//add indicators and hovers to submenu parents
		nav.find("li").each(function() {
			if ($(this).find("ul").length > 0) {

				$("<span>").text("^").appendTo($(this).children(":first"));

				//show subnav on hover
				$(this).mouseenter(function() {
					$(this).find("ul").stop(true, true).slideDown();
				});

				//hide submenus on exit
				$(this).mouseleave(function() {
					$(this).find("ul").stop(true, true).slideUp();
				});
			}
		});
	})(jQuery);
</script>

The script is relatively straight-forward; we wrap our code within a closure and pass in the jQuery object safely name-spaced to the dollar sign, just in case another library is in use when the code is put into production. We then cache a reference to the <nav> element so that we can refer to it without selecting it from the document repeatedly. We then process each list item within the menu.

For each matching element we check it to see if it contains any nested <ul> elements and if it does we add a new <span> element to the list item. This will become our submenu indicator. When a submenu is found we also attach mouseenter() and mouseleave() event helpers to the list item that contains the menu. All these helpers do is show and hide the submenu by sliding it down or up respectively. Note the use of the stop() method which helps to prevent the opening and closing animations queuing up if the mouse pointer is repeatedly moved onto and off of the target list items.

At this point we should be in quite a nice place with regard to most situations; in any browser that supports HTML5 our menu should look relatively similar regardless of whether CSS3 is supported or not, and whether scripting is enabled or not. However, IE presents us with a problem; when JS is enabled, the htmlshiv.js script makes IE understand the <nav> element and our non-css3 styles are picked up and implemented – all very well and good (we still have some issues with IE7, as among other things our auto-clearing :after rules are not understood or applied, but we’ll come to the in a little while).

However, the problems start when IE is used with scripting disabled – in this situation, the html5shiv.js script is not executed and IE doesn’t understand the <nav> element. None of our selectors that include nav in them will be implemented! It’s not the end of the world though; we can provide an alternative style sheet that is only used when the browser has JS disabled and is IE. Directly after the script that removes the no-js class from the <body> element add the following:

<noscript>
<!--[if IE]>
	<link rel="stylesheet" href="css/ie.css">
<![endif]-->
</noscript>

A simple solution indeed. We now need to create the new styles sheet; add the following rules to a new document in your code editor:

/* ie styles for when js disabled */
ul { display:block; padding:0; margin:0; background:url(../fallback/navRightIE.gif) no-repeat 100% 0; font:16px Tahoma, Sans-serif; }
ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
li { height:44px; position:relative; float:left; list-style-type:none; background:url(../fallback/navBG.gif) repeat-x 0 0; }
li.last a { border-right:none; }
li:hover { background:url(../fallback/navOverBG.gif) repeat-x 0 0; }
li:first-child { background:url(../fallback/navLeftIE.gif) no-repeat 0 0; }
li:first-child a { border-left:none; }
li:first-child:hover { background:url(../fallback/navOverLeft.gif) no-repeat 0 0; }
li a { display:block; padding:10px 20px; border-left:1px solid #999; border-right:1px solid #222; color:#eee; text-decoration:none; }
li li { width:auto; clear:left; }
li li:first-child { background:none; }
li li:hover { background-image:none; }
ul li li a:hover { border-right:none; }
ul ul { display:none; padding-left:2px; position:absolute; left:2px; background:url(../fallback/subnavBG.png) no-repeat 100% 100%; }
ul li:hover ul { display:block; }
li li { height:auto; width:98%; left:-2px; }
ul ul a:hover { background:url(../fallback/subOverBG.png) repeat 0 0; }
ul a span { height:7px; width:12px; margin-top:8px; text-indent:-5000px; overflow:hidden; background:url(../fallback/indicator.png) no-repeat 0 0; }
ul ul li { background:none; }
ul ul li.last { margin-bottom:10px; }
ul ul li a { padding:5px 10px; border-left:0; left:3px; font-size:14px; white-space:pre; }

Save this in the css folder as ie.css. As you can see, we aren’t targeting the <nav element at all in this style sheet; some of the styles we gave to the <nav> element earlier have been added to the <ul> element instead, and there are a few new styles that need to be included specifically for this scenario. Essentially though, the style sheet creates the same effect as before, so IE8 with JS disabled should still appear like this:

We’ve had to make use of a couple more images for this scenario because we no longer have the <nav element to hang the background-repeat on for the main gradient. So that’s all modern browsers, with JS enabled and disabled, working as expected – using CS3 where possible and image fallbacks where not.

IE7 will still create problems for us, even with scripting enabled, but we can fix that easily enough using another conditional comment to target IE7 specifically, and supplying a new style sheet just for IE7 which fixes the layout problems; something like this is all we need:

* styles to fix IE7 */
ul { display:inline-block; }
ul li a span { position:absolute; right:5px; top:10px; }
ul ul li a { border-right:none; padding:5px 10px; }
.content { clear:both; }

Save this in the css folder as ie7.css and add a new conditional comment to the <head of the page:

<!--[if IE 7]>
	<link rel="stylesheet" href="css/ie.css">
 	<link rel="stylesheet" href="css/ie7.css">
<![endif]-->

There we go; a navigation menu built and styled with the latest elements and styles with fallbacks and fixes for older browsers.

Go to Source

• Slick is an independent project; it may be implemented in any framework that is flexible enough to allow it.
• Slick is much, much faster than the MooTools 1.2 selector engine.
• Supports just about every selector you can think of.
• Slick has a detached parser. You can parse a CSS-style-selector string and get back a property-filled object.
• Supports XML documents.
• Slick is so customizable that you can create your own Pseudo Selectors and Attribute Selectors.

And if that’s not enough, MooTools 1.3 has flawlessly incorporated Slick to allow you to create new elements on the fly. Check this out!

MooTools & Slick Shorthand Element Creation

var div = new Element('div');
//creates <div />

The above snippet creates a DIV element. Too simple, lets get a bit trickier.

var div = new Element('div.myClass');
//creates <div class="myClass" />

The above snippet creates a DIV element with a myClass CSS class. Still too simple.

var div = new Element('div#myId.myClass.myOtherClass[title=My Title][text=Element Inner Text]');
//creates <div class="myClass myOtherClass" title="My Title">Element Inner Text</div>

The above snippet creates a DIV element with an ID, CSS classes, a title attribute, and the text “My Text.” I mean that’s just stupid cool slick, right?

Slick is just one great enhancement within MooTools 1.3. Even if you don’t use MooTools, you can still use Slick within your framework or project. Be sure to download Slick for your own work. Oh…an that small MooTools 1.3 thing too….

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Create Elements on the Fly with MooTools 1.3 and Slick

Related posts:

1. Implementing the Sizzle Selector Engine in MooTools
2. Create a Custom “:selected” Pseudo Selector in MooTools
3. Build a Slick and Simple MooTools Accordion
4. Implementing .css() and .attr() in MooTools 1.2.3
5. Peppy and MooTools

Go to Source

HTML5: Captions – Stage 1: the <track> element.

HTML5: Captions – Stage 2: the IDL additions.

HTML5: Captions – Stage 3: defining what a timed track and a timed track cue are.

John Dyer noticed the new <track> element too, and noted how useful they would be for his multi-lingual HTML5 video player for a school’s online education program.

Here is what the spec has to say about the new element:

The track element allows authors to specify explicit external timed tracks for media elements. It does not represent anything on its own.

The kind attribute is an enumerated attribute. The following table lists the keywords defined for this attribute. The states given in the first cell of the rows with keywords give the states to which those keywords map.

• subtitles: Translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the media resource’s soundtrack).
• captions: Transcription of the dialogue, suitable for when the soundtrack is unavailable (e.g. because it is muted or because the user is deaf).
• descriptions: Textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is unavailable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
• chapters: Chapter titles, intended to be used for navigating the media resource.
• metadata: Tracks intended for use from script.

Go to Source

Slick is our new, shiny, super fast, exhaustively tested, pure-javascript selector engine. There will probably be a dedicated Slick post in the following days (or months, given our relaxed release cycles), but here’s a few Slick-facts for those who haven’t checked it out already:

• Slick is a MooTools-family project by MooTools developers Thomas Aylott, Fabio Costa and yours truly. It can be forked from github, free of charge!
• Slick is an incredibly advanced evolution of our previous selector engine.
• Slick is written using only pure-javascript, none of the MooTools apis are required. It can be used in any project or framework, and it does not require MooTools to function (though the MooTools DOM components do require Slick).
• Slick is speedy, blows away the 1.2 selector engine by 50%, at least. We will give you detailed data in the post dedicated to Slick.
• Slick supports every selector you can think of. Seriously, every one of them. I promise you.
• Slick is customizable, you can make your own pseudo-selectors, your own attribute-selectors, and many more your-own kinds of things.
• Slick supports reversed combinators. You might not know what they are, but they are pretty darn cool.
• Slick has a detached parser. You can parse a css-style-selector string and get back a property-filled object.
• Slick perfectly supports XML documents.
• Slick is slick!

This bleeds into some new APIs too.

For example, what you may have done like this:

you can now do using selectors:

There are other features too:

Globals

MooTools 1.3 moves away from the $name functions. Most of the useless ones, such as $chk (god knows why I thought it was a good idea to have $chk), were completely nixed. Some of them moved to the proper object’s namespace ($merge » Object.merge, $pick » Array.prototype.pick). Some others were renamed without the stupid $ in front ($type » typeOf, $defined » nil). In the end, there are a lot less global variables now. You can refer to the 1.3 documentation to have a proper list of what’s changed. Keep in mind that the old version of the methods will still work, by default. There will be a way in the future to “compile” MooTools without the compatibility stuff, but the feature is not ready yet.

From types with love

Every native type has now a from method that will try to convert every object passed to that type. Array.from, for instance, replaces both $A and $splat. Function.from will return a function that returns the passed in value, if it wasn’t a function itself. String.from… well you know that at this point, don’t you? We also changed how we internally handle Native types, but that should be none of your concerns, since they were handled with private apis anyways.

Generating your own MooTools, from your own computer

It is now possible, easy, and even perhaps recommended to generate MooTools (and its plugins) yourself. Last few months I’ve been working, on and off, on a pretty advanced projects-builder. It’s called Packager, it supports multiple project dependancies and has a very similar syntax of what’s used in the Forge right now. It’s written in php and you can use it from your php webpages to dynamically include JavaScripts for development, or you can build a single .js for production from the command line.

Go to Source

Execute Code when the DOM is Ready

Dojo Toolkit

dojo.ready(function() {
	//do stuff
});

jQuery

$(document).ready(function() {
	//do stuff
});

MooTools

window.addEvent('domready',function() {
	//do stuff
});

Collect Elements

Dojo Toolkit

var myElement = dojo.byId('myElement');
var divs = dojo.query('div');

jQuery

var myElement = jQuery('#myElement');
var divs = jQuery('div');

MooTools

var myElement = document.id('myElement');
var divs = $$('div');

Create Event Listeners

Dojo Toolkit

dojo.connect(dojo.byId('myElement'),'onclick',function() {
	alert('You clicked me!');
});

jQuery

jQuery('#myElement').click(function() {
	alert('You clicked me!');
});

MooTools

document.id('myElement').addEvent('click',function() {
	alert('You clicked me!');
});

Create a New Element, Inject Into Document.Body

Dojo Toolkit

dojo.create('div',{
	innerHTML: 'This is a new element',
	id: 'myElement'
},dojo.body());

jQuery

$('<div id="myElement">This is a new element</div>').appendTo('body');

MooTools

new Element('div',{
	id: 'myElement',
	text: 'This is a new element'
}).inject(document.body);

Execute AJAX Requests

Dojo Toolkit

dojo.xhrPost({
	url: 'save.php',
	content: {
		id: dojo.byId('user-id').value
	}
	load: function(response) {
		alert('Received the following response:  ' + response);
	}
});

jQuery

jQuery.ajax({
	url: 'save.php',
	type: 'post',
	data: {
		id: jQuery('#user-id').val()
	},
	success: function(response) {
		alert('Received the following response:  ' + response);
	}
});

MooTools

new Request({
	url: 'save.php',
	method: 'post',
	data: {
		id: document.id('user-id').value
	},
	onSuccess: function(response) {
		alert('Received the following response:  ' + response);
	}
}).send();

Animate the Opacity of an Element

Dojo Toolkit

dojo.anim('myElement',{ opacity: 0.7 }, 250);

jQuery

jQuery('#myElement').fadeTo(250,0.7);
//duration first...ftl

MooTools

document.id('myElement').set('tween',{ duration: 250 }).fade(0.7);

See? Dojo, jQuery, and MooTools aren’t that different. Same problems, different solution syntax. Like Pete Higgins says: It’s just JavaScript!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Accomplishing Common Tasks Using MooTools, jQuery, and Dojo

Related posts:

1. Quick Dojo Setup Snippet for MooTools Developers
2. Remove Broken Images Using Dojo
3. QuickBoxes for Dojo
4. Implement MooTools’ Elements.addEvent in jQuery
5. Link Nudging Using Dojo

Go to Source

What can you use the application for?


Mind42 is a collaborative browser-based mind mapping tool. The name refers to two concepts: 42 is the “answer to life” in the popular science fiction novel, The Hitchhiker’s Guide to the Galaxy; and it also stands for “For Two” – signifying the collaborative nature of the application. The application is a very useful image based tool for brainstorming by arranging ideas in a tree diagram. The online component allows for collaboration that is not limited by geographic location.

What is the history and popularity of the application?


Mind42 is a product of Irian Solutions, a company that specializes in creating Java projects.

What are the differences to other applications?


The application is completely free, which is different than several other mind mapping software offerings. The spare, orderly workspace is conducive to brainstorming as there are few elements for distraction. The program also contains handy keyboard shortcuts for adding nodes and editing. Another great feature is the auto-saving element. As users work on their maps, the application automatically saves every five minutes to prevent data loss. Users can also go back and restore the map to an earlier saved period.

How does the application look and feel to use?


The workspace is very clean and uncluttered. Tools pop up with the addition of a new element rather than in the toolbar which contains just the basic gadgets. There is an instructional video that demonstrates the basics and users new to this type of program may need to refer to it while working with the software for the first time. In addition to the video, there is a completely indexed help section for each feature in Mind42. This may be accessed by clicking the question mark on the workspace.

One of the most convenient options is the ability to search for an online image from within the program for insertion into the map. Attachments, hyperlinks, and a variety of icons may be added to any node entry. A variety of font options allows for further customization.

Because the application is free, no files may be attached as there is no bandwidth/storage space for them, however there is no limit to the number of maps that a user can create. An unlimited number of collaborators are allowed to work on each project.

Files may be exported in Freemind, Mind42, Mindjet MindManager, RTF, PDF, JPG, or PNG formats. Mind maps may be published into a user’s blog or website easily. Mind maps may be imported from Mind42, Freemind, and Mindmanager.

Mind42 uses Google groups to host a forum for networking and questions as well as a FAQ section.

How does the registration process work?


Registration requires a username, password, and email address. A confirmation email with activation link is sent to the provided address.

What does it cost to use the application?


Mind42 is completely free to use.

Who would you recommend the application to?


Anyone who wishes to work through a problem alone or with any number of partners can benefit from Mind42. The ability to use a visual representative to assist with brainstorming and problem solving is useful in classrooms, corporations, or personal life.

Go to Source

The MooTools JavaScript

window.addEvent('domready',function() {
	var container = $(document.body),
		speed = 1200;
	container.addEvent('mousemove',function(e) {
		var image = new Element('img',{
			src: 'pointer.png',
			styles: {
				position: 'absolute',
				top: e.page.y,
				left: e.page.x
			},
			tween: {
				duration: speed,
				onComplete: function() {
					image.dispose();
				}
			}
		}).inject(container,'top').fade('out');
	});
});

The first step is to pick the container for which you want the mouse trailer to work in and the speed at which you’d like the element to fade out. Apply a mousemove event listen to the container and inject a new element into that container each time the event fires. Use the Event.page.x/y coordinates as your absolute positioning coordinates.

Use this sparingly as using it on every page could be the most annoying thing in the world. Yay! Now we’re all DHTML superstars!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Create a Trailing Mouse Cursor Effect Using MooTools

Related posts:

1. MooTools Typewriter Effect Plugin Upgrade
2. Create a Simple Slideshow Using MooTools, Part II: Controls and Events
3. MooTools Typewriter Effect Plugin
4. Create a Simple Slideshow Using MooTools
5. Create a Simple Slideshow Using MooTools, Part IV: Thumbnails and Captions

Go to Source

The MooTools JavaScript

/* the directive */
Element.alias('addEvent','on');

/* the usage */
$('myElement').on('click',fn);

Using on instead of addEvent is as easy as a quick MooTools Element.alias directive.

It’s weird that I like “on” so much considering a generally don’t like jQuery’s css and attr methods. Oh well. Congrats to the Prototype team for their impending release.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Prototype’s Element.on with MooTools

Related posts:

1. Count MooTools Events Per Element in MooTools 1.2
2. Implement MooTools’ Elements.addEvent in jQuery
3. Using MooTools’ Alias Functionality
4. Implementing Element.hasEvent in MooTools 1.2.3
5. Implementing jQuery’s “One” Functionality in MooTools

Go to Source

1 after() / before()

Sometimes you want to insert something into the DOM, but you don’t have any good hooks to do it with; append() or prepend() aren’t going to cut it and you don’t want to add an extra element or id. These two functions might be what you need. They allow you to insert elements into the DOM just before or after another element, so the new element is a sibling of the older one.

$('#child').after($('<p />')).text('This becomes a sibling of #child'));
$('#child').before($('<p />')).text('Same here, but this is go about #child'));

You can also do this if you’re working primarily with the element you want to insert; just use the insertAfter() or insertBefore functions.

$('<p>I\'ll be a sibling of #child</p>').insertAfter($('#child'));

2 change()

The change() method is an event handler, just like click() or hover(). The change event is for textareas, text inputs, and select boxes, and it will fire when the value of the target element is changed; note that this is different from the focusOut() or blur() event handlers, which fire when the element loses focus, whether its value has changed or not.

The change() event is perfect for client-side validation; it’s much better than blur(), because you won’t be re-validating fields if the user doesn’t change the value.

$('input[type=text]').change(function () {
    switch (this.id) {
        /* some validation code here */
    }
});​​​​​​​​​​

3 Context

Context is both a parameter and a property in jQuery. When collecting elements, you can pass in a second parameter to the jQuery function. This parameter, the context, will usually be a DOM element, and it limits the elements returned to item matching your selector that are children of the context element. That might sound a bit confusing, so check out this example:

<p class="hello">Hello World</p>
<div id="wrap">
    <p class="hello">Hello World</p>
</div>

var hi1 = $('.hello'),
    hi2 = $('.hello', $('#wrap').get(0));

console.group('hi1');
console.log("Number of elements in collection:", hi1.length);
console.log("Context of the collection:", hi1.context);
console.groupEnd();
console.group('hi2');
console.log("Number of elements in collection:", hi2.length);
console.log("Context of the collection:", hi2.context);
console.groupEnd();

So where would this be useful? One place might be inside an event handler function. If you’d like to get an element within the one the event was fired on, you could pass this as the context:

$('ul#options li').click(function () {
    $('a', this) . . .
});

4 data() / removeData()

Have you ever wanted to store some bit of information about an element? You can do that easily with the data() method. To set a value, you can pass in two parameters (a key and a value) or just one (an object).

$('#wrap').data('myKey', 'myValue');
$('#container').data({ myOtherKey : 'myOtherValue', year : 2010 });

To get your data back, just call the method with the key of value you want.

$('#container').data('myOtherKey'); //returns 'myOtherValue'
$('#container').data('year'); //returns 2010

To get all the data that corresponds with an element, call data without any parameters; you’ll get an object with all the keys and values you’ve given to that item.
If you want to delete a key/value pair after you’ve added it to an element, just call removeData(), passing in the correct key.

$('#container').removeData('myOtherKey');

5 queue() / dequeue()

The queue() and dequeue() functions deal with animations. A queue is list of animations to be executed on an element; be default, an element’s queue is named ‘fx.’ Let’s set up a scenario:

HTML

<ul>
  <li id="start">Start Animating</li>
  <li id="reset">Stop Animating</li>
  <li id="add">Add to Queue</li>
</ul>
<div style="width:150px; height:150px; background:#ececec;"></div>

JavaScript

$('#start').click(animateBox);

$('#reset').click(function() {
    $('div').queue('fx', []);
});

$('#add').click(function() {
    $('div').queue( function(){
        $(this).animate({ height : '-=25'}, 2000);
        $(this).dequeue();
    });
});

function animateBox() {
  $('div').slideUp(2000)
           .slideDown(2000)
           .hide(2000)
           .show(2000, animateBox);
}

So, here’s what’s going on: in the animateBox function, we’re setting up a queue of animations; notice that the last one calls back to the function, so this will continually repeat the queue. When we click li#start, the function is called and the queue begins. When we click li#reset, the current animation finishes, and then the div stops animating. What we’ve done with jQuery is set the queue named ‘fx’ (remember, the default queue) to an empty array; essentially, we’ve emptied the queue. And what about when we click li#add? First, we’re calling the queue function on the div; this adds the function we pass into it to the end of the queue; since we didn’t specify a queue as the first parameter, ‘fx’ is used. In that function, we animate the div, and then call dequeue() on the div, which removes this function from the queue and continues the queue; the queue will continue repeating, but this function will not be part of it.

6 delay()

When you’re queuing up a chain of animations, you can use the delay() method to pause the animation for a length of time; pass that time as a parameter in milliseconds.

$('div').hide().delay(2000).show(); // div will stay hidden for 2 seconds before showing.

7 bind(), unbind(), live(), and die()

Did you know that when you add a click event to an element like this . . .

$('#el').click(function () { /*******/ });

. . . you’re really just using a wrapper for the bind() method? To use the bind() method itself, you can pass the event type as the first parameter and then the function as the second.

If you use a lot of events, you can categorize them with namespacing; just add a period after the event name and add your namespace.

$('#el').bind('click', function () { /*******/ });
$('#el').bind('click.toolbarEvents', function () { /*******/ }); // namespaced

You can also assign the same function to multiple events at the same time, by separating them with spaces. So if you wanted to make a hover effect, you could start this way:

$('#el').bind('mouseover mouseout', function () { /*******/ });

You can also pass data to the function if you’d like, by adding a third parameter (in the second position).

$('#el').bind('click', { status : 'user-ready' }, function () {
    switch(event.data.status) {
    /********/
    }
});

Sooner or later, you’ll find yourself inserting element into the DOM via an event handler; however, you’ll find that the event handlers you’ve made with bind (or its wrappers) don’t work for inserted elements. In cases like this, you’ll need to use the live() (or delegate) method; this will add the event handlers to the appropriate inserted elements.

$('.toggle').live(function () {
    /* code */
    $('<span class="toggle">Enable Beta Features</span>').appendTo($('#optionsPanel'));
    /* more code */
});

To remove event handlers created with bind(), use the unbind() method. If you don’t pass it any parameters, it will remove all the handlers; you can pass in the event type to only remove event handlers of that type; to remove events from a specific namespace, add the namespace, or use it alone. If you just want to remove a certain function, pass its name along as the second parameter.

$('button').unbind(); // removes all
$('button').unbind('click'); // removes all clicks
$('button').unbind('.toolbarEvents'); // removes all events from the toolbarEvents namespace
$('button').unbind('click.toolbarEvents'); // removes all clicks from the toolbarEvents namespace
$('button').unbind('click', myFunction); // removes that one handler

Note that you can bind/unbind functions you’ve passed in anonymously; this only works with the functions name.
If you’re trying to unbind an event from inside the function called by the event, just pass unbind() the event object.

$('p').bind('click', function (event) {
    $('p').unbind(event);
} );

You can’t use unbind() for live events; instead, use the die(). Without parameters, it will remove all live events from the element collection; you can also pass it just the event type, of the event type and the function.

$('span').die(); // removes all
$('span').die('mouseover'); // removes all mouseovers
$('span').die('mouseover', fn); // remove that one handler

And now, you can wield jQuery events with deftness and power!

You should also review the delegate() method, as there can be substantial performance benefits to using it over live().

8 eq()

If you’re looking for a specific element within a set of elements, you can pass the index of the element to the eq() method and get a single jQuery element. Pass in a negative index to count back from the end of the set.

var ps = $('p');
console.log(ps.length); // logs 3;
ps.eq(1).addClass('emphasis'); // just adds the class to the second item (index in zero-based)

You can also use :eq() in your selectors; so the previous example could have been done like this:

$('p:eq(1)').addClass('emphasis');

9 get()

When getting a collection of element, jQuery returns them as a jQuery object, so you have access to all the methods. If you just want the raw DOM elements, you can use the get() method.

You can specify an index to get only one element.

alert( $('p') ); // [object Object] - the jquery object
alert( $('p').get(1) ); // [object HTMLParagraphElement]

10 grep()

If you’re not familiar with Unix/Linix shells, you might not have heard the term grep. In a terminal, it’s a text search utility; but here in jQuery, we use it to filter an array of elements. It’s not a method of a jQuery collection; you pass in the array as the first parameter and the filtering function as the second parameter. That filter function takes two parameters itself: an element from the array and its index. That filter function should perform its work and return a true or false value. Be default, all the items that return true will be kept. You can add a third parameter, a boolean, to invert the results and kept the items that return false.

Jeffrey Way did a great quick tip about the $.grep not long ago; check that out to see how to use it!

var nums = '1,2,3,4,5,6,7,8,9,10'.split(',');

nums = $.grep(nums, function(num, index) {
  // num = the current value for the item in the array
  // index = the index of the item in the array
  return num > 5; // returns a boolean
});

console.log(nums) // 6,7,8,9,10

11 Pseudo-Selectors

Sizzle, the CSS Selector engine inside jQuery, offers quite a few pseudo-selectors to make the job of selecting the elements you want easy. Check out these interesting ones:

$(':animated'); // returns all elements currently animating
$(':contains(me)'); // returns all elements with the text 'me'
$(':empty'); // returns all elements with no child nodes or text
$(':parent'); // returns all elements with child nodes or text
$('li:even'); // returns all even-index elements (in this case, <li>s)
$('li:odd'); // can you guess?
$(':header'); // returns all h1 - h6s.
$('li:gt(4)'); // returns all elements with an (zero-based) index greater than the given number
$('li:lt(4)'); // returns all element with an index less than the given number
$(':only-child'); // returns all . . . well, it should be obvious

There are more, of course, but these are the unique ones.

12 isArray() / isEmptyObject() / isFunction() / isPlainObject()

Sometimes you want to make sure the parameter that was passed to a function was the corrent type; these functions make it easy to do. The first three are pretty self explanatory:

$.isArray([1, 2, 3]); // returns true
$.isEmptyObject({}); // returns true
$.isFunction(function () { /****/ }); // returns true

The next one isn’t as obvious; isPlainObject() will return true if the parameter passed in was created as an object literal, or with new Object().

function Person(name) {
	this.name = name
	return this;
}
$.isPlainObject({})); // returns true
$.isPlainObject(new Object()); // returns true
$.isPlainObject(new Person()); // returns false

13 makeArray()

When you create a collection of DOM elements with jQuery, you’re returned a jQuery object; in some situations, you might prefer that this be an array or regular DOM elements; the makeArray() function can do just that.

var ps = $('p');
$.isArray(ps); //returns false;
ps = $.makeArray(ps);
$.isArray(ps); // returns true;

14 map()

The map() method is remotely similar to grep(). As you might expect, it takes one parameter, a function. That function can have two parameters: the index of the current element and the element itself. Here’s what happens: the function that you pass in will be run once for each item in the collection; whatever value is returned from that function takes the place of the item it was run for in the collection.

$('ul#nav li a').map(function() {
  return $(this).attr('title');
});  // now the collection is the link titles
// this could be the beginning of a tooltip plugin.

15 parseJSON()

If you’re using $.post or $.get—and in other situations that you work with JSON strings—you’ll find the parseJSON function useful. It’s nice that this function uses the browsers built-in JSON parser if it has one (which will obviously be faster).

$.post('somePage.php', function (data) {
    /*****/
data =  $.parseJSON(data);
    /*****/
});

16 proxy()

If you have a function as a property of an object, and that function uses other properties of the object, you can’t call that function from within other functions and get the right results. I know that was confusing, so let’s look at a quick example:

var person = {
  name : "Andrew",
  meet : function () {
    alert('Hi! My name is ' + this.name);
  }
};
person.meet();
$('#test').click(person.meet);

By itself, person.meet() will alert correctly; but when it’s called by the event handler, it will alert “Hi! My name is undefined.” This is because the function is not being called in the right context. To fix this, we can use the proxy() function:

$('#test').click($.proxy(person.meet, person));
// we could also do $.proxy(person, "meet")

The first parameter of the proxy function is the method to run; the second is the context we should run it in. Alternatively, we can pass the context first, and the method name as a string second. Now you’ll find that the function alerts correctly.

Prefer a video quick tip on $.proxy?

17 replaceAll() / replaceWith()

If you’d like to replace DOM elements with other ones, here’s how to do it. We can call replaceAll() on elements we’ve collected or created, passing in a selector for the elements we’d like to replace. In this example, all elements with the error class will be replaced with the span we’ve created.

$('<span class="fixed">The error has been corrected</span>').replaceAll('.error');

The replaceWith() method just reverses the selectors; find the ones you want to replace first:

$('.error').replaceWith('<span class="fixed">The error has been corrected</span>');

You can also pass these two methods functions that will return elements or HTML strings.

18 serialize() / serializeArray()

The serialize() method is what to use for encoding the values in a form into a string.

HTML

<form>
    <input type="text" name="name" value="John Doe" />
    <input type="text" name="url" value="http://www.example.com" />
</form>

JavaScript

console.log($('form').serialize());​​​ // logs : name=John+Doe&url=http%3A%2F%2Fwww.example.com

You can use serializeArray() to turn the form values into an array of objects instead of a string:

console.log($('form').serializeArray());​​​
// logs : [{ name : 'name', value : 'John Doe'} , { name : 'url', value : 'http://www.example.com' } ]

19 siblings()

You can probably guess what the siblings() method does; it will return a collection of the siblings of the whatever items are in your original collections:

<div> . . . </div>
<p> . . . </p>
<span> . . . </span>

$('p').siblings(); // returns <div>, <span>

20 wrap() / wrapAll() / wrapInner()

These three functions make it easy to wrap elements in other elements. First off, I’ll mention that all three take one parameter: either an element (which is an HTML string, a CSS selctor, a jQuery object, or a DOM element) or a function that returns an element.
The wrap() method wraps each item in the collection with the assigned element:

$('p').wrap('<div class="warning" />'); // all paragraphs are now wrapped in a div.warning

The wrapAll() will wrap one element around all the elements in the collection; this means that the elements in the collection will be moved to a new spot in the DOM; they’ll line up at the place of the first element in the collection and be wrapped there:

HTML, Before:

<p>
    <span> . . . </span>
    <span class="moveMe"> . . . </span>
    <span class="moveMe"> . . . </span>
</p>
<p>
    <span> . . . </span>
    <span class="moveMe"> . . . </span>
    <span class="moveMe"> . . . </span>
</p>

JavaScript

$('.moveMe').wrapAll(document.createElement('div'));

HTML, After:

<p>
    <span> . . . </span>
    <div>
        <span class="moveMe"> . . . </span>
        <span class="moveMe"> . . . </span>
        <span class="moveMe"> . . . </span>
        <span class="moveMe"> . . . </span>
    </div>
</p>
<p>
    <span> . . . </span>
</p>

Finally, the wrapInner function wraps everything inside each element in the collecting with the given element:

HTML, Before:

<p>
    <span> . . . </span>
    <span> . . . </span>
</p>

JavaScript:

$('p').wrapInner($('<div />'));

HTML, After:

<p>
    <div>
        <span> . . . </span>
        <span> . . . </span>
    </div>
</p>

Conclusion

Well, now you’ve got more than twenty new jQuery features to play with on your next project; have fun with them!

Go to Source

I’ve been creating a lot of slideshow posts lately. Why, you ask? Because they help me get chicks. A quick formula for you:

var numChicks = $$('.slideshow').length; //simple!

The following code snippet will show you how to create a simple slideshow with MooTools; the script will also preload the images and feature a progress message. Why preload images? They make the slideshow more elegant and you can avoid an onLoad mess. Oh, and chicks…loads and loads of chicks.

The HTML

<div id="slideshow-holder">
	<div id="progress"></div>
</div>

Basically just two DIVs which will hold content.

The CSS

#slideshow-holder	{ width:600px; height:400px; background:url(spinner.gif) center center no-repeat #fff; position:relative; }
#progress			{ position:absolute; width:100%; text-align:center; color:#999; top:225px; }

The image holder is given set dimensions, starts with a background spinner, and its position set to relative; the images will all be positioned absolutely. The progress holder is set right below the spinner.

The MooTools Javascript

window.addEvent('domready',function() {
	/* preloading */
	var imagesDir = 'epics/';
	var images = ['2.jpg','3.jpg','1.jpg','4.jpg','5.jpg'];
	var holder = $('slideshow-holder');
	images.each(function(img,i){ images[i] = imagesDir + '' + img; }); //add dir to images
	var progressTemplate = 'Loading image {x} of ' + images.length;
	var updateProgress = function(num) {
		progress.set('text',progressTemplate.replace('{x}',num));
	};
	var progress = $('progress');
	updateProgress('text','0');
	var loader = new Asset.images(images, {
		onProgress: function(c,index) {
			updateProgress('text',index + 1);
		},
		onComplete: function() {
			var slides = [];
			/* put images into page */
			images.each(function(im) {
				slides.push(new Element('img',{
					src:im,
					width: 600,
					height: 400,
					styles: {
						opacity:0,
						top:0,
						left:0,
						position:'absolute',
						'z-index': 10
					}
				}).inject(holder));
				holder.setStyle('background','url(logo.png) center 80px no-repeat');
			});
			var showInterval = 5000;
			var index = 0;
			progress.set('text','Images loaded.  MooTools FTW.');
			(function() {slides[index].tween('opacity',1); }).delay(1000);
			var start = function() {
				(function() {
					holder.setStyle('background','');
					slides[index].fade(0);
					++index;
					index = (slides[index] ? index : 0);
					slides[index].fade(1);
				}).periodical(showInterval);
			};

			/* start the show */
			start();
		}
	});
});

The first set of variable declarations represent basic settings for the preloader: images, preload-message-updating, etc. We pass our Asset.images instance an array of images. When each image loads, we update the status message. When every image has loaded, we remove the status message and start the slideshow. That’s it!

Of course the above could be turned into the class….I’m just slightly lazy…Feel free to turn it into a class and share with everyone!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Create a Quick MooTools Slideshow with Preloading Images

Related posts:

1. Create a Simple Slideshow Using MooTools
2. Create a Simple Slideshow Using MooTools, Part II: Controls and Events
3. MooTools Image Preloading with Progress Bar
4. Create a Simple Slideshow Using MooTools, Part IV: Thumbnails and Captions
5. Create a Simple Slideshow Using MooTools, Part III: Creating a Class

Go to Source

Code “Inline” First, Then Class-ize; Don’t Force It

The number one tip I give to MooTools Class rookies is this: create the desired class functionality before turning it into a class. Once you have the code working using “inline” MooTools javascript, evaluate what you have. You may decide that your functionality is too specific to the task at hand that making a Class isn’t the right choice.

If you do think you should turn the code into a class, take a look at all of your initial “var {key} = {value}” declarations — those will likely be your arguments and options. Take any repeated code and turn them into class methods. Do the same for specific functionalities the Class should have. Here’s a very basic example:

window.addEvent('domready',function() {
	/* settings */
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	var toc = [];
	var tocWidth = 20;
	var tocActive = 'toc-active';

	/* new: starts the show */
	var start = function() { interval = show.periodical(showDuration); };
	var stop = function() { $clear(interval); };
	/* worker */
	var show = function(to) {
		images[currentIndex].fade('out');
		toc[currentIndex].removeClass(tocActive);
		images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
		toc[currentIndex].addClass(tocActive);
	};

	/* new: control: table of contents */
	images.each(function(img,i){
		toc.push(new Element('a',{
			text: i+1,
			href: '#',
			'class': 'toc' + (i == 0 ? ' ' + tocActive : ''),
			events: {
				click: function(e) {
					if(e) e.stop();
					stop();
					show(i);
				}
			},
			styles: {
				left: ((i + 1) * (tocWidth + 10))
			}
		}).inject(container));
		if(i > 0) { img.set('opacity',0); }
	});

	/* new: control: next and previous */
	var next = new Element('a',{
		href: '#',
		id: 'next',
		text: '>>',
		events: {
			click: function(e) {
				if(e) e.stop();
				stop(); show();
			}
		}
	}).inject(container);
	var previous = new Element('a',{
		href: '#',
		id: 'previous',
		text: '<<',
		events: {
			click: function(e) {
				if(e) e.stop();
				stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
			}
		}
	}).inject(container);

	/* new: control: start/stop on mouseover/mouseout */
	container.addEvents({
		mouseenter: function() { stop(); },
		mouseleave: function() { start(); }
	});

	/* start once the page is finished loading */
	window.addEvent('load',function(){
		start();
	});
});

And now the Class version:

var SimpleSlideshow = new Class({
	options: {
		showControls: true,
		showDuration: 3000,
		showTOC: true,
		tocWidth: 20,
		tocClass: 'toc',
		tocActiveClass: 'toc-active'
	},
	Implements: [Options,Events],
	initialize: function(container,elements,options) {
		//settings
		this.container = $(container);
		this.elements = $$(elements);
		this.currentIndex = 0;
		this.interval = '';
		if(this.options.showTOC) this.toc = [];

		//assign
		this.elements.each(function(el,i){
			if(this.options.showTOC) {
				this.toc.push(new Element('a',{
					text: i+1,
					href: '#',
					'class': this.options.tocClass + '' + (i == 0 ? ' ' + this.options.tocActiveClass : ''),
					events: {
						click: function(e) {
							if(e) e.stop();
							this.stop();
							this.show(i);
						}.bind(this)
					},
					styles: {
						left: ((i + 1) * (this.options.tocWidth + 10))
					}
				}).inject(this.container));
			}
			if(i > 0) el.set('opacity',0);
		},this);

		//next,previous links
		if(this.options.showControls) {
			this.createControls();

		}
		//events
		this.container.addEvents({
			mouseenter: function() { this.stop(); }.bind(this),
			mouseleave: function() { this.start(); }.bind(this)
		});

	},
	show: function(to) {
		this.elements[this.currentIndex].fade('out');
		if(this.options.showTOC) this.toc[this.currentIndex].removeClass(this.options.tocActiveClass);
		this.elements[this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex+1 : 0))].fade('in');
		if(this.options.showTOC) this.toc[this.currentIndex].addClass(this.options.tocActiveClass);
	},
	start: function() {
		this.interval = this.show.bind(this).periodical(this.options.showDuration);
	},
	stop: function() {
		$clear(this.interval);
	},
	//"private"
	createControls: function() {
		var next = new Element('a',{
			href: '#',
			id: 'next',
			text: '>>',
			events: {
				click: function(e) {
					if(e) e.stop();
					this.stop();
					this.show();
				}.bind(this)
			}
		}).inject(this.container);
		var previous = new Element('a',{
			href: '#',
			id: 'previous',
			text: '<<',
			events: {
				click: function(e) {
					if(e) e.stop();
					this.stop();
					this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
				}.bind(this)
			}
		}).inject(this.container);
	}
});

See how easy the transition is when you have the inline code in front of you? Simple!

Add Events When Possible

Adding events to your classes gives a completely new level of control over the class functionality. Consider my Overlay class. I spent 95% of the time creating the plugin functionality and 5% implementing events but I consider events essential to the Overlay. Here’s a quick example of implementing events:

//.....
Implements: [Options,Events],
open: function() {
	this.fireEvent('open');
	//do stuff
},
//.....

Now my Overlay class allows you fire events at 4 different times. More flexible and a perfect usage of events.

Evaluate Options vs. Arguments

Judge your list of options and your class’ primary responsibilities to determine if all of the options should be kept as options and not as arguments, and visa versa. When I come to a 50/50 decision I choose to make the parameter an option. If the class cannot live without the given option/argument and there’s no suitable default, keep it as an argument.

Chaining: return this;

One of the great advantages of using a javascript frameworks and classes is the ability to chain method class to make your code shorter. And implementing that type of functionality is so easy!

//.....
store: function(key,value) {
	this.data[key] = value;
	return this;
}
//.....

Don’t let your methods end with nothing — return this!

Put it in the Forge!

Share your awesome plugin by posting it in the MooTools Forge. Sharing your plugins in the Forge allows you to easily get feedback, improvements, and requests.

There you have it. Feel free to share any of your tips!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

MooTools Class Creation Tips II

Related posts:

1. MooTools Class Creation Tips
2. Create a Simple Slideshow Using MooTools, Part III: Creating a Class
3. MooTools-Like Element Creation in jQuery
4. Check for Function and Class Existence Using PHP
5. MooTools 1.2 Tooltips: Customize Your Tips

Go to Source

In my previous two slideshow posts, Create a Simple Slideshow Using MooTools and Create a Simple Slideshow Using MooTools, Part II: Controls and Events, I showed you how to create a slideshow using “inline” MooTools javascript. Today we’ll take that code and transition it into a MooTools class.

The Original Inline Code

window.addEvent('domready',function() {
	/* settings */
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	var toc = [];
	var tocWidth = 20;
	var tocActive = 'toc-active';

	/* new: starts the show */
	var start = function() { interval = show.periodical(showDuration); };
	var stop = function() { $clear(interval); };
	/* worker */
	var show = function(to) {
		images[currentIndex].fade('out');
		toc[currentIndex].removeClass(tocActive);
		images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
		toc[currentIndex].addClass(tocActive);
	};

	/* new: control: table of contents */
	images.each(function(img,i){
		toc.push(new Element('a',{
			text: i+1,
			href: '#',
			'class': 'toc' + (i == 0 ? ' ' + tocActive : ''),
			events: {
				click: function(e) {
					if(e) e.stop();
					stop();
					show(i);
				}
			},
			styles: {
				left: ((i + 1) * (tocWidth + 10))
			}
		}).inject(container));
		if(i > 0) { img.set('opacity',0); }
	});

	/* new: control: next and previous */
	var next = new Element('a',{
		href: '#',
		id: 'next',
		text: '>>',
		events: {
			click: function(e) {
				if(e) e.stop();
				stop(); show();
			}
		}
	}).inject(container);
	var previous = new Element('a',{
		href: '#',
		id: 'previous',
		text: '<<',
		events: {
			click: function(e) {
				if(e) e.stop();
				stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
			}
		}
	}).inject(container);

	/* new: control: start/stop on mouseover/mouseout */
	container.addEvents({
		mouseenter: function() { stop(); },
		mouseleave: function() { start(); }
	});

	/* start once the page is finished loading */
	window.addEvent('load',function(){
		start();
	});
});

We’ll be starting from the above code which was used in the second post.

Step 1: Create a Basic Class Outline

The following MooTools Class template can be downloaded here.

var yourClass = new Class({

	//implements
	Implements: [Options],

	//options
	options: {
		yourOption: ''
	},

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
	},

	//a method that does whatever you want
	yourMethod: function() {

	}

});

Step 2: Variables Become Options, Arguments

Remember that our class needs to be flexible (duh, that’s the reason we create classes!). For that reason, we’ll transition as many of the variables as we can into options for the class. Since the container and elements of the slideshow are mandatory (we can’t create a slideshow without them!), we’ll make those arguments.

var SimpleSlideshow = new Class({
	options: {
		showControls: true,
		showDuration: 3000,
		showTOC: true,
		tocWidth: 20,
		tocClass: 'toc',
		tocActiveClass: 'toc-active'
	},
	Implements: [Options,Events],
	initialize: function(container,elements,options) {
		//settings
		this.container = $(container);
		this.elements = $$(elements);
		this.currentIndex = 0;
		this.interval = '';
		if(this.options.showTOC) this.toc = [];

		//assign
		this.elements.each(function(el,i){
			if(this.options.showTOC) {
				this.toc.push(new Element('a',{
					text: i+1,
					href: '#',
					'class': this.options.tocClass + '' + (i == 0 ? ' ' + this.options.tocActiveClass : ''),
					events: {
						click: function(e) {
							if(e) e.stop();
							this.stop();
							this.show(i);
						}.bind(this)
					},
					styles: {
						left: ((i + 1) * (this.options.tocWidth + 10))
					}
				}).inject(this.container));
			}
			if(i > 0) el.set('opacity',0);
		},this);

		//next,previous links
		if(this.options.showControls) {
			this.createControls();

		}
		//events
		this.container.addEvents({
			mouseenter: function() { this.stop(); }.bind(this),
			mouseleave: function() { this.start(); }.bind(this)
		});

	},

//...

The usefulness of our class is largely dependent upon the options we bake into our plugin. Don’t go overboard though — it’s easy to bloat your plugin by allowing for too many options.

Step 3: Functions Become Methods

This step is really easy: take the global functions we created (start, stop, etc.) and make them the methods within the class. The only big change in doing this will be changing variables references to “this.{variable}” or “this.options.{variable}”.

//...
show: function(to) {
	this.elements[this.currentIndex].fade('out');
	if(this.options.showTOC) this.toc[this.currentIndex].removeClass(this.options.tocActiveClass);
	this.elements[this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex+1 : 0))].fade('in');
	if(this.options.showTOC) this.toc[this.currentIndex].addClass(this.options.tocActiveClass);
},
start: function() {
	this.interval = this.show.bind(this).periodical(this.options.showDuration);
},
stop: function() {
	$clear(this.interval);
}
//...

Step 4: Controls

We’ll use another custom, private method to generate the code for the controls (next,previous):

//...
,
//"private"
createControls: function() {
	var next = new Element('a',{
		href: '#',
		id: 'next',
		text: '>>',
		events: {
			click: function(e) {
				if(e) e.stop();
				this.stop();
				this.show();
			}.bind(this)
		}
	}).inject(this.container);
	var previous = new Element('a',{
		href: '#',
		id: 'previous',
		text: '<<',
		events: {
			click: function(e) {
				if(e) e.stop();
				this.stop();
				this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
			}.bind(this)
		}
	}).inject(this.container);
}
//...

Pulling It All Together

The following is our completed class:

var SimpleSlideshow = new Class({
	options: {
		showControls: true,
		showDuration: 3000,
		showTOC: true,
		tocWidth: 20,
		tocClass: 'toc',
		tocActiveClass: 'toc-active'
	},
	Implements: [Options,Events],
	initialize: function(container,elements,options) {
		//settings
		this.container = $(container);
		this.elements = $$(elements);
		this.currentIndex = 0;
		this.interval = '';
		if(this.options.showTOC) this.toc = [];

		//assign
		this.elements.each(function(el,i){
			if(this.options.showTOC) {
				this.toc.push(new Element('a',{
					text: i+1,
					href: '#',
					'class': this.options.tocClass + '' + (i == 0 ? ' ' + this.options.tocActiveClass : ''),
					events: {
						click: function(e) {
							if(e) e.stop();
							this.stop();
							this.show(i);
						}.bind(this)
					},
					styles: {
						left: ((i + 1) * (this.options.tocWidth + 10))
					}
				}).inject(this.container));
			}
			if(i > 0) el.set('opacity',0);
		},this);

		//next,previous links
		if(this.options.showControls) {
			this.createControls();

		}
		//events
		this.container.addEvents({
			mouseenter: function() { this.stop(); }.bind(this),
			mouseleave: function() { this.start(); }.bind(this)
		});

	},
	show: function(to) {
		this.elements[this.currentIndex].fade('out');
		if(this.options.showTOC) this.toc[this.currentIndex].removeClass(this.options.tocActiveClass);
		this.elements[this.currentIndex = ($defined(to) ? to : (this.currentIndex < this.elements.length - 1 ? this.currentIndex+1 : 0))].fade('in');
		if(this.options.showTOC) this.toc[this.currentIndex].addClass(this.options.tocActiveClass);
	},
	start: function() {
		this.interval = this.show.bind(this).periodical(this.options.showDuration);
	},
	stop: function() {
		$clear(this.interval);
	},
	//"private"
	createControls: function() {
		var next = new Element('a',{
			href: '#',
			id: 'next',
			text: '>>',
			events: {
				click: function(e) {
					if(e) e.stop();
					this.stop();
					this.show();
				}.bind(this)
			}
		}).inject(this.container);
		var previous = new Element('a',{
			href: '#',
			id: 'previous',
			text: '<<',
			events: {
				click: function(e) {
					if(e) e.stop();
					this.stop();
					this.show(this.currentIndex != 0 ? this.currentIndex -1 : this.elements.length-1);
				}.bind(this)
			}
		}).inject(this.container);
	}
});

…and the usage:

/* usage */
window.addEvent('domready',function() {
	var slideshow = new SimpleSlideshow('slideshow-container','#slideshow-container img');
	slideshow.start();
});

MooTools Classes FTW!

Now we have a reusable, flexible MooTools class that you can use on any website you create. Hell, you could even share it on the Forge for all to use! How was it? Any questions about creating MooTools classes?

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Create a Simple Slideshow Using MooTools, Part III: Creating a Class

Related posts:

1. Create a Simple Slideshow Using MooTools, Part II: Controls and Events
2. Create a Simple Slideshow Using MooTools
3. Simple MooTools Event / Class Binding
4. Introducing MooTools Dotter
5. Using MooTools Periodicals

Go to Source

Chris Coyier authored a post titled Better Pull Quotes: Don’t Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content — instead he uses jQuery to dynamically create the pull quotes. The following is the MooTools method for doing so.

The HTML

<p><span class="pull-me">As a MooTools "insider", however, I'm excited for what the MooTools team will bring to the table during 2010.</span> We'll be launching the Forge (our public plugin repository), releasing MooTools 2, continuing to grow MooTools More, featuring more community work, and much more. MooTools FTW!</p>

The HTML above features a paragraph of content with a SPAN tag wrapping what I’d like to be the pull quote.

The CSS

.quote { padding:20px; margin:0 0 20px 20px; font-size:20px; font-style:italic; background:#eee; color:#999; display:block; width:200px; float:right; }

You may style the quote any way you’d like. These elements are traditionally large in text with italicized text and a different background color.

The MooTools Javascript

window.addEvent('domready',function() {
	//grab all quotes
	$$('span.pull-me').each(function(span) {
		//inject styled quote into page
		new Element('span',{
			'class': 'quote',
			text: span.get('text')
		}).inject(span.getParent(),'top');
	});
});

We find each element with a “pull-me” CSS class and generate a new element with our “quote” class. We then inject the new element into the original element’s parent. That’s all!

Chris did a great job with the execution of his idea. This is a technique that will likely be used well into the future.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Better Pull Quotes with MooTools

Related posts:

1. Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3
2. Bold Web Predictions for 2010
3. MooTools HTML Police: dwMarkupMarine
4. Method Chaining in MooTools and PHP
5. dwImageProtector Plugin for jQuery

Go to Source

WTF is Event Delegation?

Event delegation is the process of assigning an event listener to a parent for all of its children instead of assigning the same event to every child.

Some Sample HTML

<ul id="link-list">
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 1</a></li>
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 2</a></li>
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 3</a></li>
</ul>

A list with 3 list item elements which contain a link. For the sake of my example, this list will have list items added to it and we want an alert to pop up any time a link within the list is clicked.

The MooTools Javascript Event Delegation Syntax

window.addEvent('domready',function() {
	/* delegate */
	document.id('link-list').addEvent('click:relay(a)', function(e){
		e.stop();
		alert('you clicked a link!');
	});
	/*
		Add link to show event delegation works!
		Notice how we haven't assigned an event to this specific element.
		We already added the event to the list element itself
	*/
	document.id('add-link').addEvent('click',function() {
		var li = new Element('li').inject('link-list');
		var link = new Element('a',{ text:'David Walsh Blog', href:'http://davidwalsh.name'}).inject(li);
	});
});

All you need to do is add :relay to the parent selector and place the “children” match inside the relay pseudo selector. You’ll probably question how :relay works because the “:” syntax is used for pseudo selectors. The Element.Delegation javascript download overwrites the addEvent, removeEvent, and fireEvent methods to accommodate for the :relay syntax.

Event Delegation Replaces…

var links = document.id('link-list').getElements('li');
links.each(function(link) {
	link.addEvent('click',function() {
		//assign actions here
	});
})

Why collect and iterate through elements to add events when you can simply use event delegation?

Event delegation is a great way to avoid repeating the same event assignments for elements within a parent element, especially when you are adding elements into the page dynamically. If you’ve not upgraded to MooTools 1.2.4 yet, I hope this is just the kick in the pants you need!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Event Delegation with MooTools

Related posts:

1. MooTools Event Delegation
2. Prevent Default Event Actions Using MooTools 1.2
3. Implementing jQuery-Like Event Syntax in MooTools
4. dwClickable: Entire Block Clickable Using MooTools 1.2
5. Animated Ajax Record Deletion Using MooTools

Go to Source

Events play a huge role in javascript. I can’t name one website I’ve created in the past two years that hasn’t used javascript event handling on some level. Ask yourself: how often do I inject elements into the DOM and not add an event to them? For me it’s very rare. For this reason I’m proud and excited for the release of MooTools 1.2.4’s Event.Delegation code.

WTF is Event Delegation?

Event delegation is the process of assigning an event listener to a parent for all of its children instead of assigning the same event to every child.

Some Sample HTML

<ul id="link-list">
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 1</a></li>
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 2</a></li>
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 3</a></li>
</ul>

A list with 3 list item elements which contain a link. For the sake of my example, this list will have list items added to it and we want an alert to pop up any time a link within the list is clicked.

The MooTools Javascript Event Delegation Syntax

window.addEvent('domready',function() {
	/* delegate */
	document.id('link-list').addEvent('click:relay(a)', function(e){
		e.stop();
		alert('you clicked a link!');
	});
	/*
		Add link to show event delegation works!
		Notice how we haven't assigned an event to this specific element.
		We already added the event to the list element itself
	*/
	document.id('add-link').addEvent('click',function() {
		var li = new Element('li').inject('link-list');
		var link = new Element('a',{ text:'David Walsh Blog', href:'http://davidwalsh.name'}).inject(li);
	});
});

All you need to do is add :relay to the parent selector and place the “children” match inside the relay pseudo selector. You’ll probably question how :relay works because the “:” syntax is used for pseudo selectors. The Element.Delegation javascript download overwrites the addEvent, removeEvent, and fireEvent methods to accommodate for the :relay syntax.

Event Delegation Replaces…

var links = document.id('link-list').getElements('li');
links.each(function(link) {
	link.addEvent('click',function() {
		//assign actions here
	});
})

Why collect and iterate through elements to add events when you can simply use event delegation?

Event delegation is a great way to avoid repeating the same event assignments for elements within a parent element, especially when you are adding elements into the page dynamically. If you’ve not upgraded to MooTools 1.2.4 yet, I hope this is just the kick in the pants you need!

Send article as PDF to:

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Event Delegation with MooTools

Related posts:

1. MooTools Event Delegation
2. Prevent Default Event Actions Using MooTools 1.2
3. Implementing jQuery-Like Event Syntax in MooTools
4. MooTools Text Flipping
5. Simple MooTools Event / Class Binding

Go to Source

Many times you’ll see a form dynamically change available values based on the value of a form field. For example, a “State” field will change based on which Country a user selects. What annoys me about these forms is that they’ll often do an AJAX request to grab the states but wont show any indicator to the user that something is happening. We’re going to use MooTools to add an AJAX spinner image next to form fields that perform such AJAX requests.

The XHTML

<select class="ajax">
	<option value="">-- Select a Site--</option>
	<option value="David Walsh Blog">David Walsh Blog</option>
	<option value="Script & Style">Script & Style</option>
	<option value="Band Website Template">Band Website Template</option>
</select>

<br /><br />

<input type="text" id="my-text" class="ajax" />

Add the “ajax” class (or any class for that matter) to the elements you’d like the spinner to display by.

The MooTools Javascript

window.addEvent('domready',function() {
	//inject image
	var spinner = new Element('img',{
		src: 'move-spinner.gif',
		styles: {
			position:'absolute'
		},
		opacity: 0
	}).inject(document.body);
	//form element events
	$$('.ajax').each(function(el) {
		//get coordinates
		var coords = el.getCoordinates(document.body);
		//ajax request object
		var request = new Request({
			url: '',
			method: 'post',
			onRequest: function() {
				spinner.setStyles({
					left: coords.right + 10,
					top: coords.top + 5
				}).fade('in');
			},
			onComplete: function() {
				spinner.fade('out');
			}
		});
		//change event
		el.addEvent('change',function() {
			//ajax request
			request.send({
				data: {
					ajax: 1,
					value: el.get('value')
				}
			});
		});
	});
});

We first add the spinner image to the document but hide it right away. When any of the form elements with the “ajax” class changes value, we move the spinner image to the right of the element. Then we use Reqeust’s onRequest and onComplete methods to show and hide the spinner. Simple!

Look forward to a jQuery version tomorrow.

Send article as PDF to:

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Form Element AJAX Spinner Attachment Using MooTools

Related posts:

1. Ajax Username Availability Checker Using MooTools 1.2
2. PHP Form Submission: Recognize Image Input Buttons
3. Create a NoScript Compatible Select Form Element with an onChange Event
4. Caching AJAX Results in Javascript
5. Submit a Form to a New Window

Go to Source

The XHTML

<div id="console"></div>

We need a wrapper DIV that we’ll consider a console.

The CSS

#console pre	{ font-family:Courier; font-size:11px; background:#000; color:lightgreen; margin:0 0 20px 0; padding:10px; }
#console h3		{ color:navy; padding:3px 0; }

I like making this look like a command-line console.

The MooTools Javascript

window.addEvent('domready',function() {
	new Hash(window).each(function(value,property) {
		new Element('h3',{ text: property }).inject('console');
		new Element('pre',{ text: value }).inject('console');
	});
});

Depending on what you have loaded into the page as a javascript framework, the amount stored within the window object will vary.

Fun! You could opt to just log all of this to Firebug’s console but the above works in all browsers.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

The MooTools Javascript

var FontChecker = new Class({
	/* implements */
	Implements: [Options],
	/* options */
	options: {
		fakeFont: '__RUBBUSH_FONT__',
		testString: 'abcdefghijklmnopqrstuvwxyz'
	},
	/* initialization */
	initialize: function(options) {
		//set options
		this.setOptions(options);
	},
	/* a method that does whatever you want */
	check: function(desiredFont) {
		/* create a hidden element */
		var element = new Element('span',{
			styles: {
				visibility: 'hidden',
				'font-family': this.options.fakeFont
			},
			html: this.options.testString
		}).inject(document.body);
		/* apply a fake font, get width */
		var width = element.getCoordinates().width;
		/* apply desired font */
		element.setStyle('font-family', desiredFont);
		var new_width = element.getCoordinates().width;
		/* take our temp element out of the DOM */
		element.dispose();
		/* compare widths to see check if font is available */
		return (width !== new_width);
	}
});

My code follows the same logic as FontAvailable:

• inject a hidden inline element with some garbage text and a fake font
• record the calculated width of the element
• set the element’s font to the desired font
• compare the widths and return whether they are the same

The Usage

/* when the dom is ready */
window.addEvent('domready',function() {
	var fc = new FontChecker();
	/* use it...or lose it? */
	$('start').addEvent('click',function() {
		$$('#font-list li').each(function(el) {
			el.setStyle('color', fc.check(el.get('text')) ? 'green' : 'red');
		});
	});
});

You may check as many fonts as you’d like using one instance by using the “check” method.

The accuracy of this type of check can never be 100% because two fonts could theoretically have the same calculated width. This methods does, however, provide a fairly accurate result.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!