CODEWITHSUNDEEP
jquerycdn
hartjacko
hartjacko

Reputation: 45

How do I include JQuery from a CDN?

I am new to JQuery and am wondering how I reference google's CDN in order to allow my JQuery file to work. My script is not running because it will not reference the JQuery CDN. All I am trying to do below is to have my image be resized when I hover my mouse over it. It really should not be too hard, but I cannot figure out how to reference the JQuery CDN. Any help is much appreciated. Thanks!

<!DOCTYPE html>
<html>
<head>
<title>Image Resize</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
var ht = $("img").height(),
    wd = $("img").width(),
    mult = 1.5; 

$("img").on('mouseenter', function () {
    $(this).animate({
        height: ht * mult,
        width: wd * mult
    }, 500);
});
$("img").on('mouseleave', function () {
    $(this).animate({
        height: ht,
        width: wd
    }, 500);
})
</script>

</head>


<body>

<img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_google_box.png" width="200" height="200" border="5" alt="" style="border-color:red" />

</body>



</html>

Upvotes: 1

Views: 14837

Answers (3)

Kellen Stuart
Kellen Stuart

Reputation: 8893

JQuery is included properly, but you have wait until the document is fully loaded before you call it.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
    $(document).ready(function() { // this waits until the document is fully loaded
    // Put custom logic here    
});
</script>

Also, should only put external CSS includes in the <head> section. Generally JavaScript files are included at the bottom of the <body> for performance reasons.

Upvotes: 4

Ibtsam Ahmad
Ibtsam Ahmad

Reputation: 421

For jQuery to work, You need to use $(document).ready() to wait for the document to fully load before executing the jQuery code. Here is the correct code:

  <!DOCTYPE html>
    <html>
        <head>
            <title>Image Resize</title>
            <script src="https://pagecdn.io/lib/jquery/3.2.1/jquery.min.js"></script>
            <script>
                window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><\/script>');
            </script>

            <script>

            $(document).ready( function() {
                var ht = $("img").height(),
                    wd = $("img").width(),
                    mult = 1.5; 

                $("img").on('mouseenter', function () {
                    $(this).animate({
                        height: ht * mult,
                        width: wd * mult
                    }, 500);
                });

                $("img").on('mouseleave', function () {
                    $(this).animate({
                        height: ht,
                        width: wd
                    }, 500);
                });
            });

            </script>
        </head>
        <body>
            <img src="https://cdn1.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/512/social_google_box.png" width="200" height="200" border="5" alt="" style="border-color:red" />
        </body>
    </html>

Here I have specified 2 CDNs to make sure jQuery gets loaded in case Google CDN is blocked in the country of your origin.

Upvotes: 1

Hari Reddy
Hari Reddy

Reputation: 3858

Just put your Jquery Code in to a block like this - 

<script>
$( document ).ready(function() {
  // Jquery Code here
});

</script>

You need to do this because when you use code like $("img").height(), you don't want the Jquery code to execute before the browser has rendered the <img> tag.

You can read more about this here - http://learn.jquery.com/using-jquery-core/document-ready/

Upvotes: 2

Related Questions