30 days of
MooTools

30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.

The lessons are actually 23, as they where interrupted after this day.

As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.

The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.

The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.

Idea Paolo Manganiello. Licence CC 3.0.

Displaying elements with Fx.Slide

Welcome to day 23 of 30 days of Mootools 1.2 tutorials. If you haven’t already, be sure to check out the rest of our mootools series. Continuing with our tutorials about the Fx plugins, we are going to take a look at Fx.Slide. This plugin lets you display content by sliding it into view. It is very simple to use and makes a great addition to your UI toolkit.

The Basics

Like all the other classes we have looked at, the first thing you need to do is initiate a new instance of the Fx.Slide class and apply it to an element.

First, lets set up our html for the slide element.

<div id="slide_element" class="slide">Here is some content to slide.</div>

And our css doesn’t need to be anything fancy.

.slide {
	margin: 20px 0; 
	padding: 10px;
	width: 200px;
	background-color: #DAF7B4;
}

Finally, we initiate a new instance of Fx.Slide and pass it our element variable.

var slideElement = $('slide_element');
var slideVar = new Fx.Slide(slideElement, {
	//Fx.Slide Options
	mode: 'vertical', //default is 'vertical'
	//Fx Options
	transition: 'sine:in',
	duration: 300, 
	//Fx Events
	onStart: function(){
		$('start').highlight("#EBCC22");
	}
});

Since Fx.Slide is an extension of Fx, you can use any of the Fx options and events, but Fx.Slide does come with a set of options itself.

Fx.Slide options

There are only two Fx.Slide options, ‘mode’ and ‘wrapper.’ Frankly, I have never found myself using ‘wrapper’ (I have never come across the need), but ‘mode’ is what determines whether you want to slide horizontally or vertically.

mode

Mode gives you two choices, ‘vertical’ or ‘horizontal’. Vertical reveals from top to bottom and horizontal reveals from left to right. There are no options to go from bottom to top or from right to left, tho I understand that hacking the class itself to accomplish this is relatively simple. In my opinion, it’s an option I would like to see standard, and if anyone has hacked the class to allow this options, please drop us a note.

wrapper

By default, Fx.Slide throws a wrapper around your slide element, giving it ‘overflow’: ‘hidden’. Wrapper allows you to set another element as the wrapper. Like I said above, I am not clear on where this would come in handy and would be interested to hear any thoughts (thanks to horseweapon at mooforum.net for helping me clear this up).

Fx.Slide methods

Fx.Slide also features many methods for showing and hiding your element.

.slideIn()

As the name implies, this method will fire the start event and reveal your element.

.slideOut()

Slides your element back to the hidden state.

.toggle()

This will either slide the element in or out, depending on its current state. Very useful method to add to click events.

.hide()

This will hide the element without a slide effect.

.show()

This will show the element without a slide effect

override mode with methods

Each of the methods above also accept ‘mode’ as an optional parameter, letting you override anything set in the options.

slideVar.slideIn('horizontal');

Fx.Slide shortcuts

The Fx.Slide class also provides some handy shortcuts for adding the effect to an element.

.set(’slide’);

Instead of initiating a new class, you can create a new instance if you ’set’ slide on an element.

slideElement.set('slide');

setting options

You can even set options with the shortcut:

slideElement.set('slide', {duration: 1250});

.slide()

Once the slide is .set(), you can initiate it with the .slide() method.

slideElement.slide('in');

.slide will accept:

‘in’
‘out’
‘toggle’
’show’
‘hide’

…each corresponding to the methods above.

Example

That pretty much covers the basics. The example below uses most of what we learned above, displays a few different types of slides, and provides some indicator divs so you can watch the events.

First, set up the html.

<div id="start" class="ind">Start</div>
<div id="cancel" class="ind">Cancel</div>
<div id="complete" class="ind">Complete</div>
 
<button id="openA">open A</button>
<button id="closeA">close A</button>

<div id="slideA" class="slide">Here is some content - A. Notice the delay before onComplete fires.  This is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it will "cancel" the previous call and give the new one priority.</div>
 
<button id="openB">open B</button>
<button id="closeB">close B</button>

<div id="slideB" class="slide">Here is some content - B. Notice how if you click me multiple times quickly I "chain" the events.  This slide is set up with the option "link: 'chain'"</div>
 
<button id="openC">toggle C</button>

<div id="slideC" class="slide">Here is some content - C</div>
 
<button id="openD">toggle D</button>

<div id="slideD" class="slide">Here is some content - D. Notice how I am not hooked into any events.  This was done with the .slide shortcut.</div>
 
<button id="openE">toggle E</button>
 
<div id="slide_wrap">
	<div id="slideE" class="slide">Here is some content - E</div>
</div>

Now, our css. We can keep it pretty simple.

.ind {
	width: 200px;
	padding: 10px;
	background-color: #87AEE1;
	font-weight: bold;
	border-bottom: 1px solid white;
}
 
.slide {
	margin: 20px 0; 
	padding: 10px;
	width: 200px;
	background-color: #DAF7B4;
}
 
#slide_wrap {
	padding: 30px;
	background-color: #D47000;
}

Finally, our mootools javascript:

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

	//EXAMPLE A
	var slideElement = $('slideA');
	var slideVar = new Fx.Slide(slideElement, {
		//Fx.Slide Options
		mode: 'horizontal', //default is 'vertical'
		//wrapper: this.element, //default is this.element
		//Fx Options
		link: 'cancel',
		transition: 'elastic:out',
		duration: 'long', 
		//Fx Events
		onStart: function(){
			$('start').highlight("#EBCC22");
		},
		onCancel: function(){
			$('cancel').highlight("#EBCC22");
		},
		onComplete: function(){
			$('complete').highlight("#EBCC22");
		}
	}).hide().show().hide(); //note, .hide and .show do not fire events 

	$('openA').addEvent('click', function(){
		slideVar.slideIn();
	});

	$('closeA').addEvent('click', function(){
		slideVar.slideOut();
	});

	//EXAMPLE B
	var slideElementB = $('slideB');
	var slideVarB = new Fx.Slide(slideElementB, {
		//Fx.Slide Options
		mode: 'vertical', //default is 'vertical'
		//Fx Options
		//notice how chaining lets you click multiple time 
		//then mouse away and the effects will keep going
		//for every click
		link: 'chain', 
		//Fx Events
		onStart: function(){
			$('start').highlight("#EBCC22");
		},
		onCancel: function(){
			$('cancel').highlight("#EBCC22");
		},
		onComplete: function(){
			$('complete').highlight("#EBCC22");
		}
	});

	$('openB').addEvent('click', function(){
		slideVarB.slideIn();
	});

	$('closeB').addEvent('click', function(){
		slideVarB.slideOut();
	});

	//EXAMPLE C
	var slideElementC = $('slideC');
	var slideVarC = new Fx.Slide(slideElementC, {
		//Fx.Slide Options
		mode: 'vertical', //default is 'vertical'
		//wrapper: this.element, //default is this.element
		//Fx Options
		//link: 'cancel',
		transition: 'sine:in',
		duration: 300, 
		//Fx Events
		onStart: function(){
			$('start').highlight("#EBCC22");
		},
		onCancel: function(){
			$('cancel').highlight("#EBCC22");
		},
		onComplete: function(){
			$('complete').highlight("#EBCC22");
		}
	}).hide();

	$('openC').addEvent('click', function(){
		slideVarC.toggle();
	});

	$('slideD').slide('hide');

	$('openD').addEvent('click', function(){
		$('slideD').slide('toggle');
	});
	
	//EXAMPLE C
	var slideElementE = $('slideE');
	var slideWrap = $('slide_wrap');
	var slideVarE = new Fx.Slide(slideElementE, {
		//Fx.Slide Options
		//mode: 'vertical', //default is 'vertical'
		wrapper: slideWrap //default is this.element
	}).hide(); 

	$('openE').addEvent('click', function(){
		slideVarE.toggle();
	});
});

Start

Cancel

Complete

Here is some content - A. Notice the delay before onComplete fires. This is due to the transition effect, the onComplete will not fire until the slide element stops “elasticing.” Also, notice that if you click back and forth, it will “cancel” the previous call and give the new one priority.

Here is some content - B. Notice how if you click me multiple times quickly I “chain” the events. This slide is set up with the option “link: ‘chain’”

Here is some content - C

Here is some content - D. Notice how I am not hooked into any events. This was done with the .slide shortcut.

Here is some content - E

To Learn More…

Fx.Slide is a versatile and incredibly useful plugin. To learn more, check out the Fx.Slide docs, the Fx.Morph and Fx docs.

Also, be sure to check our tutorials on Fx.Morph and the Fx options and events.

Tomorrow’s Tutorial

Will post a link once it is published