How to add Media Query in jQuery

Question

This is the jQuery code that I am using in my WordPress website, and it's working fine.

jQuery(document).ready(function($){
$(document).on("click",".selected",function() {
$('.wvg-single-gallery-image-container').css('display','none');
})  
});

I just want the code to stop working at the screen width of 766, on 766 the code does not have to work.

Let me know if there is something that can make this possible.

Thanks, Abdullah

Answer 1

Consider the following.

jQuery(document).ready(function($){
  $(document).on("click", ".selected", function() {
    if($(window).width() < 766){
      $('.wvg-single-gallery-image-container').hide();
    }
  });
});

If the document is not very wide, less than 766, the button will perform the action. Otherwise, nothing will happen.

See More: https://api.jquery.com/width/

Answer 2

You can use mediaMatch to test against a media query…

if (window.matchMedia('(max-width: 766px)')) {
    $('.wvg-single-gallery-image-container').css('display','none');
}

…but that approach isn't a great one. Consider what would happen if the user resized the window after the JS had run. The inline style you are adding would still be there, but based on the wrong window size.

Instead, use JS to add and remove classes from elements. Then use those classes in your CSS with media queries.

$('.wvg-single-gallery-image-container').addClass('a-suitably-semantic-class-name);