JS matchMedia if-statement

Question

I'm trying to trigger my fancybox for viewports >=768px and trigger my swipebox for viewports <768px. Unfortunately neither one opens now... what am I missing? Thanks for your help! I have tons of CSS thus I'm just adding the JS (I'm quite sure it's a syntax error...).

// JavaScript Document

$(document).ready(function() {
if (window.matchMedia("(min-width: 768px)").matches) {
  
 $(".fancybox").fancybox({
  //width: '70%',
  //height: '70%',
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }
  
 });
 
});
var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }
} else {
  ;( function( $ ) {

 $( '.swipebox' ).swipebox();

} )( jQuery );
}

"I'm quite sure it's a syntax error" - what makes you say that? If you know the error, add it to the question. Have you looked in the Console when running to see? — Christian, Oct 13 '15 at 22:21
I'm a bit of a rookie when it comes to JS... I said that because individually the swipebox and the fancybox bits work, but put together with the if statement nothing happens anymore (no lightbox open)... therefore I assumed it must be a syntax error. I tried making sense of it in the Console but it's too advanced for me to understand.. — Ollie, Oct 13 '15 at 22:27
Open Chrome, open dev tools (menu > more tools > developer tools) and then Console (or, if you're on a mac, option+command+J). Then refresh the page. In seriousness, unless you can do basic troubleshooting with Console we're not going to get very far. — Christian, Oct 13 '15 at 22:30
You could also consider putting your code into JSFiddle so we cab troubleshoot collaboratively. http://jsfiddle.net/ — Christian, Oct 13 '15 at 22:31
thanks and yeah you're right, i need to start looking at debugging tools more! i made a simplified version here: https://jsfiddle.net/oliverplein/L9c7eaut/ — Ollie, Oct 13 '15 at 22:58

score 1 · Accepted Answer · answered Oct 13 '15 at 23:15

Try this. I'll update the fiddle also.

Fiddle here.

$(document).ready(function() {
if (window.matchMedia("(min-width: 768px)").matches) {

  $(".fancybox").fancybox({
    //width: '70%',
    //height: '70%',
      helpers: {
        overlay: {
          locked: false
        }
      },
    'beforeLoad': function(){
      disable_scroll();
        },
     'afterClose': function(){
       enable_scroll();
      }

  });


var keys = [37, 38, 39, 40];

    function preventDefault(e) {
      e = e || window.event;
      if (e.preventDefault) e.preventDefault();
      e.returnValue = false;  
    }

    function keydown(e) {
        for (var i = keys.length; i--;) {
            if (e.keyCode === keys[i]) {
                preventDefault(e);
                return;
            }
        }
    }

    function wheel(e) {
      preventDefault(e);
    }

    function disable_scroll() {
      if (window.addEventListener) {
          window.addEventListener('DOMMouseScroll', wheel, false);
      }
      window.onmousewheel = document.onmousewheel = wheel;
      document.onkeydown = keydown;
    }

    function enable_scroll() {
        if (window.removeEventListener) {
            window.removeEventListener('DOMMouseScroll', wheel, false);
        }
        window.onmousewheel = document.onmousewheel = document.onkeydown = null;  
    }
} else {
  ( function( $ ) {

    $( '.swipebox' ).swipebox();

  } )( jQuery );
}
});

JS matchMedia if-statement

1 Answers1