Question

I am using mootools1.2 as my js framework.

I have one problem regarding the highlight my some html element when page gets load.

I need to highlight my error message if any on page when page loads.

For example.

When page load then error div have #FFFFFF as bg color.
For highlight it will use #FC0000 as a bg color and then after it will get back to #FFFFFF bg color.

Any one can please suggest how can i do this..

Thanks in advance.

Avinash

Answer 1

MooTools way:

window.addEvents({
 domready: function(){
  var errorMsg = $$('.errorMessageEl');
  errorMsg.highlight('#FC0000');
 }
});

Here’s an example: http://mootools.net/shell/s7mRh/

Repeating the highlight

Repeating the highlight a number of times is a bit more complicated– you’d probably want to create a mixin like this:

Array.implement({
    blink: function(color, repeats){
        this.set('tween', {
            link: 'chain'
        });

        var i = 0;
        while (i <= repeats-1){
            this.highlight(color);
            i++;
        }

        return this;
    }
});

var errorMsg = $$('.errorMessageEl');

errorMsg.blink('#f00', 3);

Example: http://mootools.net/shell/8M9xx/1/