MooTools Default to hide, Fade later

by Thomas Aylott Mon, 20 Oct 2008 14:56:00 GMT

How to have a box default to hidden and then fade it in later.

Fade is just a Tween. And Tween simple animates one CSS property from one value to another. That's it. Also, you can't have your code run until the dom is ready (when the page finishes loading enough). None of your javascript rules can effect anything until after the user has already seen the page. So, you have to hide your box yourself using CSS. There are a million ways to do that, but I recommend having a 'hide' class.

---

Simple: Use a hide class

Add this rule to your CSS somewhere:

.hide{ display:none; }

Then, manually apply it to all the HTML elements that you want to be hidden by default:

<div class="alert hide">Warning Mr Robinson!</div>
<div class="confirm hide">Are you sure you want to do that?</div>
<div class="info hide">Um... Your arm is missing.</div>

Next, add some simple mootools Javascript to setup your elements to be faded later on:

window.addEvent('domready',function(){

    $$('.hide').fade('hide').removeClass('hide');

});

Finally, you'll need something to make those things fade back in somehow.

$$('.show-alert').addEvent('click',function(e){ $$('.alert')[0].fade('in'); e.stop; });

Note: This is just a crappy example, ideally you'd write MUCH better code than this. Use a MooTools Class and instantiate it onDomready, etc...

---

Advanced: Use semantic CSS rules

Don't like the idea of littering meaningless classes around your document? Well, the best option is to do something a bit more complex...

Use a loading class for your body tag

Add the classname loading to your body tag. Then in your CSS you can set multiple rules for how your document should look as it's loading. Then, once your javascript has all fired, simply remove the loading class to disable all those CSS rules.

With the loading class you can use verbose semantic rules such as:

body.loading div.alert,
body.loading div.confirm,
body.loading div.info{
    display:none
}

Use a MooTools Class to write a reusable widget

This is a basic example of how you should approach this sort of thing. Now that you have a simple MooTools Class all set up, it's easy to go back and add more functionality without having to recode anything.

var DialogWidget = new Class({

    initialize: function(element, eventName){
        this.eventName = eventName||element;
        this.element = $(element);

        this.element.fade('hide')
            .getElement('.closer').addEvent('click', this.hide.bind(this) );
        window.addEvent(this.eventName, this.alert.bind(this));

        this.init_buttons();
    },

    init_buttons: function(){
        $$('.show-' + this.eventName).addEvent('click',function(e){
            window.fireEvent(this.eventName, e.target.get('title') );
            e.stop();
        }.bind(this));
    },

    show: function(message){
        this.element.fade('in').set('text',message);
    },

    hide: function(){
        this.element.fade('out');
    }
});

window.addEvent('domready',function(){

    new DialogWidget('alert');
    new DialogWidget('confirm');

        $(document.body).removeClass('loading');
});

NEW TextMate Code Completion and Smart ToolTips

by Thomas Aylott Sun, 21 Sep 2008 21:56:00 GMT

Ahoy internet peoples!

I am hereby announcing the soon availability of a new form of code completion and smart contextual tooltips for TextMate 1.x!

Also, PPK has given me permission to use the Quirksmode.org Compatibility tables inside the Javascript and CSS bundles!

Code Completion & Tool Tips

The Code Completion is filter-as-you-type which means that as you type the list of completions changes to reflect your current word.

I wrote some of the code to hook into the code completion functionality from Ruby and to be able to use json or plist files inside your bundle as completion lists.

I also wrote the code that looks for the current word, method or collection name based on your caret and then finds the corresponding tooltip to show you.

I did a bunch more stuff to make it all work! A bunch of people have worked on this stuff and made it really awesome, if I do say so myself.

Coming soon…

Since it's now incredibly easy to create massive amounts of code completion lists with tooltips and everything…

I'm going to be creating more and more completions lists for Javascript, CSS & MooTools.

Current completion lists:

• org.quirksmode.dom.w3c_html.completions
• org.quirksmode.dom.w3c_core.completions
• org.quirksmode.dom.w3c_events.completions
• org.quirksmode.dom.w3c_cssom.completions
• org.quirksmode.dom.events.completions
• org.quirksmode.dom.w3c_css.completions

Screencast

Moved the screencast to the article page. It's only 2fps, looks way aswomer irl!

Read more…

Grid Overlay Bookmarklet

by Thomas Aylott Thu, 27 Jul 2006 16:19:00 GMT

Just a quick note to share my version of Andy Budd’s Layout Grid Bookmarklet.

Grid Translucent Centered

Grid Translucent Left-Aligned

This version uses a translucent png.

Share and enjoy!

UPDATE: New scripts for all browsers. Now you can also click the grid on the page to remove it.

Read more…