Disable fullpage.js on mobile (touch) devices

Question

I'm using fullpage.js and the slimscroll.js plugin, which is required to allow scrolling in a section which has content that exceeds the height it's container section.

I've noticed that the experience is quite bad on touch devices. Whereas normally you can swipe, release and watch the page still scroll, on a slimscroll div as soon as your finger leaves the touch area, the scrolling stops.

So what I'd like to do is disable fullpage.js on mobiles and tablets, but still enable it on desktops. I checked out fullPage.js's issues and documentation but I couldn't find a simple way of doing this.

Could anyone help me out?

Thanks a lot

Resonance

Answer 1

Just don't initialise fullpage on touch devices. You will have to deal with mobile/touch devices detection. Just search a bit on google or even here to find different alternatives.

It should look like this:

var isPhoneDevice = [ WHATEVER FUNCTION YOU WANT TO USE ]

//if it is not a phone device...
if(!isPhoneDevice){
    //initializing fullpage...
    $.fn.fullpage();
}

UPDATE

At the moment fullpage.js provides another alternative. Using the responsiveWidth and responsiveHeight options. This way fullpage.js will act like a normal website under the given values (in px).

This can also be combined with the class fp-auto-height-responsive in order to prevent fullPage.js to set the sections height on responsive and let you total control over them.

More in the docs or in this help center article about how to disable fullpage.js on mobile devices.

Pantie

Thanks, had a mind block for a sec. I think Modernizr is good for touch device detection, so I might go for that. – Resonance

Answer 2

I use this way!

var isPhoneDevice = "ontouchstart" in document.documentElement; 
$(document).ready(function() {
        if(isPhoneDevice){
            //mobile
        }
            else{
                //desktop               
                $.fn.fullpage();
            }
        });

Deliadelian

Answer 3

Even easier way that I came across here on Stackexchange - this is what I'm using:

if(screen.width < 480) { 
// do any 480 width stuff here, or simply do nothing
return;
} else {
// do all your cool stuff here for larger screens
}

Petaliferous

Answer 4

Responsive design possibilities have been added to fullPage.js since last answer. You can seen example by the following link.

Read about responsiveWidth and responsiveHeight in documentation for details.

Derrickderriey