Barba: Can't use Barba.js and Fullpage.js

[fvrod]

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

[fvrod]

Hi Gustavo,

Thank you a lot for your input. I have tried and fullpage complains about multiple instances of it being run even when using destroy and this is the only console error I get.. I am trying with extended views again at the moment.

Cheers and thank you again!

[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

    },
  })
}

[fvrod]

Sorry for the late reply,

Thank you a lot guys, the main issue was browser-sync. For some wicked reason it wasn't appending the new content on page change properly.

Go figure.. All of the replies above work btw.

[S1SYPHOS]

Then why you no close?

[yarnoj]

In my situation I had to add this to the 'transitioncompleted' event:

````
Barba.Dispatcher.on('transitionCompleted', function () {
if ($('html').hasClass('fp-enabled')) {
$.fn.fullpage.destroy('all');
console.log("fullpage destroyed");
}

  $('#fullpage').fullpage({
    scrollingSpeed: 1000,
    scrollOverflow: true,
  });

}
``````