FullPage.js and the CMS editor incompatibility

Hello there,

I came across a bug when using the Editor in combination with fullpage.js.

Its the following, While the editor still works, im prevented from scrolling. The designer tool also has markup problems due to fullpage.js. however that is workable. Now that the editor has problems regarding scrolling, the CMS user cannot edit all of the website.

Any suggestions to how to fix this? maybe some JS to disable the scrollcapture when using CMS.

Read only link https://preview.webflow.com/preview/ceespot-website?preview=03ded0fb44039d5b47559f90e8c26b2a
Quick screenrec of the problem. http://quick.as/8Dq1iOo5L

Hi @burt, it seems like there might be some conflicts with FullPage.js and the jQuery scroll event, take a peek at this article on Stack Overflow: javascript - Webflow and Fullpage.js interfering with each other - Stack Overflow

The scrolling is not working, because the Fullpage.js is setting the html and body tags to overflow hidden and the normal Function of the Fullpage js code seems to have a conflict with the scroll event. Take a peek at a quick video:

Another option is to try the noconflict jquery code, and see if that helps: jQuery.noConflict() | jQuery API Documentation

I hope this helps!

Thanks cyberdave, that sounds great. BUT i have no idea how to detect whether or not the webflow CMS editor is on. I imagine it should be something in the terms of Boolean (CMS or NOT) and then disable fullpage.js. Which seems to be disabled halfway already anyways.

Hmmm. halfway this story i realised that the footer code is disabled during loading of the CMS. Thats pretty nice. So i also put css. into the footer. Which seems to be functioning just fine on the live site. And indeed stops messing with the body tag of the page.

However the html still has fp-enabled. Even though the only reference to that would be a div that is called fullpage. The jquery is not loaded and can also not be found.

Would be awesome if you have another suggestion. Public link still the same!

@cyberdave @sabanna @bart

Everything else seems to work perfect, but i cannot manage to disable the overflow on root.

Tried something like this, but also seems to help nothing.

$(function(){
if ($(“.w-editor-mount”)[0]) {$(“root”).css(“overflow”, “auto”);}
});

What i don’t understand is actually where does fullpage now change that overflow setting. As both the css and the javascript are added in footer, which is kicked out for the webflow CMS editor.

Hi @burt, thanks for the update. I do not yet have a solution for the fullpage.js yet, it is rare to have a plugin not work, but in this case there are some issues, and I am trying to find a way to make this custom plugin work.

As soon as I have more info, I will let you know.

Thanks!

Dave

Hi Cyberdave, in what time frame can i expect to hear something about a fix, even some custom code would do for now? Right now my only option is to do all the changes myself as the customer cannot use the CMS.

Thanks!

Bart

Hi @burt, I have been trying to get fullpage.js to work with the scrolling while in the CMS editor view, but that the moment I have not had any success to get Fullpage.js to work when in the CMS editor mode.

I will continue to check, but I cannot give an ETA for when this custom plugin will work with the CMS editor.

Hi @burt @cyberdave,

I had this same issue a while back and this worked for me:

// needed to use noConflict
$160 = jQuery.noConflict(true);
  
var Webflow = Webflow || [];

Webflow.push(function () {  
// check is the CMS editor is there
  if (Webflow.env('editor') == undefined) { 

    $160('#fullpage').fullpage({
      });       

  }        
});

Hi Josh,

Thanks for your reply, thats exactly what im looking for (sorry for my late reaction, was on holiday), one thing though is that i cannot seem to get it working. Might be something enormously stupid.

SO i put this in. (removed the {} brackets because they gave syntax errors. ) and both start and end are script ofc, but it seems to not show in forum when i do :slight_smile:

cript>
// needed to use noConflict
$160 = jQuery.noConflict(true);

var Webflow = Webflow || ;

Webflow.push(function () {
// check is the CMS editor is there
if (Webflow.env(‘editor’) == undefined) {

$160('#fullpage').fullpage(
  );       

}
});
script>

and it doesn’t seem to change anything. I tried to figure it out, but my knowledge seems to stop here. :frowning:
Any suggestion or am i missing something entirely?

Regards Bart

@joshh Any ideas for me?
@cyberdave did you manage to figure something out to make this situation work?

EDIT SOLVED. Josh you are a hero, there was just one mistake. == had to be !=

// needed to use noConflict
$160 = jQuery.noConflict(true);

var Webflow = Webflow || ;

Webflow.push(function () {
// check is the CMS editor is there
if (Webflow.env(‘editor’) != undefined) {

$160('#fullpage').fullpage({
  });       

}
});

It all works now, if anyone needs help you can contact me.

@burt good to hear you got it sorted! Sorry for the very slow reply

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