Streaming live at 10am (PST)

FullPage.js and the CMS editor incompatibility


#1

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


#2

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: http://stackoverflow.com/questions/28395165/webflow-and-fullpage-js-interfering-with-each-other

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: https://api.jquery.com/jquery.noconflict/

I hope this helps!


#3

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!


#4

@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.


#5

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


#6

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


#7

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.


#8

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({
      });       

  }        
});

#9

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


#10

@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.


Problems with CMS editor and FullpageJS
#11

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


#12

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