3

I have been having so many problems with getting my JQuery to load properly. I have looked at youtube videos and scoured Google but nothing seems to work :(

The most common problem with JQuery not being loaded properly is that people load the js file BEFORE the JQuery, but I have loaded it in the correct order and I am still having problems.

Before, I was able to run my feature that used JQuery only locally, but now even that isn't working.

Here is my index.html file: 

<!DOCTYPE html> <html> <head> <title> Website </title> <link rel = "stylesheet" href="style.css" /> <!-- Link to css --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="script.js"> </script> <!-- link to js AFTER JQuery--> ` <!-- Import Fonts to Use --> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat" /> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" /> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Muli" /> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto" /> </head> <body> <div class="overlay-navigation"> <nav role="navigation"> <ul> <li><a href="home.html" data-content="The beginning">Home</a></li> <li><a href="about.html" data-content="Curious?">About</a></li> <li><a href="projects.html" data-content="Showcasing my skills">Works</a></li> <li><a href="resume.html" data-content="Reach out for a copy">Resume</a></li> <li><a href="contact.html" data-content="Don't hesitate">Contact</a></li> </ul> </nav> </div> <section class="home"> <div class="open-overlay"> <span class="bar-middle"></span> <span class="bar-bottom"></span> <span class="bar-top"></span> </div> </section> </body> </html>

I have a css file named "style.css"

This is my js file titled "script.js"

$('.open-overlay').click(function() { var overlay_navigation = $('.overlay-navigation'), nav_item_1 = $('nav li:nth-of-type(1)'), nav_item_2 = $('nav li:nth-of-type(2)'), nav_item_3 = $('nav li:nth-of-type(3)'), nav_item_4 = $('nav li:nth-of-type(4)'), nav_item_5 = $('nav li:nth-of-type(5)'), top_bar = $('.bar-top'), middle_bar = $('.bar-middle'), bottom_bar = $('.bar-bottom'); overlay_navigation.toggleClass('overlay-active'); if (overlay_navigation.hasClass('overlay-active')) { top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar'); middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar'); bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar'); overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down') nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item'); nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1'); nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2'); nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3'); nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4'); } else { top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar'); middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar'); bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar'); overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up') nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse'); nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse'); nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse'); nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse'); nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse'); } })

ANY help would be appreciated!! Thank you!!

here is what it shows: enter image description here

Improve this question
1
  • You're trying to attach a listeners to elements before they've been populated in the HTML, so it fails. Give your script tag the defer attribute so that it runs only once the document is parsed. <script src="script.js" defer> Commented Jun 10, 2018 at 6:34

1 Answer 1

Reset to default
1

Your js files should go at the bottom of the body. You are referencing dom elements in your js that do not exist yet because they have not been loaded in the markup.

Move your jquery and js references to the bottom of the body

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

7 Comments

I moved my references so they are the last thing before the closing body tag. However, Brackets still gives me an error in my script.js file saying that $ is not defined. Does this matter? I ran it and it runs fine when I launch the html file on chrome, but the errors won't go away. Any idea why?
@Shania your js file needs to open with the jQuery reference $( document ).ready(function() {, which tells is to wait until jQuery has fully loaded before running. The broswer is telling you that $ is undefined because it's the first character in your custom script, and jQuery has not finished loading by that time.
Yes, I had that earlier in my js file but that didn't cause the errors to go away so I removed it. I added it back just now and the errors are still there. See my new edit with the modified js file
Did you close the document.ready function at the end of your custom script? You need to include });
Let us continue this discussion in chat.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.