Can't use Barba.js and Fullpage.js

Hi,

Let me start by saying that i am a noob at this.

I really can’t use Barba and Fullpage.js, i have tried a lot of different approaches but at the moment i am almost giving up.

I have been trying to use Fullpage.js with external pages and it is all fine with this. The main issue is when paired with Barba.js to make the transition from page to page the styles sometimes aren’t loaded and the menu from the first page is passed into the other.

I have tried using the destroy function of Fullpage.js, barba.js views and the Dispatcher to no avail.

I am stuck and would really like some help getting this thing going.

I am using Wordpress btw.

First file where I put all my functions:

` var $ = jQuery.noConflict();

function cordeiro() {

if($(‘#mimadre’).length){

$(‘#mimadre’).fullpage({

    menu: '#menu',
    anchors: ['about', 'services', 'work', 'team', 'contacts'],
    navigation: true,
    autoScrolling: true,
    navigationPosition: 'right',
    css3: true,
    scrollOverflow: true,
    controlArrows: false,
    resize: true,
    scrollOverflowOptions: {

        fadeScrollbars: true

    },
  })

$(‘#mimadre’).fullpage.reBuild();

} };

function cabrone() {

if($('#cabrone').length){


    $('#cabrone').fullpage({

    menu: '#menutop',
    navigation: false,
    autoScrolling: true,
    navigationPosition: 'right',
    css3: true,
    scrollOverflow: true,
    controlArrows: false,
    resize: true,

    scrollOverflowOptions: {

        fadeScrollbars: true

    },

    })

};

$('#cabrone').fullpage.reBuild();
}

`

Second file for barba where i call functions that are in the global scope. I had a more complete solutions with the views and data-namespace but i actually didn’t saved it.

` Barba.Dispatcher.on(‘newPageReady’, function(current, prev, newContainer) {

        cordeiro();

        cabrone();

            menu();

        lettering();

});

Barba.Pjax.start();`

Any help in the right direction would be appreciated and you can call me names if needed. 😃

[gustavo-a]

You have to call $.fn.fullpage.destroy('all'); every time you load a new page with fullpage. And then create a new instance of it.

Just like that:

if ( $( 'html' ).hasClass( 'fp-enabled' ) ) {
   $.fn.fullpage.destroy('all');
}

$('#mimadre').fullpage({

    menu: '#menu',
    anchors: ['about', 'services', 'work', 'team', 'contacts'],
    navigation: true,
    autoScrolling: true,
    navigationPosition: 'right',
    css3: true,
    scrollOverflow: true,
    controlArrows: false,
    resize: true,
    scrollOverflowOptions: {

        fadeScrollbars: true

    },
  })

That was the only way I got it working

[Tedowski]

Did you try adding the code Gustavo wrote inside of the Dispatcher together with the init of the fullpage.js?

So it goes like this

Barba.Dispatcher.on('newPageReady', function(current, prev, newContainer) {
if ( $( 'html' ).hasClass( 'fp-enabled' ) ) {
   $.fn.fullpage.destroy('all');
}

$('#mimadre').fullpage({

    menu: '#menu',
    anchors: ['about', 'services', 'work', 'team', 'contacts'],
    navigation: true,
    autoScrolling: true,
    navigationPosition: 'right',
    css3: true,
    scrollOverflow: true,
    controlArrows: false,
    resize: true,
    scrollOverflowOptions: {

        fadeScrollbars: true

    },
  })
}