MooTools Gone Wild: Element Flashing (original) (raw)

If you're like me and lay awake in bed at night, you've flipped on the TV and seen the commercials: misguided, attention-starved college girls fueled by alcohol ruining their futures by flashing lame camera-men on Spring Break. Why do they do it? Attention, of course. That got me to thinking -- I should go download some what about when we want a user's attention to focus on a specific element on the page without using cheesy graphics? Armed with the latest MooTools trunk and a dream, I've implemented flash(), which you can use on any element on the page.

The XHTML

The above is just some sample XHTML -- you can make your XHTML code look however you want.

The MooTools JavaScript

Element.implement({ flash: function(to,from,reps,prop,dur) {

    //defaults
    if(!reps) { reps = 1; }
    if(!prop) { prop = 'background-color'; }
    if(!dur) { dur = 250; }
    
    //create effect
    var effect = new Fx.Tween(this, {
            duration: dur,
            link: 'chain'
        })
    
    //do it!
    for(x = 1; x <= reps; x++) {
        effect.start(prop,from,to).start(prop,to,from);
    }
}

});

You feed the flash function 2-5 parameters:

• From: The color you want the element to flash to first.
• To: The color you want the element to flash to next.
• Reps: Number of times to repeat the flash.
• Property: Property to flash. Background color works best.
• Duration: The duration of the color change

Slick and simple!

The Usage

/* flash on click */ $('flash-link').addEvent('click', function () { $('flash-me').flash('#fff','#fffea1',5,'background-color',500); });

/* flash on ajax complete */ $('flash-link-ajax').addEvent('click', function () { //make the ajax call var req = new Request({ method: 'get', url: 'element-flashing.php', data: { 'do' : '1' }, onRequest: function() { }, onComplete: function(response) { $('flash-me-ajax').set('text',response).flash('#fff','#fffea1',5,'background-color',500); } }).send();

});

/* flash on scroll completion */ $('flash-link-scroll').addEvent('click', function() { var scroller = new Fx.Scroll(window, { onComplete: function() { $('scroll-to-me').flash('#fff','#fffea1',10); } }).toElement('scroll-to-me'); });

There are three examples above. The first makes an element flash right when it's clicked. The second flashes when an AJAX request is complete. The third scrolls down to an element on the page and flashes upon arrival.

Recent Features

Send Text Messages with PHP

Kids these days, I tell ya. All they care about is the technology. The video games. The bottled water. Oh, and the texting, always the texting. Back in my day, all we had was...OK, I had all of these things too. But I still don't get...

Introducing MooTools Templated

One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

Incredible Demos

MooTools Text Flipping

There are lots and lots of useless but fun JavaScript techniques out there. This is another one of them. One popular April Fools joke I quickly got tired of was websites transforming their text upside down. I found a jQuery Plugin by Paul...

Introducing MooTools Dotter

It's best practice to provide an indicator of some sort when performing an AJAX request or processing that takes place in the background. Since the dawn of AJAX, we've been using colorful spinners and imagery as indicators. While I enjoy those images, I am...