highlight code using mootools1.2

Question

Hi all,

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

I don't remember exact mootools syntax, but the idea is something like that:

window.addEvent("onload",function() 
{
$('divName').style.backgroundColor='#FC0000';
setTimeout($('divName').style.backgroundColor='#FFFFFF',5000) // will wait 5 seconds before returning to orig. color
}
);

If you want it to blink, you can write a function like this:

function blinkit(){
var intrvl=0;
for(nTimes=0;nTimes<3;nTimes++){
intrvl += 1000;
setTimeout("$('divName').bgColor='#0000FF';",intrvl);
intrvl += 1000;
setTimeout("$('divName').bgColor='#FFFFFF';",intrvl);
}
}

source:

http://w3schools.invisionzone.com/index.php?showtopic=21893

Answer 2

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/