title: Javascript Ignoring if statement for window size
body: <p>I have a few drop down menus on my pages navbar using bootstrap elements along with my customized javascript. I have made it conditional to only run if the screen width size is greater than 480 (the xs size for bootstrap). Problem is that the script runs when the screen width is at 480, below 480, and of course 480. IN other words my conditional statement surrounding the script running the dropdown on hover script is being ignored by the browser for some reason. MY GOAL is to make it so the hover effect only takes place as long as the navbar is not collapsed.</p>
  
  <p><em>Javascript</em></p>
  
  <pre><code>if ( $(window).width() &gt; 480) {
  $('ul.nav li.dropdown').hover(function () {
      "use strict";
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function () {
      "use strict";
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
  }
  </code></pre>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;title&gt;Made with Love and Sarcasm&lt;/title&gt;
  &lt;!-- Bootstrap --&gt;
  &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
  &lt;!--Custom theme--&gt;
  &lt;link href="css/styles.css" rel="stylesheet"&gt;
  &lt;link href="css/theme.min.css" rel="stylesheet"&gt;
  &lt;link href="css/sticky-footer.css" rel="stylesheet"&gt;
  &lt;script src="https://use.typekit.net/mxj2kia.js"&gt;&lt;/script&gt;
  &lt;script&gt;try{Typekit.load({ async: true });}catch(e){}&lt;/script&gt;
  
  &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
  &lt;!--[if lt IE 9]&gt;
            &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
            &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt; &lt;span class="sr-only"&gt;Toggle Navigation&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;span class="icon-bar"&gt;&lt;/span&gt; &lt;/button&gt;
        &lt;a href="index.html" class="navbar-brand title"&gt;
        &lt;h1 class="sr-only"&gt;Made With Love and Sarcasm&lt;/h1&gt;
        &lt;img src="img/ggc_logo_larger.png" alt="logo" class="pushup img-responsive img-rounded"&gt;&lt;/a&gt; &lt;/div&gt;
      &lt;div id="navbar" class="navbar-collapse collapse"&gt;
        &lt;form class="form-inline inline" action=""&gt;
          &lt;!--Make sure to program a search feature here--&gt;
          &lt;div class="input-group navbar-btn"&gt;
            &lt;input type="text" class="form-control" placeholder="Search For" aria-describedby="Placeholder"&gt;
            &lt;span class="input-group-btn"&gt;
            &lt;button type="submit" class="btn btn-default" id="search-button"&gt; &lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt; &lt;/button&gt;
            &lt;/span&gt; &lt;/div&gt;
        &lt;/form&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li class="title dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Admire&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu" aria-labelledby="admire menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-scissors"&gt; Outfits&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-cutlery"&gt; Foods&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-sunglasses"&gt; Props&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-star"&gt; Misc&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="title dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Explore&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu" aria-labelledby="admire menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="title dropdown"&gt;&lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Create&lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu" aria-labelledby="admire menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 4&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!--/collapse--&gt; 
    &lt;/div&gt;
    &lt;!--/container--&gt; 
  &lt;/div&gt;
  &lt;!--/navbar--&gt;
  &lt;div class="jumbotron placeholder"&gt;
    &lt;div class="container"&gt;
      &lt;h1&gt;Place to Put Amazing Photos&lt;/h1&gt;
    &lt;/div&gt;
    &lt;!--replace with image--&gt; 
  &lt;/div&gt;
  &lt;div class="container"&gt;
    &lt;div class="row visible-lg visible-md visible-sm"&gt;
      &lt;div class="col-md-3 visible-md visible-lg"&gt; &lt;a href="#" class="btn btn-primary btn-block btn-lg"&gt;Incredible Outfits&lt;/a&gt; &lt;/div&gt;
      &lt;div class="col-md-3 visible-md visible-lg"&gt; &lt;a href="#" class="btn btn-primary btn-block btn-lg"&gt;Wonderful Cooking&lt;/a&gt; &lt;/div&gt;
      &lt;div class="col-md-3 visible-md visible-lg"&gt; &lt;a href="#" class="btn btn-primary btn-block btn-lg"&gt;Outstanding Props&lt;/a&gt; &lt;/div&gt;
      &lt;div class="col-md-3 visible-md visible-lg"&gt; &lt;a href="#" class="btn btn-primary btn-block btn-lg"&gt;Amazing Creations&lt;/a&gt; &lt;/div&gt;
      &lt;div class="col-sm-3 visible-sm"&gt; &lt;a href="#" class="btn btn-primary"&gt;Incredible Outfits&lt;/a&gt; &lt;/div&gt;
      &lt;div class="col-sm-3 visible-sm"&gt; &lt;a href="#" class="btn btn-primary"&gt;Wonderful Cooking&lt;/a&gt; &lt;/div&gt;
      &lt;div class="col-sm-3 visible-sm"&gt; &lt;a href="#" class="btn btn-primary"&gt;Outstanding Props&lt;/a&gt; &lt;/div&gt;
      &lt;div class="col-sm-3 visible-sm"&gt; &lt;a href="#" class="btn btn-primary"&gt;Amazing Creations&lt;/a&gt; &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row visible-xs"&gt;
      &lt;div class="col-xs-6"&gt;&lt;a href="#" class="btn btn-primary btn-lg btn-block"&gt;&lt;span class="glyphicon glyphicon-scissors"&gt; Outfits&lt;/span&gt;&lt;/a&gt; &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;&lt;a href="#" class="btn btn-primary btn-lg btn-block"&gt;&lt;span class="glyphicon glyphicon-cutlery"&gt; Cooking&lt;/span&gt;&lt;/a&gt; &lt;/div&gt;
    &lt;/div&gt;
    &lt;br&gt;
    &lt;div class="row visible-xs"&gt;
      &lt;div class="col-xs-6"&gt;&lt;a href="#" class="btn btn-primary btn-lg btn-block"&gt;&lt;span class="glyphicon glyphicon-sunglasses"&gt; Props&lt;/span&gt;&lt;/a&gt; &lt;/div&gt;
      &lt;div class="col-xs-6"&gt;&lt;a href="#" class="btn btn-primary btn-lg btn-block"&gt;&lt;span class="glyphicon glyphicon-star"&gt;&lt;/span&gt; Creations&lt;/a&gt; &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footer"&gt;
    &lt;div class="container"&gt;
      &lt;p&gt;&amp;copy; 2017 Made With Love and Sarcasm&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt; 
  &lt;script src="js/jquery-1.11.3.min.js"&gt;&lt;/script&gt; 
  
  &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt; 
  &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt; 
  &lt;script src="js/function.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>Customized CSS</em></p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  h1, h2, h3, h4, h5, h6, h7 {
      font-family: vatican;
  }
  .title {
      font-family: vatican;
  }
  .pushup {
      margin-top: -8px;
  }
  .placeholder {
      height: 500px;
  }
  
  div.jumbontron h1 {
      color: black;
  }
  .inline {
      display: inline-block;
  }
  </code></pre>