JQuery does not work: uncaught type error

Question

I have placed the following JQuery script in my HTML site header just to test if it works:

//in the header
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>

//This is inside the script, it does load according to Chrome Developer Tools
$(document).ready(function(){
  $("#navbar").hide();
});

navbar does not hide and I get the error (in Chrome Developer Tools):

Uncaught TypeError: Object # has no method 'ready'

Have I placed the script in the wrong place? I use Joomla for my site btw.

Site: europebathroom.com

Thanks in advance!

Answer 1

Include Jquery Library in head section

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
 $("#navbar").hide();
});
</script>

Answer 2

Seems like you havent include jquery in your code. Include the jquery, either by refering online or save it as local.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="modules/mod_djmenu/assets/js/catimage.js" type="text/javascript"></script>

//This is inside the script, it does load according to Chrome Developer Tools
$(document).ready(function(){
  $("#navbar").hide();
});

Answer 3

Add this below script. before your script as you need to add jquery script before it.

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