Paging a long text into a specific size document like pages using javascript

Paging a long text into a specific size document like pages using javascript

10 years ago, January 14, 2014
Reading time: 1 mins

Do you want your website display a long story or a document in a ebook, pdf or MS-word like format like below?

Here is a tutorial about creating  pages with specific height and width out of a very long text to give a microsoft word or other document editor type look using javascript and jQuery.

First you will need to split / explode the long text to a specific length chunks using javascript and then join them to form a separate divs/ pages and finally give it a css style so that it looks like an ebook, or a document.

Javascript:

 


var pageCount = $('#long-content').height()/800;
var contentLength = $('#long-content').text().length;
var perPageLength = Math.floor(contentLength/pageCount);
var chunks = [];
for(i=0;i<=pageCount;i++){
    chunks.push($('#long-content').text().substring(i*perPageLength,i*perPageLength+perPageLength));
}
var paged = '<div class="page">'+chunks.join('</div><div class="page">')+'</div>';
$('#long-content').html(paged);

 

CSS

 

.page{
    border:1px solid gray;
    padding: 15px;
    margin: 5px auto;
    height: 820px;
    width: 500px;
    background: #fff;
}
body{
    background: #ccc;
}
#long-content{
    padding: 15px;
    margin: 5px auto;
    width: 500px
}

Here is the link to the jsfiddle

Previous
Chris Keeling – Megakids Megavalanche Winner 2013
Next
Sajin Maharjan Freestyle Go Go Go Lyrics
© 2024 Anil Maharjan