CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
flarow432
flarow432

Reputation: 65

jQuery not working in html file (JS LINT errors such as '$' was used before it was defined)

I am using HTML, CSS, and JS. I am trying to use the JQuery library but it is not being recognized by my html file. I am inserting it above my external .js file, so I don't think that is the issue. Here is what is in my HTML file: 

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

This is what is in my JS file: 

$(document).ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() > 970) {
           $('.navbar').addClass('navbar-fixed-top');
        }
    });
});

My code editor is throwing errors when I save this js file because of errors like:

-'$' was used before it was defined.

-Expected exactly one space between 'fucntion and '('

Anyone know what the issue might be? Thanks in advance.

Upvotes: 0

Views: 176

Answers (3)

Endless
Endless

Reputation: 37786

put this in top of your code where you are using jQuery

/* global $ */

alternativ is prefixing it with window

I don't like using the global $ sign cuz other libs are using it as well. what i usably dose is getting the $ from the closure function like this

jQuery(function($){
  // document is ready, You may use jquery here and now
  $('body')
})

and to get away with jQuery is not defined use window.jQuery instead

ps, always load stuff from https when possible

Upvotes: 0

HexaCubist
HexaCubist

Reputation: 135

This might not be the issue, but you may wish to attempt to load the jquery file by HTTPS (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js), especially if you are running your site on an HTTPS connection.

Otherwise, it seems to work when I test it:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$(window).scroll(function() {
    if ($(window).scrollTop() > 970) {
        $('.navbar').addClass('navbar-fixed-top');
    }
  });
  console.log("done!")
});
</script>

Upvotes: 2

Matheus Cuba
Matheus Cuba

Reputation: 2156

The problem is in your <script> tag, as @B.Fleming said maybe the HTTPS protocol. This tag is working:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Upvotes: 0

Related Questions