Jack1991 Jack1991 - 6 months ago 15
jQuery Question

How can I disable a script when the browser window is less than 980px?

I've used some simple jQuery to add a class to my header when the cursor hovers over it, however I want to disable it when the browser is less than 980px. I can only find

if
and
else
functions that I can't see how would relate to my code.

Here is my code and a fiddle to show it in action:

https://jsfiddle.net/8nj5y4t1/33/

jQuery(document).ready(function($) {

$(".header").hover(function(){

$(".header").addClass("active"); }, function () {

$(".header").removeClass("active");

});

});


I have tried the following, but to no effect:

$(window).resize(function() {
var scrWidth = $(window).width();

if(scrWidth < 980) {
$(".header").removeClass('active'); }

});
});

Answer

I'd suggest the following, in which we test the width of the window before adding the class:

jQuery(document).ready(function($) {

  // binding the shown anonymous functions to the named
  // events:
  $(".header").on({
    'mouseenter': function() {
      // toggleClass(<class-name>, switch) adds the given
      // class-name only if the switch evaluates as true/truthy:
      $(this).toggleClass('active', $(window).width() > 980);
    },
    'mouseleave': function() {
      // we don't check the width here, because if the given
      // class-name is not present then it generates no errors,
      // if the class-name is present then it is removed:
      $(this).removeClass('active');
    }
  });
});

jQuery(document).ready(function($) {

  $(".header").on({
    'mouseenter': function() {
      $(this).toggleClass('active', $(window).width() > 980);
    },
    'mouseleave': function() {
      $(this).removeClass('active');
    }
  });
});
body {
  background-color: pink;
}
.header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-bottom-style: solid;
  border-bottom-width: 1.5px;
  border-bottom-color: #000;
  width: 100%;
  height: 100px;
  transition: all .4s;
}
.header.active {
  background-color: white;
}
.header-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  height: inherit;
  width: 85%;
  max-width: 1600px;
  overflow: hidden;
}
h1 {
  font-size: 25px;
}
.menu-button {
  position: relative;
  display: block;
  width: 45px;
  height: 30px;
  background-color: yellow;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header">

  <div class="header-container">

    <h1>Website Logo</h1>

    <span class="menu-button">Button</span>

  </div>

</header>

JS Fiddle demo.

References: