CODEWITHSUNDEEP
javascriptjqueryloadonload
Jules
Jules

Reputation: 14510

jQuery not loading at all

I'm trying out jQuery for the first time, and I'm not sure how to make it work properly. I've included the following code near my opening <head> tag:

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

Followed by the following jQuery code:

<script>
    $('.darkmask > img').hover(function(){
             $(this).parent().toggleClass('darkmask-hover');
    })​
</script>

Unfortunately, this code doesn't work when I try it in a browser, or in JSFiddle. However, when I set JSFiddle's framework to load jQuery itself, rather than loading jQuery through my own code, the animation works properly.

Am I loading jQuery wrong? If so, what's the right way?

Upvotes: 0

Views: 87

Answers (5)

Matt27
Matt27

Reputation: 325

You do need to wrap your jQuery code within the ready function, like this:

$(document).ready(function(){
    // put your code here.
});

Also make sure your script tags have type="text/javascript" as an attribute otherwise it won't get run as javascript.

Upvotes: 0

Martin
Martin

Reputation: 6687

Wrap your code in:

$(function() {
    .... Your code here ...

});

It will mean your code is executed after the DOM tree is loaded.

Upvotes: 0

Cranio
Cranio

Reputation: 9837

PRoblem is, your code in JSFiddle is executed on the loading on the page. In your code instead, the execution happens when the HTML elements are not yet loaded because it's in the HEAD, so the selectors like .darkmask actually refer to... nothing.

The solution is to use:

$(document).ready(
function()
{
 ... your code here
}

To ensure that it is executed when the page is loaded and ready, all the HTML elements are there and therefore JQuery selectors can operate on something.

Upvotes: 2

Flater
Flater

Reputation: 13763

Wrap your entire code in the following:

$(document).ready(function() {

    //ALL CODE GOES HERE

});

Upvotes: 0

Hidde
Hidde

Reputation: 11911

Are there any HTML elements when the code is executed?

Try:

$(function () { // this function executes when the page loads
   alert(x);
   // put your code here
});

Upvotes: 0

Related Questions