jQuery script in html head not working

Question

My jQuery works fine when it is in an external document but not when I put it in the head of the document. Here's the code:

<head>
        <meta charset="utf-8">
        <meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My title</title>
        <link href="css/style.css" rel="stylesheet">
        <link href="css/responsive_styles.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
        <script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
        <script>
            $(document).ready(function(){
                var isChrome = !!window.chrome && !!window.chrome.webstore;
                var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

                if (isChrome){ 
                    $(".welcome-background").css("background-attachment", "scroll");
                    $(".menu-background").css("background-attachment", "scroll");
                    $(".openHours-background").css("background-attachment", "scroll");
                }

                if(iOS){
                    $(".welcome-background").css("background-attachment", "scroll");
                    $(".menu-background").css("background-attachment", "scroll");
                    $(".openHours-background").css("background-attachment", "scroll");
                }
            });   
        </script>
    </head>

javascript 101 where is the jquery script? before your code? — madalinivascu
– madalinivascu, Commented Apr 20, 2017 at 8:43

Super User · Accepted Answer · 2017-04-20 08:43:16Z

4

You have not included jQuery library, It should come before jQuery scripts.

<head>
    <meta charset="utf-8">
    <meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>
    <link href="css/style.css" rel="stylesheet">
    <link href="css/responsive_styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=PT+Serif" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
    <script>
        $(document).ready(function(){
            var isChrome = !!window.chrome && !!window.chrome.webstore;
            var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

            if (isChrome){ 
                $(".welcome-background").css("background-attachment", "scroll");
                $(".menu-background").css("background-attachment", "scroll");
                $(".openHours-background").css("background-attachment", "scroll");
            }

            if(iOS){
                $(".welcome-background").css("background-attachment", "scroll");
                $(".menu-background").css("background-attachment", "scroll");
                $(".openHours-background").css("background-attachment", "scroll");
            }
        });   
    </script>
</head>

answered Apr 20, 2017 at 8:43

Super User

9,6623 gold badges34 silver badges48 bronze badges

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

1 Comment

Reece Over a year ago

Thanks I had the jQuery library at the bottom of the body which worked fine before

Mr. J · Accepted Answer · 2017-04-20 08:50:38Z

0

You need to import your jquery first before your javascript code.

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
    $(document).ready(function(){
      alert('Reece your jQUERY is now ready! :)'); // Check if jquery has been loaded.
    });
  </script>
</head>
<body>

</body>
</html>

That's it..Happy Coding! :)

answered Apr 20, 2017 at 8:50

Mr. J

2457 silver badges26 bronze badges

Collectives™ on Stack Overflow

jQuery script in html head not working

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related