Comments on: MooTools 1.2 for The Non Programmer – Part 3

By: george gurrola

george gurrola — Tue, 17 Feb 2009 17:40:59 +0000

check out my demo, ic reated using your examples… using the morph, the fade, and the highlight
http://www.gurroladesign.com/mootool/launch_sequence_complete_fade2.html

its a fictional missile launcher, based on some movie i saw… wher the lead is trying to deactivate this robot about to destroy the world, well in my version it launches a missile… i finished the sequence part of it…

once again tahtnks for yoru great tutorials!

By: george gurrola

george gurrola — Fri, 13 Feb 2009 20:16:10 +0000

cool… i got it… some logic and t/e and here it is… thanks so much i’ll upload a demo when i get a chance

add all the effects you want…etc…

window.addEvent(‘domready’, function() { // gets the script/dom ready
$(‘click3′).addEvent(‘click’, function(e) { // adds click event
$(‘container’).set(‘tween’, {
onComplete: function(e) {
$(e.id).set(‘tween’, { onComplete: Class.empty }); //clses first effect
$(‘container’).set(‘tween’, {

onComplete: function(e) {
$(e.id).set(‘tween’, { onComplete: Class.empty }); //closes 2nd effect
$(e.id).tween(‘opacity’, .4); // 3rd effect using opacity
}
});

$(e.id).tween(‘height’, 600); // 2nd effect with height
}
});

$(‘container’).tween(‘width’,400); // 1st main effect using width
e.stop();
});
});

By: george gurrola

george gurrola — Fri, 13 Feb 2009 19:50:51 +0000

cool!… i got it… took some logic thinking… but here it is… it plays one effect, whtever it is, then another whatever it is, then another, etc… and etc…

onComplete: function(e) {
$(e.id).set(‘tween’, { onComplete: Class.empty }); //closes 2nd effect
$(e.id).tween(‘opacity’, .4); // 3rd effect using opacity
}
});

$(e.id).tween(‘height’, 600); // 2nd effect with height
}
});

$(‘container’).tween(‘width’,400); // 1st main effect using width
e.stop();
});
});

once again thank you for your tutorials… ill upload my demo when i get a chance…

By: george gurrola

george gurrola — Fri, 13 Feb 2009 18:29:33 +0000

thanks, yeah that’s what i found out, only multiple tweens of one effect… on the oncomplete example it lets you combine two effects… but im trying to get it to do more… for example one effect triggers another effect on oncomplete and so on… still pretty nice… learning so much just from these examples… thanks…

By: admin

admin — Fri, 13 Feb 2009 18:04:59 +0000

@george, the chaining example will only allow you to chain the tween that you created: in this case, margin-left. You can chain together multiple tweens by using the complete handler from the first tween to start the next.

Mike

By: george gurrola

george gurrola — Fri, 13 Feb 2009 17:17:51 +0000

question… in the chaining example is it possible to chain other effects such as a fade effect, a move effect, a width effect… let me give it a try

By: george gurrola

george gurrola — Fri, 13 Feb 2009 17:13:50 +0000

thanks looking good!

By: admin

admin — Fri, 13 Feb 2009 05:24:47 +0000

All fixed. WordPress added some code into my javascript.

By: george gurrola

george gurrola — Fri, 13 Feb 2009 01:57:15 +0000

the chain example from this page is not working, is there something i’m missing? thanks for the tutorials

By: admin

admin — Thu, 22 Jan 2009 06:47:30 +0000

You will need to do the latter. Each link will need its own separate id. You could also just use a class and do something like this:

$$(‘a.someClass’).addEvent(‘click’, function(e) {
myTween.start(100).start(50).start(150).start(100).start(200).start(0);
e.stop();
});

That would work for any links with the class ‘someClass’ on them.

By: Sean

Sean — Thu, 22 Jan 2009 00:48:00 +0000

I’m having trouble with calling the function twice via links. Using the example from above:

window.addEvent(‘domready’, function() {
myTween = new Fx.Tween(‘moveMe’, ‘marginLeft’, { link: ‘chain’ });

$(‘click1′).addEvent(‘click’, function(e) {
myTween.start(100).start(50).start(150).start(100).start(200).start(0);
e.stop();
});
});

….
[a] href=”#” rel=”nofollow”>Click Me to See Some Chaining[a]
[a] href=”#” rel=”nofollow”>Click Me to See Some Chaining Again[a]

The second link does not work. What gives? Do I have to make a unique ID for each link I use to call the function? as in:

window.addEvent(‘domready’, function() {
myTween = new Fx.Tween(‘moveMe’, ‘marginLeft’, { link: ‘chain’ });

$(‘click1a’).addEvent(‘click’, function(e) {
myTween.start(100).start(50).start(150).start(100).start(200).start(0);
e.stop();
});

$(‘click1b’).addEvent(‘click’, function(e) {
myTween.start(100).start(50).start(150).start(100).start(200).start(0);
e.stop();
});

});

….
[a] href=”#” rel=”nofollow”>Click Me to See Some Chaining[a]
[a] href=”#” rel=”nofollow”>Click Me to See Some Chaining Again[a]

Seems weird…

By: admin

admin — Thu, 18 Dec 2008 00:31:32 +0000

I’ not really sure what you are trying to do here. You reference ‘slider’ in your code twice but it isn’t apparent what ‘slider’ is.

By: Guillem

Guillem — Wed, 17 Dec 2008 11:52:08 +0000

Hi there,

Hi tryed something like this but it don’t seems to work for me:

$(‘close-slider’).addEvent(‘click’, function(e) {
slider.set(‘slideOut’, {
onComplete: function(e) {

$(‘ficheholder’).setStyle(‘visibility’, ‘hidden’);

}
});
slider.slideOut();
e.stop();
});

thanks for all

By: admin

admin — Wed, 10 Sep 2008 02:34:05 +0000

e.stop() is used to prevent the normal click event from occurring. This keeps browsers from following the link if you use it on an anchor tag. You can also return false from the function and get the same result. It is good practice to use e.stop() whenever you put a click handler on an anchor tag. It isn’t necessary to use e.stop() on mouseenter or mouseleave because the browser won’t be trying to follow a link. In the examples here, I didn’t fill the href=”" part of the tag so it won’t have any effect. Try filling the href with http://www.google.com with and without e.stop() and you will see.

What is happening in the onComplete handler handler for the tween is this line: $(e.id).set(‘tween’, { onComplete: Class.empty }); That is resetting the onComplete handler to Class.empty which is just an empty function. Resetting the onComplete handler keeps it from firing the second time when the margin is reset to 0.

By: ateck

ateck — Wed, 10 Sep 2008 01:32:58 +0000

First off all, Thanks for your help.
One thing that I don’t understand is, what is this line of code use for?
e.stop();
How come you didn’t include it in ‘mouseenter’, ‘mouseleave’ event in your Part-4 series.
I’ve try to exclude it, it works fine. How do i decide between include it or exclude it?

Can you explain a little bit more about onComplete: function(e) {}
Why this two lines of codes, didn’t get executed again after oncomplete?
$(‘doneMe’).tween(‘marginLeft’, ’400′);
e.stop();
Cause i don’t see a return statement inside oncomplete function
The prgoram flow will continue to this 2 last lines of codes, I think?

Thanx again