Question

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 1

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).