How to disable fullPage.js on Mobile?

Design help Custom code
1

Many posts on this forum have outlined how to use fullPage.js inside webflow (like here: Fullpage.js step by step set up - #12 by tkwebreform - Custom code - Forum | Webflow), however I can’t find anyone explaining how to make it work on mobile.

Is there any way to simply disable fullPage.js on mobile view? I’ve tried setting all related Div Blocks to “Hide on Phone Portrait” in the div’s settings, but still no luck.

My guess is that since the js code is added in the head tag, it does not interact with the hidden on phone settings of the Divs. Any JS ninja has an idea how to add a line or two to disable fullPage on mobile then?

1 Like
2

Hey Michael

You can replace your FullPage script link with the below - this should mean that fullpage will only load for tablet & desktop breakpoints.

<script>
if (screen && screen.width > 768) {
document.write('<script type="text/javascript" src="http://your-file-path/fullpage.js"><\/script>');
}
</script>

You can change the number (768) to 991 if you want to disable FullPage for Tablets too…oh & don’t forget to change the file path to your own :slight_smile:

2 Likes
3

Thanks Evan, it works. For others with the same issue, don’t forget to add <script>$(document).ready(function() { $('#fullpage').fullpage(); });</script> after the above code.

Another question @EvanJones, I found that when I build upon this solution and add the following code in head <style type="text/css"> @media screen and (min-width: 1200px) { .w-container { max-width: 1170px; } } body,html{ overflow: hidden !important; } </style> to make the page larger than Webflow’s default on big screens, that it renders the mobile version unscrollable - nothing moves.

Is there a way to prevent this?

4

Hey Michael

No probs - happy to help.

Regarding the page being unscrollable on mobile, it will more than likely be because your custom header code is set to “overflow: hidden” - you’ll need to add another media query for smaller screens to overwrite this rule (ie make it scrollable).

Replacing your custom code with the below should do the trick:

<style type="text/css"> 
@media screen and (min-width: 1200px) { 
.w-container { max-width: 1170px; }  
body,html { overflow: hidden !important; } 
}
@media screen and (max-width: 768px) {
body,html { overflow: scroll; }
}
</style>
1 Like
5

@EvanJones That works perfectly. You’re a beast! Thanks a lot!

6

hahaha my pleasure. Have fun!

7

Hello guys, maybe anyone knows how to reveal native webflow navigation between sections when using fullPage.js? Lost 2 days searching ))

8

I wish this worked for me, but fullpage.js still works on mobile
<script> if (screen && screen.width > 768) { document.write('<script type="text/javascript" src="js/jquery.fullPage.js"><\/script>'); } </script> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'], css3: true, fitToSection: false, autoScrolling: true, scrollOverflow: true, scrollOverflowOptions: { scrollbars: true, mouseWheel: true, hideScrollbars: false, fadeScrollbars: false, disableMouse: true } }); }); </script>

9

I have a problem… I disable the fullpage.js, but all the site in mobile is like a 20% more width…

528×723 40.3 KB

My english is bad… if I make double click in the screen two times these fix…
I need help… please!!!