0

Hello I am trying to use turbolinks and fullpage.js, first of all I create index.html and insert this code to head tag:

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="turbolinks.js?body=1"></script>
<script src="jquery.fullPage.min.js"></script>
<script>


$( document ).on('turbolinks:load', function() {
console.log("It works on each visit!")

 $('#fullpage').fullpage({
  anchors: ['firstPage', 'secondPage', '3rdPage'],
  sectionsColor: ['#191919', '#191919', '#191919'],
  responsiveHeight: 600,
  navigation: true,
            
  
  navigationPosition: 'right', 
  afterResponsive: function(isResponsive){
  }
 });
});
</head>
<body>
....my html code here ..
</body>

also I created second page demo_page.html and inserted same head block to html code. On demo_page.html there is a link that going to index.html (Testing ), when I click to link it loads index.html through turbolinks but without fullpage functions (in console log no errors except for this fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!) and when I refresh index.html (by F5 browser) it loaded normally with working scrolling sections and other functionality of Fullpage.js How to fix this problem and somebody have a working open sorce project of fullpage.js and turbolinks integration?

Barbos Kuleo
  • 1
  • It is all about dynamic content and destroying and initializing fullPage.js. First of all, are you sure you need turbolinks? Check [this topic](https://github.com/alvarotrigo/fullPage.js/issues/115). – Alvaro Jun 21 '17 at 09:18

1 Answers1

0

As the error states, you can not initialize fullPage.js multiple times.

Just destroy it and initialize it again every time you load a new page with new content. Check my answer here for more info. Also, check this topic in fullPage.js issues forum.

Alvaro
  • 40,778
  • 30
  • 164
  • 336