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