How to disable a script when on mobile device

Question

I have a site which has a parallax scroll effect and it's running the skrollr.js script. It's a mobile first website, but I would like for the script to not run on mobile devices because it won't allow scrolling. Does anyone know how I can prevent the script from running when on a mobile device? Thanks.

The code where the script is uploaded is at then end of the body section. If any other code is needed let me know.

<!-- SCRIPTS -->

<script type="text/javascript" src="js/skrollr.js"></script>
<script type="text/javascript">
    skrollr.init();
</script>

<!--/ SCRIPTS -->

Solution

You can use modernizr's touch detection in order to check if it's a touch device, and, if yes, don't init the script.

if (Modernizr.touch) {

}
else 
{
    skrollr.init();
}

or you can check for the user agent (this might not be your best option as user agent isn't always reliable), and write a simple if else, with the skrollr init in the else

  var isMobile = {
            Android: function () {
                return navigator.userAgent.match(/Android/i);
            },
            BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
            },
            iOS: function () {
                return navigator.userAgent.match(/iPhone|iPad|iPod/i);
            },
            Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
            },
            Windows: function () {
                return navigator.userAgent.match(/IEMobile/i);
            },
            any: function () {
                return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
            }
        };

        if (isMobile.any()) {

        }
        else {

             skrollr.init(); 
        }

Another way of testing would be by checking window.innerWidth and only init your script if the screen size is larger than 760px:

if (window.innerWidth > 760) {
skrollr.init();
}

Comments

[emerson.marini]

Are you using some detecting library, like modernizr?

[fefe]

maybe doing some css media query on a given container.

[emerson.marini]

@fefe How would you manipulate scripts via CSS?

[Blazemonger]

@MelanciaUK You use a CSS media query to hide the background images completely.

[emerson.marini]

@Blazemonger Yes, but the OP wants to stop the script from loading.

[PlantTheIdea]

all solutions here are talking as if mobile devices === small browser window. perhaps we should ask if he really means no mobile devices or just no small screens, and if its no mobile, does mobile include tablet.

[emerson.marini]

@PlantTheIdea In other words, this question is too broad.

[PlantTheIdea]

@MelanciaUK - i was trying to be more constructive than that, but indeed. :)

[Veech]

Whoever posted the answer, had it correct. I just had to let javascript check if it's on a mobile, then don't initiate the script. The answer was deleted though but oh well. Thanks everyone!

[PlantTheIdea]

"let javascript check if its on a mobile" ... man there is so much wrong with that

[Veech]

@PlantTheIdea The issue is with any mobiles. They wouldn't function correctly with the skrollr.js. Sorry if it was too broad. First question FTW.

[baao]

@Veech I've put the answer back online, but you should consider using modernizr instead. I deleted it because I wasn't finished writing.

[Blazemonger]

skrollr.js is, in fact, specifically designed to accommodate mobile devices and touch screens. So functionality isn't an issue, just design.

[Blazemonger]

Don't assume "touch device" equals "small screen".

[baao]

@Blazemonger true, that won't have the desired effect on this devices. Is there a better solution you can think of?

[Blazemonger]

"Mobile device" to me means "small screen", as in less than about 760px wide. Test window.innerWidth instead.