CODEWITHSUNDEEP
javascripthtmlonmouseout
ashish dabral
ashish dabral

Reputation: 69

onmouseout not firing properly

I have this code which is supposed to fire on mouseover and it's counterpart to do the opposite on onmouseout:

colinc();

function colinc(){

    var hexnum=number.toString(16);
    var hexcolor="#"+hexnum+hexnum+hexnum;
    document.getElementById("c"+x).style.backgroundColor=hexcolor;
    number=number+8;
    if(number<=184)
        setTimeout(colinc,50);
}

The counter part only has the change of number = number-8; and number>=40; The problem is i have multiple boxes that should light up with color change on mouseover and lightdown with mouseout. when i move slowly over my boxes(large in no.) then everything is ok but when i move quickly some boxes do not light down...it looks like the onmouseout doesn't happen if i pass very quickly. Any help?

function flash(x){
number=0;
var cc = document.getElementById("c"+x);
var cs=document.defaultView.getComputedStyle(cc,null);
var bg=cs.getPropertyValue('background-color');
var str=""+bg;
var n=str.replace("rgb","");
    n=n.replace("(","");
    n=n.replace(")","");
var arr=n.split(",");
number=parseInt(arr[0]);

colinc();

function colinc(){

    var hexnum=number.toString(16);
    var hexcolor="#"+hexnum+hexnum+hexnum;
    document.getElementById("c"+x).style.backgroundColor=hexcolor;
    number=number+8;
    if(number<=184)
        setTimeout(colinc,50);
}
}

function flashe(x){
number=0;
var cc = document.getElementById("c"+x);
var cs=document.defaultView.getComputedStyle(cc,null);
var bg=cs.getPropertyValue('background-color');
var str=""+bg;
var n=str.replace("rgb","");
    n=n.replace("(","");
    n=n.replace(")","");
var arr=n.split(",");
number=parseInt(arr[0]);

colinc();

function colinc(){

    var hexnum=number.toString(16);
    var hexcolor="#"+hexnum+hexnum+hexnum;
    document.getElementById("c"+x).style.backgroundColor=hexcolor;
    number=number-8;
    if(number>=40)
        setTimeout(colinc,40);
}

}

This is my full js code

Upvotes: 0

Views: 1330

Answers (3)

ashish dabral
ashish dabral

Reputation: 69

I have solved the problem of cleartimeout. I created two arrays to hold the current mouseover and mouseout setTimeout ids of every box according to their Id. Everytime a mouseout is called it first clears its corresponding mouseover from the array and same for mouseout.

Upvotes: 0

RobG
RobG

Reputation: 147513

In your code:

> function colinc(){
> 
>     var hexnum=number.toString(16);

The identifier number hasn't be declared or initialised, so you get a reference error and the script fails. Before the above line, you should probably add:

    var number = 0;

or give number some other value.

>     var hexcolor="#"+hexnum+hexnum+hexnum;
>     document.getElementById("c"+x).style.backgroundColor=hexcolor;
>     number=number+8;
>     if(number<=184)
>         setTimeout(colinc,50);

But here you need access to a global number, so you can keep a reference in a closure or make number global. If you're going to do that, give it a better name, like *colnic_counter* or something that is unlikely to clash with some other global.

> }

Something like:

var colinc = (function() {
    var num = 0;
    return function() {
        var hexnum = num.toString(16);
        var hexcolor = "#" + hexnum + hexnum + hexnum;
//        document.getElementById("c"+x).style.backgroundColor=hexcolor;
         console.log(hexcolor);
        num += 8;

        if (num <= 184)
            setTimeout(colinc,50);
    }
}());

colinc();

Note that since a function expression is used to initialise the function, you have to call it afterward.

Upvotes: 0

Konstantin Dinev
Konstantin Dinev

Reputation: 34915

Check whether the events fire properly by logging them in the console:

function MouseOverHandler(event) {
    console.log('mouseover');
}

function MouseOutHandler(event) {
    console.log('mouseout');
}

Also do you ever halt the execution of either handlers when the opposite event happens. This would be done via getting the timeout id and canceling it.

var mouseOverTimeout, mouseOutTimeout;

function colinc(){
    clearTimeout(mouseOutTimeout);
    mouseOverTimeout = setTimeout(colinc,50);
}

function MouseOutHandler(event) {
    clearTimeout(mouseOverTimeout);
    mouseOutTimeout = setTimeout(MouseOutHandler,50);
}

Upvotes: 2

Related Questions