MooTools 1.2 for The Non Programmer

Using MooTools can be a bit daunting for the non-programmer types out there (mainly designers and javascript newbies). I’m going to display a few examples of just how simple MooTools can be. Hopefully this will spark some interest for a few people so that you get motivated to do a bit of learning and see how powerful and usable MooTools can be.

We’ll start with the basics. If you want to add some javascript the first thing you need to do is setup a trigger for when it should run. We’ll do this by setting up a link that the user will click to start the javascript. We will use a function call ‘addEvent’ to take care of this. Don’t worry so much about the details at this point, just follow along for an example to see this in action.

Click Me

window.addEvent('domready', function() {
	$('clickMe').addEvent('click', function(e) {
		alert('Hi.  You just clicked me.  What do you want, a cookie?');
		e.stop();
	});
});

OK. That was great and all but not very useful. Lets kick it up a notch and actually do something a bit more concrete. What we are going to do is change the content of a ‘div’ tag when someone clicks a link. This could be useful for a variety of things, but I’ll leave that up to you to implement.

Change Div Content | Change Div Content Back

I am the normal content

window.addEvent('domready', function() {
	$('clickMe2').addEvent('click', function(e) {
		$('someDiv').set('html', 'New!!  I\'m NEW CONTENT!!  Woohoo!');
		e.stop();
	});
 
	$('clickMe3').addEvent('click', function(e) {
		$('someDiv').set('html', 'I am the normal content');
		e.stop();
	});
});

Lets take it one step further and add some fancy effects. We are going to use a slide effect to show some content that may be hidden. This is useful for FAQs so you don’t need to display the answers to all the questions at once and tons of other places where you don’t want to inundate your readers with too much data. Users can then only view the data they choose to see. In addition to displaying the data we will add a slick effect to go along with it

Toggle Me

Some content here

window.addEvent('domready', function() {
   var toggleMe =  new Fx.Slide('toggleMe',
      { duration: 1000,
         transition: 'bounce:out'
      }
   );
   toggleMe.hide();
 
   $('toggler').addEvent('click', function(e) {
      e.stop();
      toggleMe.toggle();
   });
});

Now for something slightly different. We can easily modify our slide so that it goes horizontally rather than vertically. We’ll also add an elastic transition, which will give the animation the effect of being attached to a rubber band

Slide Out | Slide In

Some content here

window.addEvent('domready', function() {
   var toggleMe2 =  new Fx.Slide('toggleMe2',
      {duration: 1500,
        transition: 'elastic:out',
        mode: 'horizontal'}
   );
 
   $('toggler2').addEvent('click', function(e) {
      toggleMe2.slideOut();
      e.stop();
   });
 
   $('toggler3').addEvent('click', function(e) {
      toggleMe2.slideIn();
      e.stop();
   });
});

That’s all for now. Go play with MooTools and see what you can come up with using the examples above. If you have any questions or need more information or detail feel free to leave a comment

Requisite Social Bookmarking Links:

This entry was posted on Tuesday, February 26th, 2008 at 11:03 pm and is filed under MooTools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 Responses to “MooTools 1.2 for The Non Programmer”

Mody Says:
March 14th, 2008 at 9:01 pm
Thank you very much!
Harald Says:
June 19th, 2008 at 11:02 pm
Maybe show return false; instead of e.stop(); … its easier to understand for people with some JS knowledge.
ilyas Says:
June 27th, 2008 at 12:03 am
a good headstart to play with mootools. thank you.
A compilation of my favorite tutorials Says:
August 1st, 2008 at 3:53 pm
[...] Mootools for the non-programmer - This site provides some great easy tutorials for people that don’t want to read some lengthy explanations (me!) [...]
anonoumys Says:
October 1st, 2008 at 1:45 pm
can someone tell me what “window.addEvent” does?
admin Says:
October 1st, 2008 at 2:24 pm
window.addEvent pretty much does exactly what the name says: it adds an event object listener to the window object.
Ryan Says:
October 6th, 2008 at 1:15 pm
… and event is something like a ‘click’ or ‘domready’. Usually in mootools you see “window.addEvent(’domready’, —” meaning as soon as the browser knows what it’s supposed to display (the DOM is ready, or document is ready), but before things like images are loaded, then go ahead and do something.

If the even is a click, then listen for the click event, and then do something.

Great site, by the way.
Tamamma Says:
November 6th, 2008 at 3:05 am
I’ve tryed to use Toggle Me using class insted of id for the link and the div but is not working. Can u tell me if there is the possibility to do this and if yes how can i do it? Thank you very much
admin Says:
November 6th, 2008 at 6:02 pm
You can certainly use a class for the link instead of an id. All you need to modify is the second section to make it like the following:

$$(’div.someClassOnADiv’).addEvent(’click’, function(e) {
e.stop();
toggleMe.toggle();
});

That would add a click handler to all divs with the class ’someClassOnADiv’ that will do the toggle.
Rich Says:
November 13th, 2008 at 8:54 am
I’m trying to get the Slide-in/out functions to work with IE (seems to work fine with FireFox). In IE the slide-out works but then throws and error and slide-in never works. I’ve followed your examples and not able to get IE to work with the latest download of mootools (core and more). what version of mootools are you using for these examples? here is the code I’m using:

Your title

window.addEvent(’domready’, function() {
var toggleMe2 = new Fx.Slide(’toggleMe2′,
{duration: 1500,
transition: ‘elastic:out’,
mode: ‘horizontal’}
);

$(’toggler2′).addEvent(’click’, function(e) {
toggleMe2.slideOut();
e.stop();
});

$(’toggler3′).addEvent(’click’, function(e) {
toggleMe2.slideIn();
e.stop();
});
});

Slide Out | Slide In

Some content here
Rich Says:
November 13th, 2008 at 9:01 am
Sorry about the missing code, Try this:

Your title

window.addEvent(’domready’, function() {
var toggleMe2 = new Fx.Slide(’toggleMe2′,
{duration: 1500,
transition: ‘elastic:out’,
mode: ‘horizontal’}
);

$(’toggler2′).addEvent(’click’, function(e) {
toggleMe2.slideOut();
e.stop();
});

$(’toggler3′).addEvent(’click’, function(e) {
toggleMe2.slideIn();
e.stop();
});
});

Slide Out | Slide In

Some content here
admin Says:
November 13th, 2008 at 7:52 pm
The version of MooTools on this page is 1.2 development version. I haven’t yet updated to the 1.21 release. As far as I know, only bug fixes have been added so it should work. I don’t have Internet Explorer to test it on right now but when I get it installed I will try and let you know.
Mazhar Says:
November 14th, 2008 at 7:13 am
Thanks for such nice help. One more thing any idea about enabling the mootools intellisense in Spket IDE?
admin Says:
November 16th, 2008 at 11:29 am
Maxhar, Spket is definitely the best IDE that I have found when it comes to getting intellisense but even if you use the uncompressed version of MooTools you won’t be able to get very good intellisense. There isn’t much that can be done about it as javascript is just flat out hard to code complete due to it’s dynamic nature.

MooTools 1.2 for The Non Programmer

14 Responses to “MooTools 1.2 for The Non Programmer”

Leave a Reply