CODEWITHSUNDEEP
javascriptjqueryhtmlfirefoxcompatibility
Dylan Thepiguy
Dylan Thepiguy

Reputation: 43

What can I do to make the Javascript code on my site work with Firefox

My site - http://wsareviews.comuf.com - doesn't work at all on firefox. It works perfectly fine on Chrome and Safari and mostly on IE 10. Apparently its something to do with the alignIcons method that uses the event thing.

http://wsareviews.comuf.com/scripts.js

Should I use jQuery? If so, can I use jQuery to get the mouse positions and put it back into Javascript? I have no experience with jQuery at all by the way. Its for a school project and I would like it to work in as many browsers as possible except the old IEs.

Edit: so far I'm using JS for getting mouse positions and thats it. I just want a way to use jQuery to get the mouse positions and give it to the javascript code that I've already written. If you go to the link above with the js file and ctrl+f "function alignIcons(e)" you'll find the method that uses the mouse positions.

Upvotes: 0

Views: 101

Answers (1)

thebreiflabb
thebreiflabb

Reputation: 1524

You are trying to access properties of an event object that does not exist.

You are calling the function manually two places, and thus doesn't create an event:

function imageLoaded() {
    imageLoadCount++;
    if (imageLoadCount == numberOfImagesToLoad) {
        alignIcons();
        document.onmousemove = alignIcons;
        cancelLoadingFadeIn = true;
        setTimeout(hideSpinners, 500);
    }
}

function fadeIn() {
    document.getElementById("iconDiv").style.opacity = parseFloat(document.getElementById("iconDiv").style.opacity, 10) + 0.01;
    if (parseFloat(document.getElementById("iconDiv").style.opacity, 10) < 1.0) {
        setTimeout(fadeIn, 1000 / 60);
    } else {
        alignIcons();
    }
}

You should check if window.event returned anything if (!(e && e.clientX)). It seems like Chrome just semi-ignores it (it throws an error), but continues.

function alignIcons(e) {
    document.getElementById("iconDiv").style.height = window.innerHeight - 15 + "px";
    iconWindowWidth = document.getElementById("iconDiv").offsetWidth;
    iconWindowHeight = document.getElementById("iconDiv").offsetHeight;

    if (!e) {
        e = window.event;
        if (!(e && e.clientX)) {
            e = {
                clientX: iconWindowWidth / 2,
                clientY: iconWindowHeight / 2
            };
        }
    }

    mouseX = e.clientX + document.body.scrollLeft;
    mouseY = e.clientY + document.body.scrollLeft;
    alignPopupToCentre();
    setXPositions();
    setYPositions();
    setOpacities();
}

Upvotes: 1

Related Questions