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