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

Comments

comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>