Placing Large HTML content dynamically on TurnJs Flipbook

Question

I am not sure if this is something that has already been discussed, I tried searching on the list of issues but could not find anything related to it.

I have a large HTML content that I need to bind using turn.js. The problem I have is that, with turn js, I will have to split the HTML into separate div tags as pages. Is there a way in turn.js to bind the content on a div and it takes care of automatically wrapping to different pages based on the content that is being bound?

Or is there a way to know how much data needs to be bound to each page to get this scenario working.

Answer 1

Here is a solution for splitting the content to pages, and than, create a book using turn.js.

The logic of this solution is to check if the next content can be in the current page or we need to create a new page and put the content there.

This code "read" html from a specific div and do the magic ;)

Alse, you can play with the code in jsbin.

var width = 400,
    height = 400,
    padding = 20;

// create a tester div. in this `div` we will put the contents and check if we need a new page
var div = $('<div />').css({
  // divide it by 2 because each page is half from the book
  width: width / 2
}).appendTo(document.body);

var index = 0;
var pages = [];
// get all content from the input html
var contents = $('#text').contents();

while (index < contents.length) {
  var content = contents.eq(index).clone();
  
  div.append(content);
  // check whether the contents exceed the page, if so, remove this content from the page
  if (div.height() > height) {
    content.remove();
    // create a new page
    pages.push(div.clone());
    // reset the tester div's html to check the next content
    div.html('');
  }
  // if this is the last content, push it to a new page and break
  else if (index == contents.length - 1) {
    pages.push(div.clone());
    div.remove();
    break;
  }
  // go to the next content
  else {
    index++;
  }
}

var book = $('#book');
for (var i = 0; i < pages.length; i++) {
  //book.after(pages[i].clone());
  //book.after('<hr />');
  book.append(pages[i]);
}

// init the 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. His no rebum vivendo. Per esse illum nihil eu, eos affert ceteros ne.
  </p>
  <p>
At 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. His no rebum vivendo. Per esse illum nihil eu, eos affert ceteros ne.
  </p>
  <p>
At 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 to say that this solution is a direction for you. The most chance that you need to add more code to fit this exactly to your need but I did for you the most of the way.

Answer 2

According with the documentation (http://www.turnjs.com/docs/Method:_addPage) you can add dinamically pages. So when the page is loaded you can custom split your pages and add them dinamically. Something like this.

Imagine this HTML:

<div class="page">
    <h2>Title</h2>
    <p>Content</p>
</div>
<div class="page">
    <h2>Title</h2>
    <p>Content</p>
</div>
<div class="page">
    <h2>Title</h2>
    <p>Content</p>
</div>
<div class="page">
    <h2>Title</h2>
    <p>Content</p>
</div>
<div id="flipbook"></div>

We have here 4 pages but there are all in the same page, and the last element is where flipbook will be constructed. So when we load the page let's split them in Javascript:

$(document).ready(function() {
    // initialize the flipbook
    $("#flipbook").turn({page: 1, acceleration: true, gradients: true});

    // first we declare an array to store pages contents
    var pagesArray = [];
    $('.page').each(function() {
        // iterate through all pages and store the HTML inside
        pagesArray.push($(this).html());
    });

    // iterate the array and add pages dinamically
    for(var i in pagesArray) {
        // add the element within a div with the content that store before
        var element = $("<div />").html(pagesArray[i]);
        // add the page with the counter + 1 (first page is 1 not 0)
        $("#flipbook").turn("addPage", element, (i+1));
    }
});

And that's all.

Tell us if this fits with your requirements. If not, please, share with us your html structure to view how to solve the problem.