CMS + fullpage.js not fully working correctly

Design help Custom code
1

Hi all,

I’m having an issue implementing fullpage.js in my CMS based site. It seems to work okayyyy, but for some reason, it’s not scrolling to the last dynamically loaded div. Also, it’s not scrolling passed the main section to the footer even though I have scrollOverflow:true

I’ve created two different pages to mess with different things:
radley-dev-sandbox.webflow.io/home-test
with the following code:

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.js"></script>
<script> $(document).ready(function() {
	$('#fullpage').fullpage({
		//Navigation
		menu: '#menu',
		lockAnchors: false,
		navigation: false,
		navigationPosition: 'right',
		navigationTooltips: ['firstSlide', 'secondSlide'],
		showActiveTooltip: false,
		slidesNavigation: false,
		slidesNavPosition: 'bottom',

		//Scrolling
		css3: true,
		scrollingSpeed: 1200,
		autoScrolling: true,
		fitToSectionDelay: 0,
		scrollBar: true,
		easing: 'easeInOutCubic',
		easingcss3: 'ease',
		loopBottom: true,
		loopTop: false,
		loopHorizontal: true,
		continuousVertical: false,
		continuousHorizontal: false,
		scrollHorizontally: false,
		interlockedSlides: false,
		dragAndMove: false,
		offsetSections: false,
		resetSliders: false,
		fadingEffect: false,
		normalScrollElements: '#element1, .element2',
		scrollOverflow: false,
		scrollOverflowReset: false,
		scrollOverflowOptions: null,
		touchSensitivity: 15,
		normalScrollElementTouchThreshold: 5,
		bigSectionsDestination: null,

		//Accessibility
		keyboardScrolling: true,
		animateAnchor: true,
		recordHistory: true,

		//Design
		parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},

		//Custom selectors
		sectionSelector: '.section',
		slideSelector: '.slide',

		lazyLoading: true,

		//events
		onLeave: function(index, nextIndex, direction){},
		afterLoad: function(anchorLink, index){},
		afterRender: function(){
        setInterval(function(){
             $.fn.fullpage.moveSectionDown();  
        }, 6000);
    },
		afterResize: function(){},
		afterResponsive: function(isResponsive){},
		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
		onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
	});
});
    </script>



<script>
$(window).load(function() {
$('.loading').fadeOut();
});
</script>

<script type="text/javascript” src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/1937473ce0472ab28c1045fa4a1c6c4689c3603e/vendors/jquery.easings.min.js">
</script>

<script type="text/javascript” src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/vendors/scrolloverflow.min.js">
</script>

then there’s this page:
radley-dev-sandbox.webflow.io/home-test-base-code
with a very simplified version of the code:

<script type="text/javascript" src="https://cdn.rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
    <script>
    $(document).ready(function() {
    	$('#fullpage').fullpage({
      	css3: true,
    		scrollBar: true,
    		scrollOverflow: true,
    		paddingTop: '0px',
    		paddingBottom: '0px',

    		//events
    		onLeave: function(index, nextIndex, direction){},
    		afterLoad: function(anchorLink, index){},
    		afterRender: function(){},
    		afterResize: function(){},
    		afterResponsive: function(isResponsive){},
    		afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
    		onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
    	});
    });
    </script>

Here is my public share link: https://preview.webflow.com/preview/radley-dev-sandbox?preview=bb82aa9cde4041f1e4dc9d82c93604a4

1 Like
2

Hi!

Were you able to find the solution to this?

3

@istirton if you have the same problem, can you provide a URL we can check?
If you are adding sections / slides dynamically, then you will need to destroy and inititalise fullPage.js again.

If you are just updating the content of a section, you will have to call the reBuild method when you finish modifying the page.

4

Hello,

I’m trying to use Fullpage.js with CMS section. Is that finally something doable? didn’t find solution on @Alvaro_Trigo GitHub or elsewhere. I’ve tried a project in CMS with Webflow but it doesn’t work.

@eclectrickink did you manage to make it work?

Here is my shared link (watch the page “CMS fullpage.js not working” and not the “static fullpage.js working” one, which is whitout CMS).

Webflow project shared link

Is there something to add on custom code ? something I did wrong? or fullpage.js is just not working in CMS?

I’ve put the fullpage ID on ‘Div fullpage’ and the “section” inside the collection list.
(I need to keep the section inside CMS collection)

What do I need to change in the code to get this work??

Thanks

5

Can you share the published URL?
It should work as long as you follow the required HTML structure.

You can see fullPage.js examples source code too.

6

@Alvaro_Trigo
This is the published URL.
https://fullpage-js-343f76.webflow.io

It’s working nice with a static structure, but I can’t make it work with section in CMS.

By the way, Is the number of intricated DIV. - from the fullpage ID DIV to the section - is important?

7

Yeah, that’s definetely not following the requried structure :slight_smile:

The .section element should be right under #fullpage one. And next to other .section elements.

image
image1110×347 75.2 KB

e

8

OK but the problem is that in Webflow with CMS,

as far as I know, we don’t have any access to change the ID of the last div named “collection-item” and if we cannot ad some div in-between “fullpage” to “section”, It must be this one that need to have the ID=fullpage.
If I add a div inside “collection item” it will populate as many #fullpage as there is items or section, inside the project.

I’ve also try to put a custom attribute “data-id” value=“fullpage” to “collection-item” which is straight on top of “section”. but it doesn’t work.

Is their a way to twist this, to get it work with fullpage.js ?

(I’ve tried scrollify.js which is working in CMS, but I’m not fan of some jitter or reaction with MagicMouse from apple. It’s why I try to find a way to make it work with Fullpage.js)

9

You might want to use the fullpage.js option sectionSelector or slideSelector. Check the the fullpage.js documentation to know more about those.

10

As I understand of it, “sectionSelector” will only change the name of the section right? I don’t have a problem with that.
And slideselector is made for horizontal slide so it will not help me I think.

If the CMS doesn’t help to have exactly the static structure needed.

What I would need is to change something with a tools like the “FullpageSelector” to change the place of the #fullpage Div to one which is not right on top to the section but a little bit more on top.

And that fullpage.js recognise each CMS virtual “section” populated by the CMS Collection

11

Those options will allow you to tell fullpage.js what selectors will be acting as sections and slides. And I think that’s exactly what you need here :wink:

Also, you will probably have to change the fullpage wrapper selector too.

12

Blockquote
Those options will allow you to tell fullpage.js what selectors will be acting as sections and slides. And I think that’s exactly what you need here :wink:
Also, you will probably have to change the fullpage wrapper selector too.

@Alvaro_Trigo The issue with CMS structure in webflow is that I would need to change the position of #fullpage, which I can’t, because of Webflow CMS structure. Because in Webflow you unfortunately can’t give a “#fullpage” to a collection list, but this is the div that is just before the Section (you told that in fullpage.js you need to keep the #fullpage div just before the section (which is in CMS).

So is there a way to change the fullpage wrapper by code to get it few intricated div before ? (a kind of “FullpageSelector” code to tell where is the “#fullpage” is ??

if you have another idea or something I didn’t understand in your explanation, thank for your explicit help, I didn’t find how to do with this issue with #fullpage after all these days…

13

Because in Webflow you unfortunately can’t give a “#fullpage” to a collection list,

Can’t you modify the HTML code in webflow? No option to see and modify the source code?

So is there a way to change the fullpage wrapper by code to get it few intricated div before ? (a kind of “FullpageSelector” code to tell where is the “#fullpage” is ??

Of course, there’s no need to use #fullpage as a selector. You can use anything else. But whatever you use will have to contain the required HTML structure meaning that sections should be direct children of the wrapper and the same with slides, direct children of a section.

Instead of new fullPage('#fullpage', {}); you can use new fullPage('.whatever', {});. #fullpage is just a CSS selector.

But as I suggested on my previous answer, i think the fullpagejs wrapper is not the problem, but the selector for sections.

You should be using the sectionSelector option.

14

Hi @Alvaro_Trigo thanks for the tips.

I’ve tried different things on a very simple project.

1/ This work of course for a static page (but that’s not what I want) :
[https://julienwidmer.webflow.io/fullpage-js-test]

(with #fullpage and sectionSelector: ‘.sectiontest’,)

BUT Now, in CMS:

2/ First try in CMS : with a #fullpage to one of the div on top the CMS section
(but not the one just before the section because that is not possible in CMS. no “#” on “.collection-list” which is where you put your CMS items)

( with #fullpage and sectionSelector: ‘.sectiontest’ )

but that’s Not Working : [https://julienwidmer.webflow.io/fullpage-js-cms-test1]

3/ Second Try in CMS with your solution to replace #fullpage with new fullPage('.whatever', {});
(with ‘.collection-item’ instead of ‘whatever’)

this is the code:

< blockquote

$(document).ready(function() {
$(‘.collection-item-3’).fullpage({
licenseKey: ‘YOUR_KEY_HERE’,
scrollBar: true,

		//Custom selectors
	sectionSelector: '.sectiontest',

// slideSelector: ‘.slide’,

});

});

< /blockquote >

but that’s Not Working : [https://julienwidmer.webflow.io/fullpage-js-cms-test2]

Can you confirm my code is correct to select the .class on top next to the section, instead of #fullpage ? (I’ve select the div which is just on top of the section)

If my code is correct, after these different try, do you still think it is possible to scroll from CMS section to CMS section on Webflow in CMS with fullpage.js ?

If you still think there is some solution thanks to let me know :slight_smile: would love to find a way to make it work !

(sorry I don’t manage to quote correctly on the forum with the all the < script <)

15

Here you have your solution:

I replicated your HTML structure.
Then changed the initialization to fix it.

new fullpage('.collection-list-5', {
    sectionsColor: ['yellow', 'green', 'purple', 'orange'],
    sectionSelector: '.collection-item-3'
});
16

I tried, that, unfortunately, doesn’t work.
here is the code I’ve Put Before body tag

<script type="text/javascript" src="https://unpkg.com/fullpage.js/dist/fullpage.min.js"></script>

<script>
new fullpage('.collection-list-5', {
    sectionsColor: ['yellow', 'green', 'purple', 'orange'],
    sectionSelector: '.collection-item-3'
});

</script>

the result:
[https://julienwidmer.webflow.io/fullpage-js-cms-test4]

By the way, I can’t write the collections DIV via HTML code. It’s 3 very special div done by Webflow for their CMS “engine”. So I let it like they need to be.

To work in CMS, the Structure need to be inside 3 intricated collection div that are just for that the CMS work… so for sure, the CMS sections and all things that can work and be duplicated in CMS need to be inside the collection-item div. With the same logic, the #fullpage container which need to be alone, need to be outside of the collection-item or just above.

these collection “div” are specials objects from WEBFLOW. To make CMS work, the “section” need to be inside the collection item, that need to be inside the Collection List, that need to be inside the Collection List Wrapper. That’s mandatory.

If you think I’ve done something wrong please let me know.

Capture d’écran 2021-07-21 à 18.05.35
Capture d’écran 2021-07-21 à 18.05.35906×620 27.6 KB

17

You are not adding the fullpage css file.
Make sure to add it too.

18

Can I do it with jquerry which is already included with Webflow?

19

Sorry but I’m new to this…
I’ve found a CSS file on your Src , but I’m not sure where to put it. I’ve read we can’t put file in Webflow but custom code.

so instead, I’ve put the link href="…/dist/fullpage.css inside head,
is that the way to do it? is that code is fine (in the pic below) ??

Capture d’écran 2021-07-21 à 19.05.02
Capture d’écran 2021-07-21 à 19.05.021266×2162 324 KB

20

Hello @Alvaro_Trigo thanks for your help, it begin to works now in CMS but it’s the total mess with the anchor link that seems completely random. sometimes it scroll 2 section, sometimes one, and it’s never the one that is written in the left menu (without fullpage code it’s working) I’ve read I’m not alone that doesn’t manage to make it work with anchor links. If somebody have a solution please let me know.

here is the actual page:
htttps://julienwidmer.webflow.io/home-fullpagejs