Torkil Johnsen

My personal piece of cyberspace

Playing around with MooTools

Posted in JavaScript by tj on the November 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

Technorati Tags: , ,

10 Responses to 'Playing around with MooTools'

Subscribe to comments with RSS or TrackBack to 'Playing around with MooTools'.

  1. indigo said,

    on November 7th, 2006 at kl. 2.57

    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

  2. tj said,

    on November 7th, 2006 at kl. 10.16

    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 :)

  3. KS said,

    on November 21st, 2006 at kl. 7.16

    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?

  4. tj said,

    on November 21st, 2006 at kl. 9.39

    “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;
    }*/

  5. olly said,

    on January 15th, 2007 at kl. 10.51

    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 !

  6. tj said,

    on January 15th, 2007 at kl. 14.40

    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 :)

  7. olly said,

    on January 16th, 2007 at kl. 20.11

    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…

  8. bobik said,

    on March 4th, 2007 at kl. 22.13

    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!

  9. Jonathan said,

    on April 11th, 2007 at kl. 18.52

    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

  10. tj said,

    on April 12th, 2007 at kl. 11.10

    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.

Leave a Reply