Cult-Foo

MooTools Tutorial for Designers

Tags: ,

This article inspired by “jQuery Tutorials for Designers“. It contains a couple of useful examples for beginners. All examples working with current mootools release – MooTools v1.2

1. Basics

mootools.net – official mootools site
docs.mootools.net – detailed documentation
mootools.net/download – here you can download latest version of mootools

Ok, i assume you already download js source. Now you need to add it to your pages. Best place to add it is head tag

<html>
  <head>
    ...
	<script type="text/javascript" src="mootools.js"></script>
    ...
  </head>
  ...
</html>

As soon as the DOM is ready mootools fires ‘domready’ event, and that means “it’s time to run our code”

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

To get an element with id=’someID’ use

$('someID')

To get collection of elements, for example links inside some div, use

$$('#someID a'))

If you want to execute your function on some event, for example on click, use

$('someID').addEvent('click', function(e) {})

That’s all you need to know to start using mootools

Show/hide panel
Demo

We have 2 divs – one with id=”top” – contain panel, second – with id=”top2″ – contain link that toggle panel.
Panel will be toggled with help of “Slide” effect.

window.addEvent('domready', function() {
	var myHeight = new Fx.Slide('top').hide();
	$$('#top2 a').addEvent('click', function(e) {
		e.stop();
		myHeight.toggle();
	});
});

e.stop(); – use it if you want to prevent default event behaviour, we use it to make link only open/close panel and nothing else

Smooth scroll to some place on page
Demo

We have many paragraphs on page and some sort of content table in the top. By clicking on link you scroll page to corresponding paragraph. Code to do it is very simple.

window.addEvent('domready', function() {
	var mySmoothScroll = new SmoothScroll();
});

Delete some block from webpage
Demo

To delete some block ( p, div, etc ) we add a link with class=”delete” inside it. When you click on link block will be faded and then removed from DOM after 1 sec delay.

window.addEvent('domready', function() {
	$$('a.delete').addEvent('click', function(e) {
		e.stop()
		var p = this.getParent();
		p.fade(0);
		(function(){ p.destroy(); }).delay(1000);
	});
});

Add/remove field(s) to form
Demo

Imagine you have form to upload files. You don’t know how many files you wish to upload, so you want to have ability to add/remove additional fields.
To accomplish this we add two buttons
– button with name “plus” – to add field
– button with name “minus” – to remove field

Block that we will clone

<div id="uploadBlock">
    <label for="upload">
      File to upload:
      <br />
    </label>
    <input name="upload[]"/>
    <br />
</div>

We mark block we will clone with id=”uploadBlock”

window.addEvent('domready', function() {
	$('uploadForm').getElement('input[name=plus]').addEvent('click', function(){
		var clone = $('uploadBlock').clone().injectAfter('uploadBlock');
	});
	$('uploadForm').getElement('input[name=minus]').addEvent('click', function(){
		if ( $('uploadForm').getElements('input[name^=upload]').length == 1 )
			return false
		else
			$('uploadBlock').getNext().destroy();
	});
});

When you click on ‘+’, block with input is cloned and injected after first input
After clicking on ‘-‘ we check if we have more than one input and delete one input

Tips
Demo

Tips is nice solutions when you want to show additional info about some element, but you cant find place for it on page.
Tip is showed on rollover event. Mootools has native plug-in for Tips. Here you can see standard example, example using custom css and example with fixed tip.

window.addEvent('domready', function() {
	var tip_img = new Tips($$('.img'));
	var tip_link = new Tips($$('.link'), {
		className: 'custom'
	});
	var tip_link_fixed = new Tips($$('.link_fixed'), {
		className: 'custom',
		fixed:true
	});
});

Accordion
Demo

Accordion contain sections, each of them has such structure:

<h3 class="title">Title</h3>
<div class="content">
	Content
</div>
window.addEvent('domready', function() {
	var myAccordion = new Accordion($('accordion'), 'h3.title', 'div.content');
});

Morph
Demo

Morph is one of Effects. It allows to transition any number of CSS properties for an element.
You can specify css properties in class and pass it to morph function.

window.addEvent('domready', function() {
	$('morphForm').addEvent('submit', function(e) {
		e.stop();
		if ( $('username').get('value') == 'elpaso' &amp;&amp; $('password').get('value') == 'password' )
			$('loginMsg').set('text','Successful login').morph('.success');
		else
			$('loginMsg').set('text','Wrong Data').morph('.error');
	});
});

Make all links external
Demo

Links on page can be internal ( they linked to some page on your site ) or external ( go away from your site ). In this example we add “rel=’nofollow'” to all external links and make them open in new window

window.addEvent('domready', function() {
	$$('a').each( function(item, index){
		if ( !( (/^http://(?:www.)?cult-f.net/i).test(item.href) ) )
			item.setProperties({
				rel: 'nofollow',
				target: '_blank'
			});
	});
});

Image gallery
Demo

We have two divs – ‘frame’ – to which we load big photo & ‘photos’ – contain small previews.
First we load images using Asset plugin, you can see progress in frame where big photo will appear
After all loaded, we assign click events to thumbs and show first photo

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

	var images = [];

	var img_paths = ['img/img1.jpg','img/img2.jpg','img/img3.jpg','img/img4.jpg','img/img5.jpg'];
	var loader = new Asset.images(img_paths, {
		onProgress: function(counter,index) {
			$('frame').set('html','loaded '+ (counter + 1) * (100 / img_paths.length) + '%');
		},
		onComplete: function() {
			//fill our img array
			img_paths.each(function(im) {
				images[im] = new Element('img', {
				    'src': im,
				    'styles': {
						'visibility': 'hidden',
						'opacity': '0',
						'border': 'none'
				    }
				});
			});
			//assign click events
			$$('#photos a').addEvent('click', function(e) {
				e.stop();
				$('frame').empty();
				images[this.rel].set('opacity','0').inject($('frame')).fade(1);
			});
			//show first img in frame
			$('frame').empty();
			images[ img_paths[0] ].set('opacity','0').inject($('frame')).fade(1);
		}
	});


});

Did you like it? Help us spread the word!

8 Responses to "MooTools Tutorial for Designers"

  1. Jason says:

    Useful, as always. Mootools is really the best JS Framework. Prototype and JQuery aren’t so bad either. Enjoy !

  2. good tutorial for someone like me getting started and looking to learn more about frameworks like Moo tools, hopefully can build on it.

    cheers

  3. firmtofu says:

    Great list! thx… It’s excellent to see everything on one page.

  4. S.Sakthivel says:

    hi

    i need to smooth scroll of div id
    u r given in Show/hide panel
    i have four div id with name signin and signup and wether and news
    when i mouse over on that particular div will be open smoothely like Show/hide panel can i get mootools.js and how i can done this one

    thanks in advance

    sakthivel

  5. Man, you have gone out of your way on this serious of tutorials!! You have no idea the hours I’ve spent trying to get some of these to work across multiple browsers. Thanks for sharing, It’s much appreciated! -Johnathan

  6. Hello,
    Thanks for writing basic Mootool tutorial you did great work. Keep it up.

    I would like to know is, where can we find ready made mootools library and functions since i am jquery and mootool beginner.

    Thanks in advance.

  7. achar says:

    Hi,
    thanks for u r tutorial ,i was searching for beginner tutorial.finally i got it

Trackbacks/Pingbacks

Do you have something to say?