I made this js script:
$(document).ready(function() {
if($(window).width()<768) $("#button-opl").on('click',function(){
$("#views-exposed-form-attraktioner-block").slideToggle();
});
});
But now I want to add, if the screen is bigger then 768, then the click should be disabled. How do I do that?
thannks
You basically just need to bind an event to window if the window resizes. luckily, jQuery already does this for you. So, just go straightforward for it! This is a testeable snippet that shows you how to bind and log such event:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
$( window ).resize(function() {
$( "#log" ).append( "window was resize!!!");
});
</script>
<body>
<h5 id="log"></h5>
</body>
</html>
If you only want to evaluate the screen size when the document has loaded you could do the following:
$(document).ready(function() {
const width = $(window).width();
if (width < 768) {
// Do something
$("#button-opl").on('click', function() {
$("#views-exposed-form-attraktioner-block").slideToggle();
});
} else if (width >= 768) {
// Do something else
$("#button-opl").prop('disabled', true);
}
});
However, if you wanted to enable/disable the button dynamically based on when the screen size changes (user manually resizes the window) you would need to use an event listener and evaluate each time the window is resized like so:
$(document).ready(function() {
$("#button-opl").on('click', function() {
$("#views-exposed-form-attraktioner-block").slideToggle();
});
const reviewScreenWidth = function() {
const width = $(window).width();
if (width < 768) {
// Do something
$("#button-opl").prop('disabled', false);
} else if (width >= 768) {
// Do something else
$("#button-opl").prop('disabled', true);
}
}
// Call once when the page has loaded
reviewScreenWidth();
// Call every time the screen size changes
window.addEventListener("resize", reviewScreenWidth);
});
Since the window size can change, you should always bind the event but only act on it if the condition is met.
$(function() {
$("#button-opl").on("click",function() {
if( innerWidth < 768) {
// ^ WAY faster than building a jQ object for a property that's already standard ;)
$("#views-exposed-form-attraktioner-block").slideToggle();
}
});
});
resize event on the window, and dis-/enable the button according to the value of innerWidth.
Commented
Dec 14, 2017 at 13:01