Prime31 Web Design

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:
  • Digg
  • Slashdot
  • Mixx
  • StumbleUpon
  • Technorati
  • description
  • del.icio.us
  • Google
  • Facebook
  • Propeller
  • Reddit

14 Responses to “MooTools 1.2 for The Non Programmer”

  1. Mody Says:

    Thank you very much!

  2. Harald Says:

    Maybe show return false; instead of e.stop(); … its easier to understand for people with some JS knowledge.

  3. ilyas Says:

    a good headstart to play with mootools. thank you.

  4. A compilation of my favorite tutorials Says:

    [...] Mootools for the non-programmer - This site provides some great easy tutorials for people that don’t want to read some lengthy explanations (me!) [...]

  5. anonoumys Says:

    can someone tell me what “window.addEvent” does?

  6. admin Says:

    window.addEvent pretty much does exactly what the name says: it adds an event object listener to the window object.

  7. Ryan Says:

    … 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.

  8. Tamamma Says:

    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

  9. admin Says:

    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.

  10. Rich Says:

    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

  11. Rich Says:

    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

  12. admin Says:

    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.

  13. Mazhar Says:

    Thanks for such nice help. One more thing any idea about enabling the mootools intellisense in Spket IDE?

  14. admin Says:

    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.

Leave a Reply