Code working in JSFiddle but wont work in browser

Question

I'm trying to get this piece of code working from my browser but I can't get it to work. Here is what I am currently tying, does anyone know what I'm missing?

<!DOCTYPE html>
    <head>
        <link rel="stylesheet" type="text/css" href="fader.css"/>
        <script type="text/javascript" src="fader.js"></script>
    </head>
    <body>
    
    <div id="div1">hover over me</div>
    <div id="div2"></div>
    
    </body>
</html>

fader.js

$(document).ready(function(){
    $(function() {
        $('#div1').hover(function() { 
            $('#div2').fadeIn(); 
        }, function() { 
            $('#div2').fadeOut(); 
        });
    });
});

fader.css

#div2 {
    width: 200px;
    height: 200px;
    background: red;
    display: none;
}

Original: http://jsfiddle.net/kevinPHPkevin/4z2zq/

You're not dumb, but you should show the error messages on your console when trying it on your browser. You probably could have answered the question yourself. http://stackoverflow.com/questions/4146598/chromes-alternative-for-firebugs-evaluation-console/4146998#4146998 — Ruan Mendes, Mar 12 '14 at 00:47

score 6 · Accepted Answer · answered Mar 12 '14 at 00:45

6

You haven't imported jquery in your html doc. your js code uses jquery.

<!DOCTYPE html>
<head>
    <link rel="stylesheet" type="text/css" href="fader.css"/>
    <script type="text/javascript" src="fader.js"></script>
    <script type="text/javascript" src="[jqueryversionrighthere]"></script>
</head>
<body>

   <div id="div1">hover over me</div>
   <div id="div2"></div>


</body>
</html>

answered Mar 12 '14 at 00:45

birthofearth

386
4
10

Thank you^^ Adding '' fixed my problem – jake.toString Mar 12 '14 at 00:49
1

@jake.toString: I highly encourage you do read the jQuery tutorial which explains all the things you need to know to get started with jQuery: http://learn.jquery.com/about-jquery/how-jquery-works/ – Felix Kling Mar 12 '14 at 01:13

score 0 · Answer 2 · answered Mar 12 '14 at 00:53

0

please insert this code :

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

answered Mar 12 '14 at 00:53

airi

585
5
21

please add more information such as how your proposed code will solve the problem – Our Man in Bananas Mar 12 '14 at 01:14

Code working in JSFiddle but wont work in browser

2 Answers2