Question

Why doesnt this work properly ?

It should set input width to 300 on first click , and on body click to 100,

if anyone knows element clickout function for mootools please advise

what would be awesome is if u know how to set it back to original box size

http://jsfiddle.net/V6bTN/10/

window.addEvent('load', function() {
    var box = $$('#searchfeed');
    var isopen = box.hasClass('open');

    box.addEvent('click', function myfunction(event) {

        box.addClass('open');
        box.morph({
            width: 300
        });

    });


    if (isopen) {
        $(document.body).addEvent('click', function(event) {
            box.morph({
                width: 100
            });
            box.removeClass('open');

        });
    }



});​

Answer 1

here’s a simple outerClick function.

Element.Events.outerClick = {
    base : 'click',    
    condition : function(event){
        event.stopPropagation();
        return false;
    },
    onAdd : function(fn){
        this.getDocument().addEvent('click', fn);
    },
    onRemove : function(fn){
        this.getDocument().removeEvent('click', fn);
    }
};

use:

el.addEvent('outerClick', function(){ this.destroy(); });