Comments on: Implementing Basic and Fancy Show/Hide in MooTools 1.2

By: Neil

Neil — Wed, 16 Dec 2009 19:11:50 +0000

Hey Dave,

Great tutorial, how can we make a div hide onload though?

By: Fancy FAQs with MooTools Sliders: Version 2 | Programming Blog

Fancy FAQs with MooTools Sliders: Version 2 | Programming Blog — Sat, 07 Nov 2009 16:10:33 +0000

[...] Implementing Basic and Fancy Show/Hide in MooTools 1.2 [...]

By: Eric Lee

Eric Lee — Mon, 31 Aug 2009 15:16:29 +0000

And, oops, the “cotp_desc” should really be “theDiv” on the second line of script.

By: Eric Lee

Eric Lee — Mon, 31 Aug 2009 12:00:45 +0000

Is there a way to put a duration on the fading in and out of the display element? The fade() only works on opacity it seems, and so when an item is faded out, it still shows the block height element. I’d like to be able to fade out (in a “fancy” way) an element’s display from “block” to “none”. Is that possible? So far in my tests it seems to only want to act as if there is no duration:

//set the div to be invisible on load
$(‘theDiv’).setStyle(‘display’,'none’);

var myEffect = new Fx.Tween($(‘cotp_desc’), {
property: ‘display’,
duration: 2000, //set the duration of the fade
transition: Fx.Transitions.Quad.easeIn
});

$(‘hideDesc’).addEvent(‘click’, function(event) {
myEffect.start(‘none’);
});

$(’showDesc’).addEvent(‘click’,function(event){
myEffect.start(‘block’);
});

HTML:

Show Text | Hide Text)

Some text

By: Ashley

Ashley — Tue, 10 Mar 2009 00:14:53 +0000

You’ve got the fancy-shmancy blog with moo scattered about…you write one! :)

Besides, I’m just a designer that lets you guys do all the hard work. LOL

So, check back tomorrow? OK, fine, Wednesday…sheesh.

By: Liam

Liam — Mon, 09 Mar 2009 23:00:45 +0000

I have done a few in Jquery too, Just having issues in mootools for some reason.

By: David Walsh

David Walsh — Mon, 09 Mar 2009 22:26:07 +0000

@Ashley — write one! :) It wouldn’t be that difficult.

By: Ashley

Ashley — Mon, 09 Mar 2009 21:09:47 +0000

I’ve been looking for the same thing Liam mentioned and cannot find a slide combined with a fade. Here’s a perfect example:

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

Of course, it’s written using JQuery. Has anyone seen a Moo version?

By: Jaime Schultz

Jaime Schultz — Wed, 28 Jan 2009 22:29:50 +0000

Hi David,
I just read your blog about Implementing Basic and Fancy Show/Hide in MooTools 1.2. I have a question, since yours seems to work in all browsers, what could be the reason onChange hide/shows work in IE and not Firefox or safari?

By: liam dilley

liam dilley — Tue, 13 Jan 2009 22:32:47 +0000

Agreed, I am trying and have been trying to do a hidden div to show toggle for a bit and it is giving me a headache.
window.addEvent(‘domready’, function() {
$(‘login-form’).setStyle(‘height’,'auto’);
var myVerticalSlide = new Fx.Slide(‘login-form’).hide();
$(‘toggle-login’).addEvent(‘click’, function(e){
myVerticalSlide.toggle();
e.stop();
});
});

The above is for a slide toggle and I am trying to do the same with a fade.