Jquery doesn't work on the bottom, but works in the head?

Question

function closeMessage(el) {
  el.addClass('is-hidden');
}

$('.js-messageClose').on('click', function(e) {
  closeMessage($(this).closest('.Message'));
});


$(document).ready(function() {
  setTimeout(function() {
    closeMessage($('#js-timer'));
  }, 5000);
});

* {
  box-sizing: border-box;
}

.Message {
  display: table;
  position: relative;
  margin: 40px auto 0;
  width: auto;
  background-color: #0074d9;
  color: #fff;
  transition: all 0.2s ease;
}
.Message.is-hidden {
  opacity: 0;
  height: 0;
  font-size: 0;
  padding: 0;
  margin: 0 auto;
  display: block;
}
.Message--orange {
  background-color: #f39c12;
}
.Message--red {
  background-color: #ff4136;
}
.Message--green {
  background-color: #2ecc40;
}
.Message-icon {
  display: table-cell;
  vertical-align: middle;
  width: 60px;
  padding: 30px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.25);
}
.Message-icon > i {
  width: 20px;
  font-size: 20px;
}
.Message-body {
  display: table-cell;
  vertical-align: middle;
  padding: 30px 20px 30px 10px;
}
.Message-body > p {
  line-height: 1.2;
  margin-top: 6px;
}
.Message-button {
  position: relative;
  margin: 15px 5px -10px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px rgba(0, 0, 0, 0.4);
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  font-family: 'Source Sans Pro';
  color: #fff;
  outline: none;
  cursor: pointer;
}
.Message-button:hover {
  background: rgba(0, 0, 0, 0.3);
}
.Message-button:active {
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0px rgba(0, 0, 0, 0.4);
  top: 3px;
}
.Message-close {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  border: none;
  outline: none;
  font-size: 20px;
  right: 5px;
  top: 5px;
  opacity: 0;
  cursor: pointer;
}
.Message:hover .Message-close {
  opacity: 1;
}
.Message-close:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.u-italic {
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="Message">
  <div class="Message-icon">
    <img class="icn-img" src="img/turkey.png">
  </div>
  <div class="Message-body">
    <h3 style="text-align: center;"> Have a great Thanksgiving Day with your loved ones!  </h3>
 <p style="text-align: center;">"There is always something to be thankful for."</p>
 <button class="Message-button"><a target="_blank" style="color: white;" href="https://en.wikipedia.org/wiki/Thanksgiving">Learn More</a></button> 
  </div>
  <button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<script src="js/jquery-3.2.1.js"></script>
</body>

I read a similar question and one answered that Scripts should always be at the bottom of the HTML. The thing is though, when I do that the scripts of my code doesn't work anymore. And it is because I placed the Jquery at the bottom. I am using Version 3.2.1.

Works: <head><script src="js/jquery-3.2.1.js"></script></head>

Does not work: <body><script src="js/jquery-3.2.1.js"></script></body>

Fiddle: https://jsfiddle.net/dhtzL8cz/

Somehow it works in the fiddle, but not on my end.

Can you create a working snippet using `<>` so that your issue can be replicated quickly? — gurvinder372, Nov 24 '17 at 09:21
jQuery must be loaded before any other script that uses it. That's as simple as that. — Jeremy Thille, Nov 24 '17 at 09:21
jQuery needs to be loaded before other script attempts to use it. That is all. — user3154108, Nov 24 '17 at 09:21
@JeremyThille When I got to Google Page Speed insights, it tells me that `Your page has 1 blocking script resources` — Karen Page, Nov 24 '17 at 09:29
jsfiddle by default uses jquery. You don't need to load jquery over there :) That is why your code works there because jquery is already loaded by jsfiddle. — Vinod Bhavnani, Nov 24 '17 at 09:30
@VinodBhavnani jsfiddle doesn't use jquery *by default*. The fiddle linked in the question *does* use jquery, but only because someone added it at some point. — freedomn-m, Nov 24 '17 at 09:44

score 4 · Accepted Answer · answered Nov 24 '17 at 09:24

Jquery library needs to be loaded before you can load your custom js file which has jquery code in it.

For example if you have a script.js file in which you have written your jquery code, that needs to be loaded after jquery.js.

Otherwise your code will not work. If you load jquery.js at the bottom of your body, the browser will load the entire html first before jquery, hence causing the issue.

It is not necessary to put js files at the bottom. It is all based on your need. JS files which are not necessary to be loaded before the dom loads can be put at the bottom.

For example if you have a tracking.js file, which tracks the user's behaviour, that could be put at the bottom.

Hope this helps :)

jquery library is very light :) Don't need to worry about your site speed :) — Vinod Bhavnani, Nov 24 '17 at 09:31
if you use jQuery CDN chance is jQuery library is already cached in browser, too, speeding things up even more — user3154108, Nov 24 '17 at 09:37

score 1 · Answer 2 · answered Nov 24 '17 at 09:39

You are probably loading scripts requiring jQuery before this one is called.

<body>
    <script src="js/[your custom scripts]"></script>
    <script src="js/jquery-3.2.1.js"></script>
</body>

You should add these scripts after you call jquery

<body>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/[your custom scripts]"></script>
</body>

If some for reason this is not possible, you can set an event listener in order to run them after the whole page assets are loaded wrapping them as follows:

document.addEventListener("DOMContentLoaded", function(event) { 
     enter code here//The content of your scripts here
});

score 0 · Answer 3 · answered Nov 24 '17 at 09:50

call custom jQuery code after jQuery in folder its working fine, you only have to do is cal your custom jQuery code after importing jQuery in footer . hope it helps.

here is the codepen link it works

codepen.io link of the working code

<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.Message {
  display: table;
  position: relative;
  margin: 40px auto 0;
  width: auto;
  background-color: #0074d9;
  color: #fff;
  transition: all 0.2s ease;
}
.Message.is-hidden {
  opacity: 0;
  height: 0;
  font-size: 0;
  padding: 0;
  margin: 0 auto;
  display: block;
}
.Message--orange {
  background-color: #f39c12;
}
.Message--red {
  background-color: #ff4136;
}
.Message--green {
  background-color: #2ecc40;
}
.Message-icon {
  display: table-cell;
  vertical-align: middle;
  width: 60px;
  padding: 30px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.25);
}
.Message-icon > i {
  width: 20px;
  font-size: 20px;
}
.Message-body {
  display: table-cell;
  vertical-align: middle;
  padding: 30px 20px 30px 10px;
}
.Message-body > p {
  line-height: 1.2;
  margin-top: 6px;
}
.Message-button {
  position: relative;
  margin: 15px 5px -10px;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 3px rgba(0, 0, 0, 0.4);
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  font-family: 'Source Sans Pro';
  color: #fff;
  outline: none;
  cursor: pointer;
}
.Message-button:hover {
  background: rgba(0, 0, 0, 0.3);
}
.Message-button:active {
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 0px rgba(0, 0, 0, 0.4);
  top: 3px;
}
.Message-close {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  border: none;
  outline: none;
  font-size: 20px;
  right: 5px;
  top: 5px;
  opacity: 0;
  cursor: pointer;
}
.Message:hover .Message-close {
  opacity: 1;
}
.Message-close:hover {
  background-color: rgba(0, 0, 0, 0.5);
}
.u-italic {
  font-style: italic;
}


</style>
</head>
<body>
<div class="Message">
  <div class="Message-icon">
    <img class="icn-img" src="img/turkey.png">
  </div>
  <div class="Message-body">
    <h3 style="text-align: center;"> Have a great Thanksgiving Day with your loved ones!  </h3>
    <p style="text-align: center;">"There is always something to be thankful for."</p>
    <button class="Message-button"><a target="_blank" style="color: white;" href="https://en.wikipedia.org/wiki/Thanksgiving">Learn More</a></button> 
  </div>
  <button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>

<script
  src="https://code.jquery.com/jquery-3.2.1.js"
  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
  crossorigin="anonymous"></script>

<script>

function closeMessage(el) {
  el.addClass('is-hidden');
}

$('.js-messageClose').on('click', function(e) {
  closeMessage($(this).closest('.Message'));
});


$(document).ready(function() {
  setTimeout(function() {
    closeMessage($('#js-timer'));
  }, 5000);
});
</script>

 </body>
</html>

Jquery doesn't work on the bottom, but works in the head?

3 Answers3