turnjs

Destroying and Re-initializing Turn.js


I have a web page where I'm using turn.js and wish to destroy and re-initialize the plug-in if a user resizes the page to below a certain threshold. I'm testing this as follows:

$(window).resize(function() {
    if (Modernizr.mq('(min-width: 764px)')) {
        $("#flipbook").turn("destroy");
    }
});

However I'm not sure how to re-initialize turn.js subsequently?


Solution

  • You are close: Just one more thing needed was to add $( window ).unbind( 'keydown' ); and then re-initialize by adding .turn() again;

    $( '#book' ).turn( 'addpage', element, pageNo ); is the proper way of doing it but I don't want to return just a block of HTML. I prefer reloading the entire div. So what worked for me was:

    // data is html ajax response
    // destroy any previous bindings'
    if ( $( '#book' ).turn( 'is' ) ) {
            $( '#book' ).turn( 'destroy' );
            $( window ).unbind( 'keydown' );
    }
    
    $( '#book' ).html( data );
    
    // load the book
    $( '#book' ).turn({
        display: 'double'
        , acceleration: true
        , gradients: !$.isTouch
        , elevation:50
    });