Fullpage.js Page Integration

Design help Custom code
1

I am trying to implement the fullpage.js plugin into my page. The plugin seems to be working, but I cannot get the navigation links to map to the proper sections. Does anyone have any experience with this?

I am trying to replicate this functionality with my menu.
http://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Fullscreen-Scrolling-Website-FullPage/index6.html#page1

This is my website:
http://misunderstanding-of-carl-jr.webflow.io/

Here is the share link.
https://preview.webflow.com/preview/misunderstanding-of-carl-jr?preview=75a3c6f3282ef17b6fb7b478148af4fa

2

Section IDs and custom attribute data-menuanchor of the links donā€™t match.

3

I seem to have fallen under the same pit. I have got the fullpage.js working but the anchors do not seem to update have ā€œactiveā€ class when sections change.

Here is the readonly link to my webflow project.
https://preview.webflow.com/preview/uxdeck-fullpage?preview=a1061c787a5a7f58d6cb1bbba670a965
Note: this example above too, does demo how to work the navigation active state.

I have used http://full-page-js.webflow.io/ as base and making changes in style as I go. A huge thanks to @Nir for making and @EvanJones for explaining it.

I have tried all I can, but I do not seem to make any progress for like 6-8 hours now.

@PixelGeek @Nir Any help is truly appreciated. @Nir I am using your clone-able version, its a great helpā€¦ but canā€™t seem to fix the navigation dots.

4

So I got it to work,

The issue wasā€¦I defined active class for the anchor element. It turns out that Fullpage.js adds an ā€˜activeā€™ class to ListItem (li) element not and not on the anchor. When I made an active class for li, it worked.

hope this might of help to someone.

5

Weā€™re you able to get the navigation links to map to the sections correctly? Iā€™m still having trouble with that.

6

@samliew @codeGeek

I have integrated the fullpage.js script correctly, but cannot figure out why the menu is not mapping to the sections. Iā€™m sure its just s small error somewhere. The data-menuanchor links match up.

Here is the read-only link to my website.

https://preview.webflow.com/preview/misunderstanding-of-carl-jr?preview=75a3c6f3282ef17b6fb7b478148af4fa

7

@Michael_Messina I am not sure what is wrong with your project. @PixelGeek may help.

8

You are missing custom attribute data-anchor on the sections. It overrides IDs and hrefs.

Remove all the href/hyperlinks in your links, and remove all the IDs from your sections.

Then do what codeGeek has explained below.

1 Like
9

@samliew Even with the data-anchors set to match up, the navbar items to not fly down to the sections when clicked after publish.

I really appreciate your help. :slight_smile:

10

@Michael_Messina I just noticed, as @samliew pointed twice, you are missing the data-anchor on your sections and data-menuanchor on your nav list items.

Your sections should look something like this

<div class="section" data-anchor="firstPage"> Section 1 </div>
<div class="section" data-anchor="secondPage"> Section 2 </div>
<div class="section" data-anchor="thirdPage"> Section 3 </div>
<div class="section" data-anchor="fourthPage"> Section 4 </div>

And your navigation should look similar to this

<ul id="myMenu">
  <li data-menuanchor="firstPage" class="active"><a>First section</a></li>
  <li data-menuanchor="secondPage"><a>Second section</a></li>
  <li data-menuanchor="thirdPage"><a>Third section</a></li>
  <li data-menuanchor="fourthPage"><a>Fourth section</a></li>
</ul>

so the way it works is there needs to be 2 way binding. On your sections add data-anchor attribute and give it any value (alphanumeric) I called them p1ā€¦p2ā€¦p3ā€¦

487Ɨ826 21.4 KB

Then do the same to your navigation menu / dots

480Ɨ761 16.8 KB

Note: You need to define the data-anchor for each sections. And define data-menuanchor for each <li>inside the the nav <ul>

Hope this might be of help.

11

The divs with the data-anchor property are set. You may be looking at the overlay I have over each of the sections with the content in them. Could that be causing trouble?

Also, my nav links do not have the <li> attribute, but they have an <a>. I have tried the same process with a <ul> and the links did not send to the proper sections.

12

I edited the posts above for clarity. To see how it works, follow all instances of firstPage.

1 Like
13

So, for me it only worked when I added the <li> element. It did not work on <a> elements for me too.

  1. make a <ul>

  2. make some <li> elements inside it

  3. set each <li> with a data-menuanchor attribute.

  4. make sure data-menuanchor attribute of your <li> matches exactly the same with each corresponding Sectionā€™s data-anchor attribute.

  5. Check your custom code (site settings ā†’ custom code) it should have the same AnchorNames as you defined for both sections and navs in step 3 and 4.

  6. make sure you set an ID for the <ul> and specify the same in your custom code.

something like this:

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    navigation: true,
    menu: '#myMenu'
});

I guess this should help.

here is a working thing:

http://uxdeck-fullpage.webflow.io/

1 Like
14

Resolved! Thank you all for all your help @codeGeek @samliew

My sections were not set to ā€œrelativeā€ positioning, which was causing it to arrange inccorectly on the z-axis. This, plus the solutions youā€™ve posted have solved the issueā€¦

How do I make an active class for my

  • elements?

    • 15

    Hi eveyrone. I need help please! I got the Fullpage.js to work, but I canā€™t get my anchor links to work. I have read and tried everything in this post, but nothing works. the side nav circles work, but I canā€™t get my main nav links to work. If I deactivate the fullpage.js, they work fine. Also, it is now skipping my second section ā€œoneā€ and recognizing section ā€œtwoā€ as section ā€œoneā€ until I scroll from bottom to top ad then it doesnā€™t skip that section.

    I can see the ā€œactiveā€ class changes as it should, but the ā€œhomeā€ anchor keeps the ā€œwā€“currentā€ class regardless of what section I am in.

    Here is the working site: http://carlton-roberts-test.webflow.io
    Here is the preview: https://preview.webflow.com/preview/carlton-roberts-test?preview=7a766987b97586b0408f1e5d39fcd25b

    This is how I have it setup:

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.6/jquery.fullPage.min.js"></script>
<script>
$(document).ready(function() {
    $('#fullpage').fullpage({
    	anchors: ['home', 'one', 'two', 'three', 'four', 'about', 'contact'],
	menu: '.new-menu',
        navigation: true,
        css3: true,
        scrollingSpeed: 700,
        easing: 'easeInOut',
        easingcss3: 'ease',
        bigSectionsDestination: '',
        keyboardScrolling: true,
        navigationPosition: 'right',
        touchSensitivity: 5,
        fixedElements: '.navbar',
        autoScrolling: true,
        fitToSection: false,
        fitToSectionDelay: false,
        scrollBar: false,
        animateAnchor: true,
        loopBottom: false,
        loopTop: false,
        loopHorizontal: true,
        continuousVertical: false,
        continuousHorizontal: false,
        scrollHorizontally: false,
        interlockedSlides: false,
        resetSliders: false,
        fadingEffect: false,
        normalScrollElements: '#somesectionsID',
        scrollOverflow: false,
        scrollOverflowOptions: true,
        normalScrollElementTouchThreshold: 15,
    });
});
</script>
    16

    @Chavez_Procope check the browser console. They provide hints as to where the script is failing. Also, creating a new thread will more likely to get you help faster, than riding on a question already marked as resolved.