I am currently utilizing the Turn.js flip library and I need to adjust the height of the turnjs page. The current setup calculates the height of the page based on the client's height, but now I want to change it to a specific value like 700px. How can I go about achieving this?
<script type='text/javascript'>
(function () {
'use strict';
var module = {
ratio: 1.38,
init: function (id) {
var me = this;
if (document.addEventListener) {
this.el = document.getElementById(id);
this.resize();
this.plugins();
window.addEventListener('resize', function (e) {
var size = me.resize();
$(me.el).turn('size', size.width, size.height);
});
}
},
resize: function () {
this.el.style.width = '';
this.el.style.height = '';
var width = this.el.clientWidth,
height = Math.round(width / this.ratio),
padded = Math.round(document.body.clientHeight * 0.9);
if (height > padded) {
height = padded;
width = Math.round(height * this.ratio);
}
this.el.style.width = width + 'px';
this.el.style.height = height + 'px';
return {
width: width,
height: height
};
},
plugins: function () {
$(this.el).turn({
gradients: true,
acceleration: true
});
document.body.className = 'hide-overflow';
}
};
module.init('book');
}());
</script>
html:
<div class="t">
<div class="tc rel">
<div class="book" id="book">
<div class="page page1">
<img src="image600x650.png">
</div>
</div>
</div>
</div>