Destroying and Re-initializing Turn.js

Question

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?

score 3 · Accepted Answer · edited Oct 10 '15 at 19:49

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
});

Destroying and Re-initializing Turn.js

1 Answers1