How do i paginate long articles from the client side using javascript or jquery

Question

I am trying to come up with a way to paginate an article smoothly from the client side using Jquery or Javascript so that long articles can be viewed as multiple pages.

I need it to split the content based on page size and even break sentences and divs into different pages(if need be).

I need it to be able to handle iframes, images, list items, tables and videos as well

I really hope someone can help me soon, as i have been trying for months to try to fix this situation.

If anyone needs more clarification, please do ask

Thanks

Answer 1

You will need to do that using Ajax.

A very simplified way of doing this would be:

HTML:

<div id="container"></div>
<button id="loadmore">Load More!</button>

jQuery / Ajax:

var i = 1;
$("#loadmore").click(function(){ // on load more button click
    $.ajax({
        url: "datagrab.php", // get data from backend
        method: "post",
        data: {section: i} // which section to grab data from (ie: 1 = the first 200 characters; 2 = from the 200th character to the 400th e.t.c...)
        success: function(data){
            $("#container").append(data); // append data to #container
            i++;
        }, 
        error: function(){
            alert("There was a problem!");
        }
    });
});

Obviously, this is a very basic approach to it, however, based on the "information" you gave me, this is all I can really provide..

If you want to find out more about how to do this, have a look at some YouTube videos about pagination with Ajax.