Streaming live at 10am (PST)

Fullpage.js disable on mobile


#1

Ok I have successfully added the full page.js code but when I have tried to add the code that disables it from mobile devices it doesn't work.

I have followed the steps from a previous help topic but with no luck so I am after a code ninja to help me set this up step by step so that I can use the full page.js on the homepage but then change to scroll on a mobile device.

Many thanks

John


Disable Fullpage.js on smaller screen width (not only on mobile)
#2

Hey @johndvv

Just had a quick play with this & managed to get it working.

http://evans-superb-site.webflow.io/

It won't function if you reduce the screenwidth of your browser - the code grabs the screen width of the device itself rather than the browser window.

Just checked on my phone (iPhone 5) and seems to be disabling the script just fine.

Here's a cloneable link so you can grab the necessary javascript for your footer: https://webflow.com/website/evans-superb-site?s=evans-superb-site


#4

I didn't see the last part ha. Thank you I will test now :smile:


#5

GENIUS thank you!!! Works great :smile:


#6

Hey not sure if you know a way of adding in the side navigation dots. I have everything working fine but I just need the dots to make the user experience more intuitive as at the moment I have had to use scroll down text but I would prefer not to use it on each section.

Hope it's possible

J


#7

No probs @johndvv - glad its working for you :smile:

To enable the nav dots you just need to add a couple of lines of javascript to the custom footer code & give each of the sections their own ID.

I've updated my example linked in the comments above so you can see how its done.

If you go into the custom footer code section in the page itself, you can also change the hover-over labels for each nav dot. Just change the titles in the "navigationTooltips" section (currently set to "First", "Second", "Third")


#8

Ok it's almost there. Really grateful for your help on this.

If you can have a look at the site from the backend and on the published version I have some issues when scrolling up and down with it skipping sections.

https://preview.webflow.com/preview/primalhealth-4e44886a44ce41b9bbe7477be7?preview=3e87a6ba167daa7592b4e5427f84933d

http://primalhealth-4e44886a44ce41b9bbe7477be7.webflow.io/


#9

Hey John

Ok just had a look....i'm not 100% sure what the issue is but I can hazard a guess based on what I can see.

What i'd do is duplicate your site (so you have an unedited version) and try setting your section positions to "Auto" rathen than "Relative", and do the same for your inner sections. Remove an padding, positioning etc you've done to make things vertically centered in their sections. Although it doesn't look like it in the Webflow designer view, FullPage actually centered everything vertically in each section by default.

A few of your internal containers are also set to absolute position which might be contributing to the script not being able to find the correct section to scroll to. Again, presuming you've done this to center your contents within each section...just switch these to "Auto" and let FullPage handle it :smile:


#10

It's something to do with the secondPage - I have created in the same links exactly what you had yet it's not moving to the secondPage correctly. Sorry to be a pain


#11

Hey John

Just had a second look - there's nothing wrong with the code or the way you've arranged your sections. Very confusing.

The only thing I can think of is that the size of your page is affecting performance somehow. Ran your main page through Google PageSpeed and Pingdom: you page size 12mb which is pretty big. It'll probably crash browsers on older machines/mobile devices.

Sorry I can't be more helpful here - might be one to raise


#12

I've just tried this on a completely blank site using the exact code and it's still doing the same problem so I'm not sure how your version is working perfectly and this isn't :frowning:

https://preview.webflow.com/preview/primal-master-8d6f52?preview=ce62bbddd197dfb83f52aa0972a5f860


#13

Anyway I could clone the site you did and set up as my own. If this doesn't work still I will give up :frowning:


#14

Looks perfect to me - no idea why its not working properly.

I've seen a few reports of people not being able to use FullPage in Webflow correctly.

You could potentially build it natively in Webflow instead of using FullPage as an alternative. Quick overview:

  1. Created a master div that is position:fixed, to the right of the screen. This will be your container for the nav icons
  2. Add a link block (set the link target to your first section)
  3. Add a DIV inside that link block, around 5px wide by 5px high, with all corners at 50% border radius for the corners
  4. Duplicate the link block + DIV combo & change the link to your second section. Repeate until you've got enough Nav icons

(it won't do the same auto scroll to section unless you click on an icon but its a comprimise!)


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.