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.
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
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
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
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
Thank you very much!
Maybe show return false; instead of e.stop(); … its easier to understand for people with some JS knowledge.
a good headstart to play with mootools. thank you.
[...] Mootools for the non-programmer – This site provides some great easy tutorials for people that don’t want to read some lengthy explanations (me!) [...]
can someone tell me what “window.addEvent” does?
window.addEvent pretty much does exactly what the name says: it adds an event object listener to the window object.
… 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.
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
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.
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
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
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.
Thanks for such nice help. One more thing any idea about enabling the mootools intellisense in Spket IDE?
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.
Thank´s for the turorial!
How can i realize a background scale like that:
http://ringvemedia.com/
Thank you very much!
I am unable to use Fx.Slide method.
Getting error message like:
Fx.Slide is not a constructor
hasValue()()mootools…ore-jm.js
hasValue()(undefined)mootools…ore-jm.js
check()(function())mootools…ore-jm.js
check()(“domready”, undefined, undefined)mootools…ore-jm.js
decode()()mootools…ore-jm.js
defn()()mootools…ore-jm.js
[Break on this error] transition: ‘bounce:out’
Help Me !!!!!
Looks like the wordpress upgrade broke a few things. Try now.
fx.slide not working in ie, but cool tutorials so far
Thanx, save me time for digging the API
Great article, adding it to my favourites!
I agree with some of the comments I have read on your blog, great posts, keep up the good work your doing!
Hello folks,
Yes, it is pretty slick transitions but one mentioned “newbee” cannot figure-out where that yellow div needs to be. Is it hidden, display:none, or will be created/drown on a fly with text in it?
How do I exercise with it?
As u can see I am the really-really new newbee, the newest of all newbs.
In upper samples there was “…(’someDiv’).set(‘html’, ‘New!! I\’m NEW CONTENT!! Woohoo!’);
…” which does make sense to the Newest One.
@Kolyan, you can stick the div anywhere you would like. Try just creating a div with a set width and height then apply the javascript code to it.
Gretto Senqury, I’ll sure try that.
Last two examples not working on either FF or IE.
this is great any help creating an image slideShow using Fx.slide?
Check out the main page (http://www.prime31.com) for an example using jquery. It would be pretty simple to change it to use mootools.
the slideout/slidein does not work on ie. gives an error
I don’t have IE so I can’t confirm. What error are you seeing? Sometimes Wordpress messes up the javascript and we just updated to the newest version last week so it may have caused some problems.
I tried the alert one and it worked great when I put the ID that existed in the source, but when I tried manipulating something that was created from JavaScript (rendered, so it’s not in the source) it did not work. Doesn’t it still exist in the DOM? I don’t understand why it’s nto getting affected.
Note I don’t know much about JavaScript.
I’ve been reading about how fantastic MooTools is and I want to learn it. I’m not sure what software to use in order to create with MooTools. Could someone provide me with names of what they use to edit and create with MooTools please. For example, are most people simply using a notepad to edit files or is this something that can be utilized within Dreamweaver? I’m clueless, sure. Thanks!
@Deming, any text edit will work fine.
for a start your examples are great! I am trying to get into this mootols things
Thanks for posting this kind of usefull information.
Anyway , i just wanted to let you know that the Horizontal variation of the example is not working on IE, can you please help me to solve this?
regards
blady
@bladimir, I regret to inform that I have moved to the world of Apple and no longer have IE avaialble to me.
Anyone who might have trouble on the Slide Effect with a messed layout in IE7
should check if the wrapper element div is defined correctly in CSS.
It will work fine on IE7 if it is defined this way:
#wrapper {
padding: 0;
margin: 0;
display: block;
width: 100%;
position: relative;
}
Of course, margin and padding maybe changed afterwards, but you avoid display errors using this.
Hi thanks for such a great beginnners guide. I am still learning and I have a question.
I am creating three slide out boxed for information on SEO services on my site. I have made two links work so far, so a slide down panel displays more information using example number two on your tutorial. What I can’t figure out is how can I get each link to close the previous link’s panel? In other words when I open the panel by clicking the link “Directory Submissions”, I would like to close this panel and open the next one by clicking on “Article Submissions”. I have uploaded what I am working on to explain: http://www.sterlingdesignuk.com/example/seo.html
Any help would be much appreciated.
fixed it already by adding a new event and using the slideout function to each button corresponding to each panel:
toggleMe.hide();
$(‘toggler’).addEvent(‘click’, function(e) {
e.stop();
toggleMe.toggle();
});
$(‘toggler2′).addEvent(‘click’, function(e){
e = new Event(e);
toggleMe.slideOut(); //Hide login panel
e.stop();
});
$(‘toggler3′).addEvent(‘click’, function(e){
e = new Event(e);
toggleMe.slideOut(); //Hide login panel
e.stop();
});
});
-Ryan
the toggle script is really useful and works like a dream.
one question. if i have several div panels, is there a way to write the code so that you don’t have to duplicate it for each div panel
thanks
$$(‘div.someClass’).each( function( theDiv )
{
// Add your effects here to theDiv
});