Category Archives: MooTools

A rough guide to upgrading from MooTools 1.1

Before you read this – please read the <a href=”http://mootools.net/blog/2009/12/31/mootools-1-1-upgrade-layer-beta/”>post on the official MooTools site</a>.
Before you read this – please read the post on the official MooTools site.

I’ve recently been working on the upgrade layer for MooTools, that allows users of MooTools 1.1 to easily upgrade to the latest version of our favourite framework. If you have a complex site, the following may not be relevant, but hopefully following the steps below will help the majority of users to update their code.

Continue reading

A MooTools Demo thingy (and some Fx)

I’ve spent quite a bit of time recently working on changes to the MooTools documentation. Now I have a blog up I wanted to write some demos but didn’t want it to be one long article; I wanted to break the article into sections.

So I made this little demo thingy and thought I’d see what people thought of it.

How it works

First off I separate each ‘slide’ with a <div class=”section”>. I’m also using <pre> tags and the excellent Lighter.js for code highlighting.

I then have a small class that lets you navigate through the ‘slides’. Each time a slide is shown, the HTML, CSS and JavaScript are injected into an iframe (which I called a ‘stage’) and you can show the stage by adding a class of ‘showstage’ to the section.

The code is really messy at the moment but it is more of a proof-of-concept than a finished class. I’ll definitely clean it up, and I may in time make it into a WordPress plugin – I’d also love it to be easily used with MooShell.

Anyway, have a play and tell me what you think!

A demo of the demo thingy

Really simple animations with .tween() and .morph()

MooTools effects are really powerful and really easy to use. The easiest way to do basic animations is using the Fx.Tween and Fx.Morph element methods.

Let’s start off with a couple of simple boxes:

HTML

CSS

.box {
	height: 100px;
	position: absolute;
	width: 100px;
}
#box1 {
	background-color: #222;
	border: 1px solid #ccc;
	left: 20px;
	top: 40px;
}
#box2 {
	background-color: #94CC25;
	border: 1px solid #222;
	left: 450px;
	top: -3px;
}

Changing a single property

If you want to just change a single property of an element, like change a background colour or fade an element out, you can use a tween.

JavaScript

$('runscript1').addEvent('click', function(e){
	e.stop();
	$('box1').tween('background-color', '#f00');
	$('box2').tween('opacity', 0.7);
});

$('runscript2').addEvent('click', function(e){
	e.stop();
	$('box1').tween('top', 50);
	$('box2').tween('left', 300);
});

Use .morph() to change more than one property

JavaScript

$('runscript').addEvent('click', function(e){
	e.stop();
	$('box1').morph({
		'background-color': '#00f',
		'left': 400,
		'top': 15
	});
	$('box2').morph({
		'background-color': '#ff0',
		'border-color': '#94cc25',
		'border-width': 12,
		'left': 30,
		'top': 5
	});
});

Chaining

If you want to chain a series of effects, the Fx.Morph class has an option called ‘link’. You can set it to ‘chain’ (as well as some other options) like so:

JavaScript

$('runscript').addEvent('click', function(e){
	e.stop();
	$('box1').set('morph', {
		duration: 'long',
		link: 'chain',
		transition: 'bounce:out'
	});
	$('box1').morph({
		'background-color': '#00f',
		'left': 400,
		'top': 15
	}).morph({
		'background-color': '#ff0',
		'border-color': '#94cc25',
		'border-width': 12,
		'left': 30,
		'top': 5
	});
});

.fade() and .highlight() – handy helpers

JavaScript

$('fadein').addEvent('click', function(){
	$('box1').fade('in');
});
$('fadeout').addEvent('click', function(){
	$('box1').fade('out');
});
$('fadetoggle').addEvent('click', function(){
	$('box1').fade('toggle');
});
$('fadehalf').addEvent('click', function(){
	$('box1').fade(0.5);
});

$('highlight').addEvent('click', function(){
	$('box2').highlight();
});
$('highlightred').addEvent('click', function(){
	$('box2').highlight('#ff0000');
});
$$('A').addEvent('click', function(e){
	e.stop();
});