jQuery works in jsfiddle, but not in html file?

Question

I checked many times, but I have no idea why the jQuery wont work. It works in jsfiddle!

html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josue Espinosa</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
</head>
<body>
<div id="menu">

</div>
</body>
</html>

css:

#menu{
    width:15px;
    height:200px;
    background:red; 
}

jquery:

$('#menu').hover(function(){
     $("#menu").stop().animate({width : "300px"});
});

apoq · Accepted Answer · 2013-02-27 00:16:33Z

6

It seems like problem lies here:

<script src="animate.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

Your animate.js goes before jquery loads

answered Feb 27, 2013 at 0:16

apoq

1,45413 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Josue Espinosa Over a year ago

it works when I put it internally right before the </body>, but not when it is external.

apoq Over a year ago

Yeah, Just've noticed, you seem not used the ready function, and your code fires before the #menu is available.

Explosion Pills · Accepted Answer · 2013-02-27 00:14:52Z

4

You need to either wrap your jquery code in $(function () {}) or (preferred) move the code to just before </body>.

answered Feb 27, 2013 at 0:14

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Comments

BenR · Accepted Answer · 2013-02-27 00:25:09Z

Since the other answers didn't seem to work out for you, I'm going to take a stab at a suggestion.

I'm guessing that you're initializing your JavaScript in a location where the element you're adding the event listener to isn't available yet. Here is a solution to this problem.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Josue Espinosa</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="animate.js"></script>
</head>
<body>
    <div id="menu">
    </div>
    <script type="text/javascript">
        $('#menu').hover(function () {
            $("#menu").stop().animate({ width: "300px" });
        });
    </script>
</body>
</html>

In this example, the JavaScript is immediately below the element you're adding the listener to, so it is guaranteed to be available in the DOM.

Alternatively, you can wrap your JS around an event to fire after the document is ready. Here is an example:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Josue Espinosa</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="animate.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#menu').hover(function () {
                $("#menu").stop().animate({ width: "300px" });
            });
        });
    </script>
</head>
<body>
    <div id="menu">
    </div>
</body>
</html>

It is also important to note the sequence of the JavaScript elements.

Collectives™ on Stack Overflow

jQuery works in jsfiddle, but not in html file?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related