CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shania
Shania

Reputation: 2535

Trouble Linking JQuery to HTML with correct order

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

Upvotes: 3

Views: 73

Answers (1)

Claire
Claire

Reputation: 3184

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

Upvotes: 1

Related Questions