title: JavaScript isn't working in Materialize CSS
body: <p>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, &amp; fonts, and the correct script loading as well. Here is a sample of my jQuery &amp; index.html file:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $('.parallax').parallax();
  $('.dropdown-trigger').dropdown();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;!--Import Google Icon Font--&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
      &lt;!--Import materialize.css--&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/&gt;
  
      &lt;!--Let browser know website is optimized for mobile--&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      
      
  
      &lt;ul id="dropdown1" class="dropdown-content"&gt;
        &lt;li&gt;&lt;a href="#!"&gt;macOS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#!"&gt;iOS&lt;/a&gt;&lt;/li&gt;
        &lt;li class="divider"&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#!"&gt;Android&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  
      &lt;!--&lt;div class="navbar-fixed"&gt;--&gt;
        
        &lt;nav&gt;
          &lt;div class="nav-wrapper" style="background-color: #323643;"&gt;
            &lt;a href="#" class="brand-logo"&gt; Logo&lt;/a&gt;
            &lt;ul id="nav-mobile" class="right hide-on-med-and-down"&gt;
              &lt;li&gt;&lt;a href="sass.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="badges.html"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="dropdown-trigger" href="#" data-target="dropdown1"&gt;Downloads&lt;i class="material-icons right"&gt;arrow_drop_down&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          
  
        &lt;/nav&gt;
        &lt;!--&lt;/div&gt;--&gt;
  
        &lt;div class="parallax-container"&gt;
          &lt;div class="parallax"&gt;&lt;img src="images/oneway.jpg"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="section white"&gt;
          &lt;div class="row container"&gt;
            &lt;h2 class="header"&gt;Parallax&lt;/h2&gt;
            &lt;p class="grey-text text-darken-3 lighten-3"&gt;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.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="parallax-container"&gt;
          &lt;div class="parallax"&gt;&lt;img src="images/oneway.jpg"&gt;&lt;/div&gt;
        &lt;/div&gt;
  
        &lt;!--JavaScript at end of body for optimized loading--&gt;
        &lt;script type="text/javascript" src="js/materialize.min.js"&gt;&lt;/script&gt;
        
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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: <a href="https://materializecss.com/parallax.html" rel="nofollow noreferrer">https://materializecss.com/parallax.html</a>, &amp; <a href="https://materializecss.com/dropdown.html" rel="nofollow noreferrer">https://materializecss.com/dropdown.html</a>.</p>
  
  <p>Here is a picture of what I'm getting when I run this code:
  <a href="https://i.stack.imgur.com/KTQ2e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KTQ2e.png" alt="enter image description here"></a></p>
  
  <p>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?</p>