Question

My website at http://derek.genevievehoward.com/ will not display in Firefox, even though the HTML and CSS are valid. The body has display:none; in the CSS but my script should fade the body in with Javascript.

When I look at the developer tools in Firefox, it loads all the scripts, CSS, and HTML, but it seems that the fade in doesn’t happen. My guess is that the Javascript isn’t executing automatically when the page loads, but I have no idea why that would be.

I have tried commenting out my link to the CSS, then my links would load in the other content with jQuery.

Answer 1

You’re calling script.js twice, I’d suggest taking the first one out of the header. You should also put your jquery functions in a document ready function.

e.g.

$(document).ready(function() {
$(this).css("display", "block");
    //Fade in
    $("body").fadeIn(2000, function () {
        notify("My page is currently being changed. Expect brokenness.");
        $("article").fadeIn(1000);
    });

    //Link fades
    $("nav a").hover(function () {$(this).fadeTo(300,1)},function () {$(this).fadeTo(300,.3)});

    //notifications
    function notify(message) {
        document.getElementById("notifyText").innerHTML = message;
        $("#notification").fadeIn(500).fadeOut(4000);
    }

    //fade new content
    function fadeLoad(newUrl) {
        $("article").fadeOut(1000,function () { 
            $("article").load(newUrl, function () { 
                $("article").fadeIn(1000);
                });
        })
    }
    });