-1

I tried to disable the fullpage js for mobile devices but it is not working. The script i am using is :

    <script>
     var isPhoneDevice = "ontouchstart" in document.documentElement; 
$(document).ready(function() {
        if(isPhoneDevice){
            //mobile
        }
            else{
                 $(document).ready(function(){
             $('#fullpage').fullpage();
        responsive: 700 // here is solution
         })
            }
        });
     </script>

website link : http://demo.lamppostmedia.in/arklan-dev/

Help me disable it.

kishan
  • 5
  • 2
  • ```isPhoneDevice``` is returning **true** for mobile device and then code for ```if(isPhoneDevice) { //mobile }``` is working and the else part is also working fine on desktop. One change you need is that you don't need the ``.read()`` in your ``else`` part of the code. – Not A Bot Feb 08 '21 at 07:51
  • i removed the .ready function also but its not working – kishan Feb 08 '21 at 08:03
  • See what exactly happing can you describe. When on mobile, the user should experience the code which is present in ```if(isPhoneDevice) { //mobile }``` and not what is in ``else`` part – Not A Bot Feb 08 '21 at 08:07
  • yes thats correct when user is on mobile fullpage should not work, and when on desktop it should work.. – kishan Feb 08 '21 at 08:54
  • For me ```if(isPhoneDevice) { //mobile }``` is working on mobile and ``else`` part is working on desktop – Not A Bot Feb 08 '21 at 08:58
  • the fullpage js is still loading in the mobile phone , its unable to disable. Kindly check – kishan Feb 08 '21 at 09:20
  • See when you use ``$(document).ready(function() { // your code } );`` then the code inside this ``.read()`` will only execute when the page has fully loaded. Thus, what's happening is that your **full-page JS** is loading and thereafter your ``.ready()`` is executing. To prevent this on the mobile device, you need to check for ``isPhoneDevice`` outside of ``.ready()`` and if the device is a mobile device, then you can stop the loading of your **full-page JS** – Not A Bot Feb 08 '21 at 09:31
  • no its unable to take, please help me to disable.. – kishan Feb 08 '21 at 12:55

1 Answers1

0

There's no such thing as a "mobile device" anymore. Is a table a mobile device? Is a touch screen laptop consider a desktop?

The right way to deal with this is basing the behaviour on the resolution of the device the visitor is accessing from.

That's why fullPage.js version 3 provides the options responsiveWidth and responsiveHeight that allow you to turn off the snap effect when reaching certain threshold.

See the Responsive width example for fullPage.js.

And the examples code here: https://github.com/alvarotrigo/fullPage.js/tree/master/examples

You can read more about responsive options in the the fullpage.js documentation:

responsiveWidth: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.

responsiveHeight: (default 0) A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for their own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the plugin will scroll like a normal site.

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • can you please check my code what is missing? The fp-responsive is unable to take & also on scroll the body calss is also not changing so please check what is missing it it. Thank you! – kishan Feb 09 '21 at 11:08
  • You are basing your decision based on the touch capability of the device. Which is not right. It will for example consider a touch screen computer as a mobile device, which it isn't. That's why I'm suggesting you to use the other approach, which is disabling fullPage.js based on the dimensions of the viewport. Please check the examples I provided. You'll find in those how to achieve what you need. – Alvaro Feb 12 '21 at 11:59