reInit > fp-slidesNav is completely missing

[davidhellmann]

Hey,

First some code:

var _winWidth   = $(window).width();
var _body       = $('body');
var _fpActive   = "fp_isActive";

createFullpage();

// Set fullPage Status
// if ( $(window).width() >= 1024 ) {
//     _body.addClass(_fpActive);
//     createFullpage();
// }

$(window).on('resize', function() {

    if ( $(window).width() < 1024 ) {

        _body.removeClass(_fpActive);
        $.fn.fullpage.destroy('all');

    } else {

        if ( !_body.hasClass(_fpActive) ) {
            createFullpage();
            $.fn.fullpage.reBuild();
        }

    }

});

So far so good. That works fine for me. He destroyed and rebuild it. But Inside the Slides the fp-slidesNav container is completely missing after fullpage reInit. If the Browser >= 1024 and he Init first time all is fine an the fp-slidesNav is there.

When I resize the window < 1024 fullpage was destroyed and thats fine. When I resize the window now again > 1024 he reInit well but the fp-slidesNav is missing.

Some Ideas?

[alvarotrigo]

Show the function createFullpage.

[alvarotrigo]

You don't need the class _fpActive, fp-enabled is added to the html element automatically when fullPage.js is enabled.

And you probably don't need the reBuild either. Doesn't make sense after a initialization.

[davidhellmann]

function createFullpage() {
        $('#fullpage').fullpage({
            //Navigation
            menu: '#menu',
            anchors: ['news', 'complete-bikes', 'p1', 'frames', 'p2', 'wheels', 'p3', 'components'],
            navigation: true,
            navigationPosition: 'right',
            showActiveTooltips: false,
            slidesNavigation: true,
            slidesNavPosition: 'top',

            //Scrolling
            css3: true,
            scrollingSpeed: 1500,
            autoScrolling: false,
            fitToSection: false,
            scrollBar: true,
            easing: 'easeInOutCubic',
            easingcss3: 'ease',
            loopBottom: false,
            loopTop: false,
            loopHorizontal: false,
            continuousVertical: false,
            normalScrollElements: '',
            scrollOverflow: false,
            touchSensitivity: 15,
            normalScrollElementTouchThreshold: 5,

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

            //Design
            controlArrows: false,
            verticalCentered: false,
            resize: true,
            paddingTop: '0',
            paddingBottom: '0',
            fixedElements: 'header',
            responsive: 768,

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

            afterRender: function(){
                var pluginContainer = $(this);
                $('body').addClass('fp_isActive');
            },

            afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
                var loadedSlide = $(this);

                if( anchorLink == 'wheels' || anchorLink == 'components'){
                    var _groupName = loadedSlide.attr('data-group');

                    // Verstecke und Zeige die richtigen Productlinks
                    loadedSlide.closest('.section').find('.js_products li').addClass('is_hidden').fadeOut(0);
                    loadedSlide.closest('.section').find('.js_products li.'+_groupName).removeClass('is_hidden').fadeIn(0);

                    // Lösche und setze active status
                    loadedSlide.closest('.section').find('.js_subCatTabs span').attr('data-status', '');
                    loadedSlide.closest('.section').find('.js_subCatTabs span[data-target="'+_groupName+'"]').attr('data-status', 'active');
                }

            },

            afterLoad: function(anchorLink, index){
                var loadedSection = $(this);

                if( anchorLink == 'wheels' || anchorLink == 'components'){

                    // Hole und speicher den Subcategory Name
                    var _groupName = loadedSection.find('.slide.active').attr('data-group');

                    // Finde alle Productlinks die nicht die class _groupName haben
                    loadedSection.find('.js_products').find('li.'+_groupName).removeClass('is_hidden').fadeIn(0);

                    // Lösche und setze active class
                    loadedSection.find('.js_subCatTabs span').attr('data-status', '');
                    loadedSection.find('.js_subCatTabs span[data-target="'+_groupName+'"]').attr('data-status', 'active');

                    var subCatTabs = loadedSection.find('.js_subCatTabs');
                    subCatTabs.on('click', 'span', function(event) {
                        event.preventDefault();

                        subCatTabs.find('span').attr('data-status', '');
                        $(this).attr('data-status', 'active');

                        var products    = loadedSection.find('.js_products');

                        products.find('li').addClass('is_hidden').fadeOut(0);
                        products.find('li > a').removeClass('active');

                        var _prodName   = $(this).attr('data-target');
                        var _prodId     = $(this).closest('.section').find('.slide[data-group="'+_prodName+'"]').attr('data-anchor');
                        var _prodCat    = $(this).closest('.section').attr('data-category');

                        $.fn.fullpage.moveTo(_prodCat, _prodId);

                    });
                }
            }
        });
    }

Here is it 

[davidhellmann]

And the .fp-enabled class is not added on my site :/

This are all the classes: class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"

[alvarotrigo]

Update your version of fullPage.js to the latest 2.6.6.

If you still believe its a bug, recreate the issue in this jsfiddle.http://jsfiddle.net/97tbk/418/

[davidhellmann]

OK I do an update to the newest version. I was von 2.6.2 Now the fp-enabled class exists.

My other problem I'll lock at this later. (At the moment I work without destroy) Thanks for now!