Media Queries for Java Script - What is the error in this syntax?

Question

Media Queries for Java Script - What is the error in this syntax?

Navigation

#1 by (2 votes)
#2 by (2 votes)

0

This is the first time I try to apply a media queries rule in java script, and since I am a beginner, I believe something in this syntax is wrong, since the only function that is working is the second one (visible: 3) and in all viewports.

var mq = window.matchMedia('@media all and (max-width: 768px)');
if (mq.matches) {
    $("#carrossel").jCarouselLite({
        btnPrev: ".anterior"
        , btnNext: ".proximo"
        , visible: 1
        , auto: 2000
        , speed: 1000
    });

} else {
    $("#carrossel").jCarouselLite({
        btnPrev: ".anterior"
        , btnNext: ".proximo"
        , visible: 3
        , auto: 2000
        , speed: 1000
    });
}

javascript jquery mobile media-queries jquery-mobile

asked by anonymous 19.04.2016 / 16:39

2 answers

2

I believe that removing @media all and will work.

var mq = window.matchMedia('(max-width: 768px)');
if (mq.matches) {
  console.log('menor');

} else {
 console.log('maior');
}

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

Functionalexamplein JsFiddle .

Another option would be to use jQuery's .width () .

if ($(window).width() > 768) {
  alert('menor');

} else {
  alert('maior');
}

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

Exampleon JsFiddle .

19.04.2016 / 17:30

Javascript problem in converting value to int How to keep a $ _POST on page

score 2 · Accepted Answer

The constraint originates on the 1st line

var mq = window.matchMedia('@media all and (max-width: 768px)');

should look like this:

var mq = window.matchMedia('(max-width: 768px)');

Source:
link