Fullpage JS, running on different pages

Navigation
2

I'm developing a project in AngularJS and I'm using Fullpage.js for scrolling the pages. So far so good, the problem is this:

Because I have internal pages, I also need to use script scrolling on these pages. But even creating the function as Scope so that it works on all pages or creating it with the different name and starting in each one Fullpage returns the following error:

fullpage: Fullpage.js can only be initialized once and you are doing it multiple times!

Does anyone know how I can do that when I start the function of the other page, I cancel the Fullpage function of the previous page and start the other function of the current controller again?

Here is the function I'm using: 

vm.rolagem_home = function(){

     $('#site').fullpage({
                //Navigation
                menu: '#menu',
                lockAnchors: false,
                //anchors:['firstPage', 'secondPage', 'trespage'],
                navigation: false,
                navigationPosition: 'right',
                //navigationTooltips: ['firstSlide', 'secondSlide'],
                showActiveTooltip: false,
                slidesNavigation: true,
                slidesNavPosition: 'bottom',

                //Scrolling
                css3: true,
                scrollingSpeed: 700,
                autoScrolling: true,
                fitToSection: true,
                fitToSectionDelay: 1000,
                scrollBar: false,
                easing: 'easeInOutCubic',
                easingcss3: 'ease',
                loopBottom: false,
                loopTop: false,
                loopHorizontal: true,
                continuousVertical: false,
                //normalScrollElements: '#element1, .element2',
                scrollOverflow: false,
                scrollOverflowOptions: null,
                touchSensitivity: 15,
                normalScrollElementTouchThreshold: 5,

                //Accessibility
                keyboardScrolling: true,
                animateAnchor: true,
                recordHistory: true,

                //Design
                controlArrows: true,
                verticalCentered: true,
              //  sectionsColor : ['#ccc', '#fff'],
              paddingTop: '0em',
              paddingBottom: '0px',
              fixedElements: '#header, .footer',
              responsiveWidth: 0,
              responsiveHeight: 0,

                //Custom selectors
                sectionSelector: '.section',
                slideSelector: '.slide',

                //events
                onLeave: function(index, nextIndex, direction){},
                afterLoad: function(anchorLink, index){},
                afterRender: function(){
                    $(window).load(function() {
                        $('#loading').hide();
                    });
                },
                afterResize: function(){},
                afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){
                    console.log(slideIndex);
                    if(slideIndex > 0){
                        $('.fp-prev').show();
                    }else{
                        $('.fp-prev').hide();
                    }
                    if(slideIndex == 6){
                        $('.fp-next').hide();
                    }else{
                        $('.fp-next').show();
                    }
                },
                onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){

                }
            });

}
    
asked by anonymous 20.07.2016 / 14:20

2 answers

2

You can use it as follows: 

if($('#agencia').fullpage() != ''){ 
        $('#agencia').fullpage.destroy('all');   
    }

So JS detects whether it already exists in execution and destroy.

    
20.07.2016 / 16:03
2

Dude, are you just passing via scope to another page or are you initializing to another controller? From what I've seen, it only allows 1 load per page. But I do not know if it's a load per controller.

Now the problem will occur if your other controller is a child controller of the first one you have already booted fullpage.js

There are some directives you can base:

Hugs

    
20.07.2016 / 14:55
Get the timezone of a date Doubt regarding the || = operator of ruby