html5 - Placing Large HTML content dynamically on TurnJs Flipbook -

i not sure if has been discussed, tried searching on list of issues not find related it.

i have large html content need bind using turn.js. problem have that, turn js, have split html separate div tags pages. there way in turn.js bind content on div , takes care of automatically wrapping different pages based on content being bound?

or there way know how data needs bound each page scenario working.

here solution splitting content pages, , than, create book using turn.js.

the logic of solution check if next content can in current page or need create new page , put content there.

this code "read" html specific div , magic ;)

alse, can play code in jsbin.

var width = 400,      height = 400,      padding = 20;    // create tester div. in `div` put contents , check if need new page  var div = $('<div />').css({    // divide 2 because each page half book    width: width / 2  }).appendto(document.body);    var index = 0;  var pages = [];  // content input html  var contents = $('#text').contents();    while (index < contents.length) {    var content = contents.eq(index).clone();        div.append(content);    // check whether contents exceed page, if so, remove content page    if (div.height() > height) {      content.remove();      // create new page      pages.push(div.clone());      // reset tester div's html check next content      div.html('');    }    // if last content, push new page , break    else if (index == contents.length - 1) {      pages.push(div.clone());      div.remove();      break;    }    // go next content    else {      index++;    }  }    var book = $('#book');  (var = 0; < pages.length; i++) {    //book.after(pages[i].clone());    //book.after('<hr />');    book.append(pages[i]);  }    // init plugin  book.turn({    width: width,    height: height,    gradients: true,     acceleration: true  });

.sample-flipbook .page {    line-height:1 !important;    font-size:inherit !important;  }

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>  <script src="http://www.turnjs.com/lib/turn.min.js"></script>  <link href="http://www.turnjs.com/samples/basic/css/basic.css" rel="stylesheet" />    <div id="book" class="sample-flipbook"></div>    <div id="text">    <p>lorem ipsum dolor sit amet, sed probatus dissentias cu. ex liber error vim. habeo mollis cu qui, eu cum graeco scripta nostrum, est et delenit suscipit. eius meliore iudicabit per in, pro numquam fabellas id.    </p>    <p>blablabla</p>      <p>blablabla1</p>      <p>blablabla2</p>      <p>blablabla4</p>      <p>blablabla5</p>      <p>blablabla6</p>      <p>blablabla7</p>    <p>  ponderum gubergren adversarium pri ad. mea ne veri scribentur. nam populo conclusionemque te. ad albucius voluptatum vix, cum id dicta facilis petentium. no rebum vivendo. per esse illum nihil eu, eos affert ceteros ne.    </p>    <p>  @ mea nostro oportere reprimique. vim veri facilisi deterruisset in, maiorum referrentur id mea. vel eligendi euripidis ullamcorper eu. vix eu veri primis sententiae, sumo eligendi conclusionemque ad his. ea quando luptatum rationibus eam, et dico aliquid eloquentiam his. mea primis intellegebat ne, ea regione equidem ullamcorper usu.    </p><p>  mel in natum recusabo aliquando, tollit probatus qui in. ex labore pertinax oportere ius, nobis iudico cu quo. malis dicunt moderatius eum ex, quaeque consetetur duo ne. ea veri inimicus mei, vim eu constituam consequuntur.    </p>    <p>  per id ancillae efficiantur. eam platonem recteque euripidis et. usu tota dolore tibique id, id libris molestiae mel. cu odio illud appareat mei. quis vitae ne usu. ut eos magna prima.</p>      <p>lorem ipsum dolor sit amet, sed probatus dissentias cu. ex liber error vim. habeo mollis cu qui, eu cum graeco scripta nostrum, est et delenit suscipit. eius meliore iudicabit per in, pro numquam fabellas id.    </p>    <p>  ponderum gubergren adversarium pri ad. mea ne veri scribentur. nam populo conclusionemque te. ad albucius voluptatum vix, cum id dicta facilis petentium. no rebum vivendo. per esse illum nihil eu, eos affert ceteros ne.    </p>    <p>  @ mea nostro oportere reprimique. vim veri facilisi deterruisset in, maiorum referrentur id mea. vel eligendi euripidis ullamcorper eu. vix eu veri primis sententiae, sumo eligendi conclusionemque ad his. ea quando luptatum rationibus eam, et dico aliquid eloquentiam his. mea primis intellegebat ne, ea regione equidem ullamcorper usu.    </p><p>  mel in natum recusabo aliquando, tollit probatus qui in. ex labore pertinax oportere ius, nobis iudico cu quo. malis dicunt moderatius eum ex, quaeque consetetur duo ne. ea veri inimicus mei, vim eu constituam consequuntur.    </p>    <p>  per id ancillae efficiantur. eam platonem recteque euripidis et. usu tota dolore tibique id, id libris molestiae mel. cu odio illud appareat mei. quis vitae ne usu. ut eos magna prima.</p>    </div>

it's important solution direction you. chance need add more code fit need did of way.