Streaming live at 10am (PST)

Fullpage.js step by step set up

Good one @EvanJones!

Though the link to the css is a relative path.
One may use this to link to the Github repo instead,

https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css

Additionally, here’s the link to the Github repo for the FulPage JS file,

https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js

Replace the URLs as necessary.

@Reply - yeah good point, forgot to mention that the URLs in my example were relative paths.

Cheers for clarifying :slight_smile:

Could you help me on this? What does this mean? Do I need to replace the urls in the codes? many thanks

@johndvv Follow what @EvanJones has posted above. The URLs I provided are alternatives.
So your eventual Header code would be this:

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" />

And the Body code would be this:

<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script><script>$(document).ready(function() { $('#fullpage').fullpage(); });</script>
2 Likes

Don’t suppose anyone can help out with inputting a navigation on the page to scroll between sections? They have one in the demo of the apple layout which is dots and circles. I really like this style. Any help would be much appreciated :slight_smile:

1 Like
 $('#fullpage').fullpage({
  verticalCentered: false
});

should avoid this behavior.

2 Likes

Nice work! Is there any way to get interactions work with this scrolling?

1 Like

I second @Evgeny_Troitsky , Anyone help out with interactions and also site navigation dots for each section.

1 Like

Anyone know why I can’t disable full page.js in tablet or mobile views. The site didn’t work as well this way but when I hide the full page section, it still interferes.

1 Like

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

Hi @EvanJones, do you still have the fullpage.js example available? I tried the link you posted but wasn’t able to find it.

I found this example: http://fullpagejs.webflow.io/ (Read only: https://preview.webflow.com/preview/fullpagejs?preview=7540b0f1b6c9d6aad7e8268c4d16f29f)

Any help would be great! TIA :slight_smile:

1 Like

Hey @thewonglv - i didn’t save my original example unfortunately…i’ll have another play later this week though: was there anything specifically you were interested in seeing?

@johndvv - think i might have a solution for disabling FullPageJS on mobile. Replace your link to the FullPage script with the below:

<script>if (screen && screen.width > 480) { document.write('<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"><\/script>'); } </script>

The only thing that you really need to pay attention to is the first line “screen width > 480”. Basically the script will only load FullPage if the viewport is wider than 480 pixels. You can change the number to make sure it doesn’t load on tablets either (i think the tablet breakpoint is 991px on Webflow).

Hope this helps

1 Like

Tryin to follow all the instructions, but it doesn’t work…Actually, after adding custom code scroll is off. Sorry for my poor English)) Maybe the instructions offered need some upgrade? Any help would be great :slight_smile:

Hello. I´m trying to do something similar to http://fullpagejs.webflow.io/ but it just won´t work.

This is my public link https://preview.webflow.com/preview/axionconstruct?preview=0c8148576658a5b6338085f0ffd379c3

And this is the link http://axionconstruct.webflow.io/

I did as @Reply said but It just doesn´t work.

Can anyone help?
tks

hi @dguerra, thanks for the info. It seems the issue is that those sections on your page are nested inside of a section instead of a div block. Change this so that the sections are inside of a div block, with an id of “fullpage”.

Drag a new div under the menu, then drag the three sections into the div. Delete the old section and give the new div an id of “fullpage”.

Republish site, check result. This seemed to work for me, and I am standing by for your result :slight_smile:

1 Like

Hi

I’m trying to use the ‘scrolloverflow’ feature of the fullpage.js but I’m having a little trouble getting it to work, does anyone have any advice?

I have the following in my footer code, and have changed the scrolloverflow to true in the main fullpage.js
I’ve read online in other forums that the slimscroll.js plugin is necessary and I’ve noticed by inspecting some websites where this is implemented that they also use the scrolloverflow-min.js. I have very limited knowledge of coding and even adding custom code so any help would be very much appreciated!! :slight_smile:

Footer code:

<script type="text/javascript" src="http://yourjavascript.com/65051118551/jquery-fullpage-min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/31563121568/jquery-fullpage.js"></script>
<script>$(document).ready(function() { $('#fullpage').fullpage(); });</script>

<script type="text/javascript" src="http://yourjavascript.com/16271811555/scrolloverflow-min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/11116514328/jquery-slimscroll.js"></script>

I figured it out, if you’d like to implement Scrolloverflow within sections of your fullpage.js use the following code in your Custom Footer code:

<script type="text/javascript" src="http://yourjavascript.com/68012104180/iscroll.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/31563121568/jquery-fullpage.js"></script>
<script>$(document).ready(function() { $('#fullpage').fullpage(); });</script>

Any idea how to use interactions that load in each section?

I followed these instructions exactly, but the scrolling is not working. Here is my share link

https://preview.webflow.com/preview/test-fullpage-e96534?preview=371f092898c5cc17764108e919710963

code added to custom code section:
http://screencast.com/t/xqUQuxXOx

Thanks @EvanJones for your step by step on this.
@cyberdave I am not having any success getting this to work for some reason. I see you have helped others with this, mind taking a look at mine here? Thanks

Scott