-
Notifications
You must be signed in to change notification settings - Fork 7.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Does not play nicely with Turbolinks #115
Comments
Could you post a link to your site? Nobody else has reported this problem and I can not reproduce it. I'm not familiar with rails or Turbolinks either, but if I see your site I might be able to help. |
This is happening to me in backbone. Basically when the plugin has autoScrolling:true, it sets the overflow of the body to hidden, when you are using dynamic content and you change the dom content to something else, which is the basic idea behind turbolinks, backbone, ember, and other once page apps, the scroll will remain disabled. To fix this, you can either stop using autoScrolling or when you load another page verify that the overflow of the body is set to "auto". UPDATE: Actually I would recommend staying away from autoScrolling, and possibly the library since it attaches several events to elements like window and document. A $.fn.fullPage().remove() would be nice! :) |
You don't need to remove it. You can just change from Of course, it adds events to document or window, its a plugin :) |
But I see your problem anyway. You are trying to add sections dynamically, is it right? |
No, I'm not trying to add sections dynamically, just trying to use FullPage.js for the homepage. When a user clicks a link on the navbar though, it takes them to a login page, and at that point, can't scroll because of Turbolinks vs. FullPage.js being used in tandem. |
Well I'm afraid I can not be of any more help. |
Deleted my comment by error. But basically, what I understand that turbolinks does, is remove the content of the body and dinamically add the new content. |
@jseravalli if that's the case. Any initialization of any plugin should be added after the DOM is created again, once it is ready. Maybe on the Anyway, I see this more a problem or an issue of Turbolinks rather than of fullPage.js. |
@alvarotrigo I dont think its an issue of anybody, what I believe is that the plugin does not play nicely with apps that manage the content of the page dynamically. It works fine for normal pages, but when you have a MVP structure or something like turbolinks modifying the "body" with styles like "overflow:hidden" will affect other pages and prevent scrolling in other parts of the application, unless you reload. |
@jseravalli yeah you are right. It doesn't seem simple to apply these kind of plugin using that technology. |
I was trying to use this with turbolinks at http://talentauction.in/ |
@nikhilvij I don't know about turbolinks but try to follow the needed structure as detailed in the docs. (sections as a child of body) Also, add all the javascript at the header. |
So, figured out just as I posted the comment. document.addEventListener('page:fetch', function() {
$.fn.fullpage.setAllowScrolling(false);
}); Note the page:fetch event as the reference to handler gets lost once you move onto a new page. |
Here a handy workaround for Rails 4, Turbolinks issues. if $('body').hasClass("welcome")
$.fn.fullpage()
$('html,body').css('overflow','hidden').css('height','100%')
else
$('html,body').removeAttr('style') This works for me in my app where I want this plugin for a welcome page, but not anywhere else. Would the issues for dynamic, single-page apps that be prevented by adding classes instead of applying local styles, letting an external stylesheet do overflow:hidden;height:100%;? These could then be overridden easily with JS or CSS in various situations. |
Not sure about that, but in that case, the option |
Hey guys, I got it to work by following this thread (using rails 4 and turbolinks) |
This is the way I did turbolinks, fullpage and scrolloverflow works as expected with Rails4 / Turbolinks5 $(document).on('turbolinks:load', function(){
if (typeof $.fn.fullpage.destroy == 'function') {
$.fn.fullpage.destroy('all');
}
$('#fullpage').fullpage({
//your options
});
$.fn.fullpage.reBuild();
} |
I have fullPage.js implemented on my homepage, but when a user navigates to a different page via link on the page, they cannot scroll on that new page unless the page is refreshed/reloaded.
I think it's a matter of Turbolinks being enabled on Rails 4. I want Turbolinks throughout the rest of the app, just not to coincide with fullPage.js.
Do you have anything you can change to optimize this? Or do you have a suggestion?
The text was updated successfully, but these errors were encountered: