Search code examples
javascriptjqueryhtmlcssmaterialize

JavaScript isn't working in Materialize CSS

I've recently been playing around with Materialize-css trying to get use to building websites. However, I noticed that when I try to add JavaScript features it does not seem to work. I've double checked to make sure I have all the right folders in place - js, css, & fonts, and the correct script loading as well. Here is a sample of my jQuery & index.html file:

    $('.parallax').parallax();
$('.dropdown-trigger').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
  <html>
  <head>
    <title>Title</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>

  <body>
    
    

    <ul id="dropdown1" class="dropdown-content">
      <li><a href="#!">macOS</a></li>
      <li><a href="#!">iOS</a></li>
      <li class="divider"></li>
      <li><a href="#!">Android</a></li>
    </ul>


    <!--<div class="navbar-fixed">-->
      
      <nav>
        <div class="nav-wrapper" style="background-color: #323643;">
          <a href="#" class="brand-logo"> Logo</a>
          <ul id="nav-mobile" class="right hide-on-med-and-down">
            <li><a href="sass.html">Home</a></li>
            <li><a href="badges.html">About</a></li>
            <li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
          </ul>
        </div>
        

      </nav>
      <!--</div>-->

      <div class="parallax-container">
        <div class="parallax"><img src="images/oneway.jpg"></div>
      </div>
      <div class="section white">
        <div class="row container">
          <h2 class="header">Parallax</h2>
          <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
        </div>
      </div>
      <div class="parallax-container">
        <div class="parallax"><img src="images/oneway.jpg"></div>
      </div>

      <!--JavaScript at end of body for optimized loading-->
      <script type="text/javascript" src="js/materialize.min.js"></script>
      
    </body>
    </html>

As you can see I'm trying to add a Parallax, and a drop down menu button to my website. In order to do this I've been instructed to add the jQuery '$('.parallax').parallax();', and '$('.dropdown-trigger').dropdown();', in the $(document).ready(function()) in the materialize.js file. See the documentation here: https://materializecss.com/parallax.html, & https://materializecss.com/dropdown.html.

Here is a picture of what I'm getting when I run this code: enter image description here

The Downloads drop down button should be displaying one, two, three, etc., when I click it, and there should be a background image using the Parallax. Does anyone notice something I'm missing?

Solution

  • I think your library placing is wrong. Please check it with below changes. Now I am not getting any error

     

 $(document).ready(function(){
        $('.parallax').parallax();
    $('.dropdown-trigger').dropdown();
  });
        
    <!DOCTYPE html>
      <html>
      <head>
        <title>Title</title>
        <!--Import Google Icon Font-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

         <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js'></script>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      </head>

      <body>
        
        

        <ul id="dropdown1" class="dropdown-content">
          <li><a href="#!">macOS</a></li>
          <li><a href="#!">iOS</a></li>
          <li class="divider"></li>
          <li><a href="#!">Android</a></li>
        </ul>


        <!--<div class="navbar-fixed">-->
          
          <nav>
            <div class="nav-wrapper" style="background-color: #323643;">
              <a href="#" class="brand-logo"> Logo</a>
              <ul id="nav-mobile" class="right hide-on-med-and-down">
                <li><a href="sass.html">Home</a></li>
                <li><a href="badges.html">About</a></li>
                <li><a class="dropdown-trigger" href="#" data-target="dropdown1">Downloads<i class="material-icons right">arrow_drop_down</i></a></li>
              </ul>
            </div>
            

          </nav>
          <!--</div>-->

          <div class="parallax-container">enter code here
            <div class="parallax"><img src="images/oneway.jpg"></div>
          </div>
          <div class="section white">
            <div class="row container">
              <h2 class="header">Parallax</h2>
              <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
            </div>
          </div>
          <div class="parallax-container">
            <div class="parallax"><img src="images/oneway.jpg"></div>
          </div>

          
        </body>
        </html>