Destroy method

[mikeebee]

Hi there!

I'm using Page Piling on a set of element on desktop but I'm changing to a standard left to right carousel on mobile. Is there a way to destroy page piling and then reinitialise it?

Many thanks

[alvarotrigo]

There's no such method in it I'm afraid. If you really need it, I could customize it for you. Just contact me.

[mikeebee]

I'm pretty close actually. It's quite crude but I'm just removing the styles that PagePiling generates.

var pagePiling = $('#pagepiling');

pagePiling.attr({
    style: '',
});

pagePiling.find('.section').removeClass('pp-section active pp-table pp-easing');

pagePiling.find('li').css({
    zIndex: '',
    transform: '',
    '-webkit-transform': '',
    '-moz-transform': '',
    '-ms-transform': ''
});

pagePiling.find('.pp-tableCell').remove();

$('#pp-nav').remove();

The only thing that's not working is that the dot navigation isn't resetting properly when I re-initialise it. Any pointers that would get me closer?

Thanks!

[KELbTIK]

Hi, here is the code that i've added to create destroy function (nearly the same as in fullpage.js plugin)

    var DESTROYED =             'pp-destroyed';
    var VIEWING_PREFIX =        'pp-viewing';
    var $window = $(window);
    var $document = $(document);
    var $htmlBody = $('html, body');
    var $body = $('body');
    var TABLE_CELL_SEL = '.pp-tableCell';
    var SLIDES_WRAPPER_SEL = '.pp-tableCell';



    PP.destroy = function(all){

        PP.setAllowScrolling(false);
        PP.setKeyboardScrolling(false);
        setURLHash('');
        removeTouchHandler();

        $window
            .off('hashchange', hashChangeHandler)

        $document
            .off('click touchstart', '#pp-nav a')
            .off('mouseenter', '#pp-nav li')
            .off('mouseleave', '#pp-nav li')
            .off('mouseover', options.normalScrollElements)
            .off('mouseout', options.normalScrollElements);


        if(all){
            destroyStructure();
        }
    };

    function destroyStructure(){

        container.css({
            'height': '',
            'position': '',
            '-ms-touch-action': '',
            'touch-action': '',
            'overflow': ''
        });

        $htmlBody.css({
            'overflow': '',
            'height': ''
        });

        // remove all of the .fp-viewing- classes
        $.each($body.get(0).className.split(/\s+/), function (index, className) {
            if (className.indexOf(VIEWING_PREFIX) === 0) {
                $body.removeClass(className);
            }
        });

        // Unwrapping content

        container.find(TABLE_CELL_SEL  + ', ' + SLIDES_WRAPPER_SEL).each(function(){
            //unwrap not being use in case there's no child element inside and its just text
            $(this).replaceWith(this.childNodes);
        });

        //scrolling the page to the top with no animation
        $htmlBody.scrollTop(0);

        //removing selectors
        $('.pp-section').each(function(){
            $(this).removeAttr('style').removeAttr('data-anchor').removeClass('pp-section active pp-table');
        })
    }

`

To init the destroy function use: $.fn.pagepiling.destroy('all');

[paulcham]

Thanks @KELbTIK! This worked great. I added the following to destroy the little pager nav the plugin can create:

$('#pp-nav').remove();

[FlemmingH]

Thanks @KELbTIK ! This worked but not without @paulcham´s remove function! :-)

[adehombre]

Hi, there is any way to disable pagepilling in mobile view and show 3 section above with scroll Y. thks

[alvarotrigo]

Hi, there is any way to disable pagepilling in mobile view and show 3 section above with scroll Y. thks

No, but you can try using my other library, fullPage.js, which is much more complete and has that feature build in.