jQuery works on Codeacademy but not in Firefox when deployed via github.io

StackOverflow https://stackoverflow.com/questions/21217291

Question

I copy/pasted the code from Codeacademy jQuery ex. 4, "What is jQuery?", into identical html, css, and javascript files on my laptop. I then pushed this to my github.io; the jQuery code doesn't seem to be working in my Firefox browser (version 26 for Ubuntu canonical - 1.0). The code is definitely working on the Codeacademy screen.

Here's index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>What Say You?</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="ready">I'm ready!</div>
        <div id="notready">You'll never take me alive, jQuery!</div>
    </body>
</html>

Here's stylesheet.css

div {
    height:100px;
    width:100px;
    border-radius:5px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-family: Verdana, Arial, Sans-Serif;
    margin-right:5px;
}

#ready {
    background-color:#008800;
    color:#FFFFFF;
}

#notready {
    background-color:#FF0000;
    color:#FFFFFF;
}

Here's script.js:

$(document).ready(function() {
    $('#notready').fadeOut(1000);
});

The page is here: http://bonza-times.github.io/

How can I get this code to work correctly in Firefox? Thanks!

Was it helpful?

Solution 2

You need to explicitly load jQuery in your HTML page. jQuery is a custom framework, and not available in browsers by default.

Simply add this line to your <head>, before your existing <script> tag:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

The result should be like this:

<!DOCTYPE html>
<html>
    <head>
        <title>What Say You?</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div id="ready">I'm ready!</div>
        <div id="notready">You'll never take me alive, jQuery!</div>
    </body>
</html>

OTHER TIPS

In codeacademy, jquery is implicitly loaded but if you want it on your standalone page, you need to include it maualy in your <head>

with a cdn like:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

or download it in your project and add

<script src="path/to/your/js/jquery.js"></script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top