jQuery script which works in Chrome, but does not work in FireFox and Opera Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of jQuery script which works in Chrome, but does not work in FireFox and Opera without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I wrote a script that works wonders in Chrome, but it does not work in Opera and Firefox. I’m new in JavaScript. Prompt in what could be wrong?

$(function() {
    $("#question_tab").hover(function() {
        if ($("#question").css("left") == "100%")
            $("#question").css("margin-left", "-50px");
    }, function() {
        if ($("#question").css("left") == "100%")
            $("#question").css("margin-left", "-38px");
    });

    $("#question_tab").click(function() {
        if ($("#question").css("left") == "100%") {
            $("#question").animate({
                marginLeft: "-380px",
                left: "50%"
            });
        } else {
            $("#question").animate({
                marginLeft: "-38px",
                left: "100%"
            });
        }
    });
});

I think problem is in checking – if ($("#question").css("left") == "100%")

HTML, JS and CSS here: http://jsfiddle.net/HjS9z/4/

Problem with sliding question form.

Answer

Debugging would be your best friend here (easiest way since you are new to JS could be to use alert() or it would be better to either set break points or use console.log()

** for other readers I know alert() is not preferred, I’m simply giving options for those who are new to JS and debugging

You would see that for instance: $("#question").css("left") value equals ‘100%’ in chrome, but in firefox for instance that value is defined in pixels (837px for instance). So the reason your code fails in other browsers is because your “IF” statement never resolves to true (match).

We are here to answer your question about jQuery script which works in Chrome, but does not work in FireFox and Opera - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji