CODEWITHSUNDEEP
javascriptmootools
cksrc
cksrc

Reputation: 2347

Fade or clear div element after a period in MooTools 1.1

Hello I am trying to simulate the fade method provided in mootools 1.2 in 1.1. Due to development restrictions I have to use 1.1. I basically update my div after an ajax response and I want this div to get cleared after some time

var resp = Json.evaluate( response ); $(elem).setHTML('Thanks!'); //Show the message for a while and then clear the div

Thanks for your responses I'm trying to use Dimitar's approach but since I'm not a MooTools expert at all I will need some help

window.addEvent('domready', function(){ $(link_id).addEvent('click', function(){ var a = new Ajax( '{$url}'+this.id, { method: 'get', onComplete: function(response) {
var resp = Json.evaluate( response ); $(resp.id).setHTML('Thank you'); //My stupid approach //setTimeout('$("'+divname+'").setHTML("")',3000);
} }).request();
});
}

So in the context of my code where should I define the Element.extend you propose? I just tried to add it inside the domready function but couldn't recognise the fade method

Upvotes: 0

Views: 1429

Answers (3)

Dimitar Christoff
Dimitar Christoff

Reputation: 26165

to define element prototypes in 1.1x you need Element.extend

Element.extend({
    fade: function(from, to, remove) {
        new Fx.Style(el, "opacity", {
            duration: 500,
            onComplete: function() {
                if (remove)
                    this.element.remove();
            }
        }).start(from, to);
    }
});

var el = $("elem");

el.setHTML('Thanks!');

(function() {
    el.fade(1,0, true);
}).delay(2000);

in this example I have created a simple element.fade() which DOES need start and end value and can optionally remove the element from the dom etc if you dont plan on needing it again.

here's a working example: http://jsfiddle.net/dimitar/cgtAN/

edit as per your request to empty the html:

window.addEvent('domready', function() {
    $(link_id).addEvent('click', function() {
        new Ajax('{$url}' + this.id, {
            method: 'get',
            onComplete: function(response) {
                var resp = Json.evaluate(response), target = $(resp.id);
                target.setHTML('Thank you');
                (function() {
                    target.empty();
                }).delay(3000);
            }
        }).request();
    });
});

Upvotes: 2

Frode
Frode

Reputation: 5710

Never used Mootools much, but after a bit of jsfiddle, it seems like something along these lines would work:

function fadeAfter(id, msec)
{
    setTimeout(function(){    
        new Fx.Styles(id).start({'opacity': ['1', '0']});
    }, msec);
}

Upvotes: 1

cksrc
cksrc

Reputation: 2347

Ok I found a solution using setTimeout

setTimeout('$("'+divname+'").setHTML("")',3000);

where 3000 the waiting time in milliseconds

Upvotes: 0

Related Questions