Playing around with MooTools

Posted in JavaScript on Nov 1st, 2006

Have put some time into learning a bit more JavaScript lately, closely related to exploring MooTools. I have put together a couple of effect examples. The code is messy, yeah, and it is not intended for production sites yet, but it works.

The advantage of using JavaScript, with or without libraries like MooTools and their likes, is that if someone disables JavaScript, or some ancient browser does not understand the script, the content is still displayed in a readable fashion. Not optimal, but readable still. Try turning off JavaScript in your browser and you’ll see what I mean.

Check out the examples:

- an accordion with MooTools
- a showCase with MooTools
- a popmenu with MooTools

[tags]mootools, moo.fx, javascript[/tags]

22 Comments

indigo

The showcase works in Konqueror, but the transition is jerky. I like it very much. Think I’ll use it on my site if I can modify your popmenu to show a second-level submenu
indigo

The showcase works in Konqueror, but the transition is jerky. I like it very much. Think I’ll use it on my site if I can modify your popmenu to show a second-level submenu
http://www.torkiljohnsen.com tj

Cool. I hadn’t tested it in Konqueror yet. I’ll be hoping for a link back here, and/or a link to credit Valerio for creating Mootools :)
http://www.torkiljohnsen.com tj

Cool. I hadn’t tested it in Konqueror yet. I’ll be hoping for a link back here, and/or a link to credit Valerio for creating Mootools :)
KS

Cool. I’ve tried the accordion, but i can’t find a way to make the first box appear hidden when the page is loaded. Even with the ‘alwaysHide: true’ string in the head script. Anyone can help me?
KS

Cool. I’ve tried the accordion, but i can’t find a way to make the first box appear hidden when the page is loaded. Even with the ‘alwaysHide: true’ string in the head script. Anyone can help me?
http://www.torkiljohnsen.com tj

“alwaysHide” just gives you the ability to close all items by clicking on the only open item, it doesn’t give you the ability to make all boxes appear hidden on page load.

To make all items hidden on page load, you have to edit the Fx.Accordion class. Inside the initialize function there is a switch statement at the end. Just comment out these four lines of code and you’ll be fine, like this:

/*switch(this.options.start){ case 'first-open': this.elements[0].setStyle('height', this.elements[0].scrollHeight); break; case 'open-first': this.showThisHideOpen(0); break; }*/
http://www.torkiljohnsen.com tj

“alwaysHide” just gives you the ability to close all items by clicking on the only open item, it doesn’t give you the ability to make all boxes appear hidden on page load.

To make all items hidden on page load, you have to edit the Fx.Accordion class. Inside the initialize function there is a switch statement at the end. Just comment out these four lines of code and you’ll be fine, like this:

/*switch(this.options.start){ case 'first-open': this.elements[0].setStyle('height', this.elements[0].scrollHeight); break; case 'open-first': this.showThisHideOpen(0); break; }*/
olly

I’ve checked your demo pages and i’ve got a problem with the popmenu… th script runs without any problem using Safari 2.0.4 but not under IE 6 !
olly

I’ve checked your demo pages and i’ve got a problem with the popmenu… th script runs without any problem using Safari 2.0.4 but not under IE 6 !
http://www.torkiljohnsen.com tj

Right you are. It works if you mouseover the text itself, but not on the entire element. It was just a small CSS adjustment that was needed there, everything is okay again now :)
http://www.torkiljohnsen.com tj

Right you are. It works if you mouseover the text itself, but not on the entire element. It was just a small CSS adjustment that was needed there, everything is okay again now :)
olly

I would like to use this menu with submenus… how could I extend your script in order to leave the background position to 0 position while mouseover is on any of the submenu items… sorry for these newbie question…
olly

I would like to use this menu with submenus… how could I extend your script in order to leave the background position to 0 position while mouseover is on any of the submenu items… sorry for these newbie question…
bobik

hello there!

i was looking all over places and could not find anything that would allow a partial collapse/slide. currently, all mootools-based effects collapse item completely, but I would like to have it collapsed partially, i.e. have some part of box still visible, say about 100 pixels… any ideas? i just cannot figure out where and what to inject …

thanks!
bobik

hello there!

i was looking all over places and could not find anything that would allow a partial collapse/slide. currently, all mootools-based effects collapse item completely, but I would like to have it collapsed partially, i.e. have some part of box still visible, say about 100 pixels… any ideas? i just cannot figure out where and what to inject …

thanks!
Jonathan

Hi Torkil,

Is it possible for you to update the popmenu example for it to work with the latest version of MooTools?

Please let me know :)

Thanks,

Jonathan
Jonathan

Hi Torkil,

Is it possible for you to update the popmenu example for it to work with the latest version of MooTools?

Please let me know :)

Thanks,

Jonathan
http://www.torkiljohnsen.com tj

Can’t promise you anything there Jonathan, but I can say that the popmenu should be re-written because Mootools 1.0 has by now got some new nifty functions that would make it alot cooler and versatile.
http://www.torkiljohnsen.com tj

Can’t promise you anything there Jonathan, but I can say that the popmenu should be re-written because Mootools 1.0 has by now got some new nifty functions that would make it alot cooler and versatile.
Werner Brandt

I downloaded the accordian plugin from http://demos.mootools.net/Accordion

What do I need to do to have all the divs collapsed at startup.

The files included are:
mootools.js
demo.js
demo.css
Werner Brandt

I downloaded the accordian plugin from http://demos.mootools.net/Accordion

What do I need to do to have all the divs collapsed at startup.

The files included are:
mootools.js
demo.js
demo.css

Torkil Johnsen

Categories

Search

Archive

Links

Meta