CODEWITHSUNDEEP
javascripthtmlfirefoxcanvas
Leisure
Leisure

Reputation: 73

Javascript "onmousemove()" works in Chrome but not in Firefox

I already tried Googling but couldn't find any solutions.

The four towers at the bottom are supposed to display different images (less transparent) when the mouse is over them. This works PERFECTLY in Google Chrome but not in Firefox.

here's the website: http://cdelphinus.com/test/mormontowerdefense.html (you can right click->view source) for the entire code(app.js)

here's the problem code:

in my HTML:

<canvas id="Canvas_One" width="1160" height="580" style="border:2px solid yellow;          background-color:black; padding-left:0;margin-left:0;" onmousemove="lolol(event)"    onclick="haha(event)"></canvas>

in my app.js file:

here's a really condensed version of my problem, this works in chrome but not firefox:

//function lolol(event) {
//  event = event || window.event;
//      alert(event.x);
//}

I have a feeling that once that alert above shows up in firefox the rest will be fixed magically.

here's a more detailed version of the stuff going on

function lolol(event) {
event = event || window.event;
ix = event.x - canvas.offsetLeft + 10;  
iy = event.y- canvas.offsetTop  + document.body.scrollTop;
//...
if(iy > 510) {
    var dist = Math.round(ix / 50) - 1;
    if(dist < towerpurchaseoptions.length){
    towerpurchaseoptions[dist].isActive = true;
    //textout(towerpurchaseoptions[dist].name);
     for(var i=0; i<towerpurchaseoptions.length; i++) {
         if(i != dist) {
    towerpurchaseoptions[i].isActive = false;
         }
     }
}  
}
//....
}

if towerpurchaseoptions[n].isActive == true, the image is replaced with a less-transparent image

Upvotes: 0

Views: 916

Answers (1)

Just code
Just code

Reputation: 13801

I checked you problem its just because of the 

function lolol(event) {
     event = event || window.event; //For IE

    ix = event.x - canvas.offsetLeft + 10;

//here ix is ruturning nan

    iy = event.y- canvas.offsetTop  + document.body.scrollTop;

//here iy is ruturning nan

so why this? because event does not have a propery .x in firefox may be some problem you can change it to 

 function lolol(event) {
         event = event || window.event; //For IE

        ix = event.clientX - canvas.offsetLeft + 10;


        iy = event.clientY- canvas.offsetTop  + document.body.scrollTop;

And it will work thanks.

Upvotes: 1

Related Questions