How to disable JavaScript in media query

Question

I want to dissable javascripts in media query.

@media only screen
 (max-device-width : 568px) {
.sidebar { display: none; } 
  #navmenu {  margin-top:0px; width:auto; padding:10px; margin-left:15%;}
.content {width:auto; height:auto; margin-left:0; margin-top:3%;}
.contentsing{position:relative; width:100%; height:auto; margin-left:0%; margin-top:-150px;}


}

That is mu code, now i want to add something that will disable scripts.

Answer 1

You could wrap your script in an if statement that checks how wide the screen is like this:

if(window.innerWidth > 568){
    ...execute script
}

However, that will only execute once, so what if you resize your browser window? You could have an event listener that executes your script whenever you resize the browser.

window.addEventListener('resize', function(){
    if(window.innerWidth > 568){
        ...execute script
    }
});

Answer 2

When you use jQuery - this code will help you

$(window).resize(function() {
    if ($(window).width()>992){
        ...execute script
    }
});

Answer 3

this would work better....

if ($(window).width()>568){
    ...execute script
}