jQuery not working on my site?

Question

I tried using jQuery on my website, but it did not seem to work. I figured I was doing something wrong, so I tried copying a codecademy lesson that I completed onto a test site. Here is the code:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Test Codecademy Lesson</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/elevator.png"/>   
    </body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
}
img {
position: absolute;
}

Javascript/jQuery

$(document).ready(function() {
    $('img').animate({top:'+=100px'},1000)
});

Is someone able to tell me why this code is not working? My browser is Chrome and I have the latest version.

Look in the [JavaScript error console](http://www.netmagazine.com/tutorials/javascript-debugging-beginners) and tell what errors you see there and which lines they point to. — JJJ, Oct 22 '13 at 14:46
What *should* it do? What *does* it do? What kind of errors do you get? — GolezTrol, Oct 22 '13 at 14:47
@Adrift, good point, but rather don't change it, but use a real webserver instead. You can still use a local, lightweight webserver as long as you test over HTTP instead of local files. Any WAMP/LAMP/XAMP configuration will do and you can even find more lightweight alternatives if you like. I'm using http://www.wampserver.com/en/ and I'm pretty happy with it. — GolezTrol, Oct 22 '13 at 14:49
What is wrong? Seems to be working... Unless It is supposed to do something magic your not telling us about... http://jsfiddle.net/QAZe7/ — buzzsawddog, Oct 22 '13 at 14:49
@user2826739 then this statement is false *"I tried using jQuery on my website"* `file://` isn't your website, it's your filesystem. — Kevin B, Oct 22 '13 at 14:49
Sorry, this is supposed to make the image go Down 100px when the document is ready. — user2826739, Oct 22 '13 at 14:49
Should I add it to my online website then and test it there? will it make a difference? — user2826739, Oct 22 '13 at 14:49
You can install local web server software as well. Or use a tool like Netbeans that you can configure to automatically upload files as soon as you save them. — GolezTrol, Oct 22 '13 at 14:52
you should never miss Jquery Library, all the scripts works on top of that jquery Library Check this http://stackoverflow.com/questions/441412/is-there-a-link-to-the-latest-jquery-library-on-google-apis — Dinesh Kanivu, Oct 22 '13 at 15:02

score 6 · Answer 1 · edited May 23 '17 at 11:59

6

You need to Download the jquery Library and save your local files You can download it from

http://jqueryui.com/

or

you have to use this link

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

or for the minified version

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

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js - Version 1.9.1 family, Google hosted

You can refer this also

Is there a link to the "latest" jQuery library on Google APIs?

edited May 23 '17 at 11:59

Community

1
1

answered Oct 22 '13 at 14:52

Dinesh Kanivu

2,551
1
23
55

@Philipp Sander Thanks fro the edit for the minified version – Dinesh Kanivu Oct 22 '13 at 14:58
no problem! i thought i add it, because minified is used in the original code of the question – Philipp Sander Oct 22 '13 at 15:01

score 2 · Answer 2 · answered Oct 22 '13 at 14:53

2

The image won't be loaded by the time document.ready is fired, better use window.load so you can see your effect in action, so replace your following code:

$(document).ready(function() {

for this one:

$(window).load(function() {

answered Oct 22 '13 at 14:53

Nelson

49,283
8
68
81

jQuery not working on my site?

2 Answers2