Comments on: Drop down with MooTools

By: Blake

Blake — Tue, 26 Oct 2010 20:14:04 +0000

The event handling function could be a little more efficient:
——————-start———————
var lp = e.target;
mySlide.toggle();
lp.toggleClass(’openPanel’);
fx.start({
‘opacity’: 0
}).chain(function(){
lp.set(’html’, (lp.hasClass(’openPanel’) ? labelClose : labelOpen));
fx.start({’opacity’: 1})
});
——————-end——————-

Using $ repeatedly as you did above is inefficient and requires much more execution than storing the result of that call in a variable.

Additionally, Mootools does that for you, assuming you’re including the appropriate modules, for events, and stores the result in event.target (e.target in your case).

Also, you should be using the Mootools’ Element.set method to set the html, to hide any cross browser issues.

And when doing so, you can inline that if statement with ternary operator for more efficiency.

NJoy!
-Blake

By: Nicolò

Nicolò — Tue, 12 Jan 2010 09:51:41 +0000

Hey Rich,
try this link http://line25.com/articles/rounding-up-the-top-10-mootools-lightbox-scripts or search Google for “mootools lightboxes” and you’ll find a few.

By: Rich

Rich — Fri, 08 Jan 2010 22:22:11 +0000

Hi Nicolò, firstly have to say a thousand thank you’s for sharing this, its totally open my eyes to javascript. The only problem I’m having is I can’t seem to find a lightbox type script that’ll work on the same page as this drop down with the mootools.full.js. Would you be able to suggest anything or point me in the right direction? Many thanks.

By: fb

fb — Thu, 14 Aug 2008 07:18:04 +0000

Thanks for this tutorial, ill place the link an a mootools portal im working on. http://mootools.startgigant.nl

By: Nicolò

Nicolò — Wed, 18 Jun 2008 17:43:47 +0000

Thanks Dragan, I’ll give it a try

By: Dragan

Dragan — Wed, 18 Jun 2008 17:21:25 +0000

Nice work , I just don’t like that little jerk on page load since it shows the whole hidden panel,. I took the liberty to modify your friends code and fix that.

here it is ,
download the V2

open demo.html in any ediitor and add this before ending –> tag

#myPanel{
visibility: hidden;
height:0px;
width:500px;
}

now open

dropdown.js and add this

e = new Event(e);
$(’myPanel’).setStyle(’visibility’, ‘visible’);
$(’myPanel’).setStyle(’height’, ‘auto’);

after

$(’linkPanel’).addEvent(’click’, function(e){

nice work and compliments from youjoomla.com

By: Stevi3

Stevi3 — Mon, 26 May 2008 17:48:05 +0000

Thank you so much for your insight. This will help with my web dev skills.

By: Nicolò

Nicolò — Mon, 21 Apr 2008 10:48:16 +0000

Hi Mike,
that sounds weird, since it has always worked in Firefox. Could you please post an URL so that I can check?

By: Mike Young

Mike Young — Thu, 17 Apr 2008 18:59:35 +0000

(And also, I’m using Wordpress)

By: Mike Young

Mike Young — Thu, 17 Apr 2008 18:58:43 +0000

Hi. This is great, almost got it working on my site.

It’s coming out fine in IE but it’s not revealing the hidden content when in Firefox :S

Any ideas on this?

Thanks so much, Loving the website.