Disable certain Javascript on devices

- 1 answer

Ad

I'm building a website and I'm using media queries to make the website responsive for mobile devices. On the desktop version of my website, I'm using the following Javascript to make 2 divs fade in/out once 100px have been scrolled down.

$(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 100) {
            $('#firstHeadingLeft, #firstHeadingRight').fadeIn(3000);
        } else {
            $('#firstHeadingLeft, #firstHeadingRight').fadeOut();
        }

    });

Now the problem is, I don't want this javascript to be active on my mobile device, I want the 2 divs to be always present. I done some searching and found this

How to disable JavaScript in media query

One of the suggestions was to add an event listener using this code

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

However because I'm not fluent in javascript I'm unsure how to correctly wrap my code into the event listener code.

If someone could give me a hand that would be appreciated! -- Thank you!

Ad

Answer

Ad

This should work but I have no way to test it. Tell me what happens :)

window.addEventListener('resize', function(){
   disableScript();
});

window.addEventListener('load',function(){
   disableScript();
});

function disableScript(){
    if(screen.width > 568){
      //...execute script
    } 
}
Ad
source: stackoverflow.com
Ad