how stop a jQuery click function when it is greater than a specific screen width?

Question

I am using css media query and jQuery. Once the screen size is at 767px I want it to run a jQuery click function. But how do I stop the jQuery click function once the screen width is greater than 767px? Here is my code:

jQuery:

$(document).ready(function() {
$(".custom-filter").click(function(){
    $(".fa").toggle();
    $("#test").slideToggle("slow");
});
$("div.filter-group-shop-by-collecti h4").click(function(){
    $("ul.nav-shop-by-collecti").slideToggle("slow");
}); 
$("div.filter-group-shop-by-shoe h4").click(function(){
    $("ul.nav-shop-by-shoe").slideToggle("slow");
});
$("div.filter-group-price h4").click(function(){
    $("ul.nav-price").slideToggle("slow");
});
$("div.filter-group-size h4").click(function(){
    $("ul.nav-size").slideToggle("slow");
}); 
});

CSS:

@media only screen and (max-width: 767px) { 
.custom-filter {
  border: 1px solid #bcbcbc;
  display: inline-block;
  padding: 5px 20px 5px 15px;
  color: black;
  font-size: 17px;
  border-radius: 2px;
}

div#test.filter-menu {
  display: none;
} 

ul.nav-shop-by-collecti  {
  display: none; 
}

ul.nav-shop-by-shoe  {
  display: none;
}

ul.nav-price  {
  display: none;
}

ul.nav-size  {
  display: none;
}

.fa-chevron-down {
  font-size: 10px;
  font-weight: normal;
}
.fa-chevron-up {
  font-size: 10px;
  font-weight: normal;
  display: none;
}

.sidebar-cont.cf {
  position: relative;
  bottom: 30px; 
}
}

Once it is greater than 767px I want the click function to be disabled.

yes I used this block of code but it did not work: if ($(window).width() < 960) { alert('Less than 960'); } else { alert('More than 960'); } — Raymond Kim, Aug 01 '17 at 23:37

score 1 · Answer 1 · answered Aug 01 '17 at 23:42

1

Add this condition to your event handlers:

if(window.innerWidth <= 767)

answered Aug 01 '17 at 23:42

lucianov88

85
1
8

score 0 · Answer 2 · answered Aug 01 '17 at 23:37

You will need to have a condition in your events to check for the screen width using $(window).width() and if you still want to unbind the event completely if the screen is greater than your value, you will use .off() and here you will find good examples .
Just consider the case when the screen size go less than 767px again, should you re bind the event? or in this case the check width conditions in your events will be enough?

score 0 · Answer 3 · answered Aug 01 '17 at 23:46

Here is a solution using jQuery:

$(document).ready(function() {
   if (!screenTooBig()) {
      $(".custom-filter").click(function(){
         $(".fa").toggle();
         $("#test").slideToggle("slow");
      });
   }
});

function screenTooBig() {
  if ($(window).width() >= 767) {
    return true;
  }
    return false;
}

Additionally, you can use window.resize to capture screen resizing:

window.onresize = function() {
  if (screenTooBig()) {
    ...
  }
}

Obsidian Age · Answer 4 · 2017-08-01T23:42:22.433

-1

I would recommend creating an event listener that checks the width of the window with document.body.clientWidth, and then running your code inside a condition that checks that this value is less than 768:

var check_size = function() {
  width = document.body.clientWidth;
  if (width > 768) {
    $(".custom-filter").click(function() {
      $(".fa").toggle();
      $("#test").slideToggle("slow");
    });
    $("div.filter-group-shop-by-collecti h4").click(function() {
      $("ul.nav-shop-by-collecti").slideToggle("slow");
    });
    $("div.filter-group-shop-by-shoe h4").click(function() {
      $("ul.nav-shop-by-shoe").slideToggle("slow");
    });
    $("div.filter-group-price h4").click(function() {
      $("ul.nav-price").slideToggle("slow");
    });
    $("div.filter-group-size h4").click(function() {
      $("ul.nav-size").slideToggle("slow");
    });
  }
}

// Ensure the function runs whenever the window is resized
window.addEventListener("resize", check_size);


// Launch the function on page load as well
$(document).ready(function() {
  check_size();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hope this helps! :)

edited Aug 01 '17 at 23:42

answered Aug 01 '17 at 23:38

Obsidian Age

36,816
9
39
58

Not really sure why this answer deserves a down-vote, considering it not only handles initial load, but window resizing as well? – Obsidian Age Aug 01 '17 at 23:41
Doesn't make sense. (1) `check_size` is not an event. You can't listen on it. (2) Even if it did work, you'd be binding events every time the window was resized. You'd end up with thousands of bound events, and they won't unbind when the width is less than 768. – mpen Aug 01 '17 at 23:42
@mpen -- I got the two parameters of `addEventListener()` back to front there; that's fixed now. This will prevent the clicks from triggering at less than `768px`, which I believe is what the OP wants. If you think the OP wants to forcibly **stop** the **already-triggered** scrolling actions, you can provide an answer showing how to do that yourself. – Obsidian Age Aug 01 '17 at 23:46
No...that's not what I think. I think you're binding dozens and dozens of click events which you'd see if you put a `console.log('foo')` in one of those click handlers. Resize the window a bit and then click. See how many times it fires. – mpen Aug 01 '17 at 23:53

how stop a jQuery click function when it is greater than a specific screen width?

4 Answers4