Here is the idea to do the paging.
Let's say the blue box (see below) is where I want to display the article.
Without paging, the article would look like:
With paging, it will be:
"Line 6" is hidden. Here is the code for the above example.
<div id="article" style="border-color: blue; border-style: solid; border-with: 1px; height: 100px; overflow: hidden; width: 100px;"> Line 1<br /> Line 2<br /> Line 3<br /> Line 4<br /> Line 5<br /> Line 6</div>
Then, we need to add a new <div id="slider"> around the article and inside the <div id="article">.
And when paging occurs, we just need to slide the <div id="slider"> up or down. And also have <div id="article"> hide any content outside its bounds, as shown in the following:
To go to the next page, we need to move <div id="slider"> up by the height of <div id="article">. After that, it will display:
In the above example, the content is statically set in HTML. But in my web site, the content is retrieved from the server. I use AJAX here. After the content is returned, I create a <div> element and insert it in to <div id="article">. Then everything goes well until we come to the end of the article. If we keep moving the inner <div> up, it will display nothing if we've already displayed the last part of the article. If we go from the above example to the next page, we get
The solution is to compare how far the <div id="slider"> moves up and the height of the article. If the distance it moves is larger than the height of the article, then it has displayed the last part of the article. So far, the problem becomes finding the height of the article, or the inner <div>. I tried it many times to find it very tricky. We don't get the size of a <div> unless it is in a DOM. What we need to do is to add <div id="slider"> to <div id="article">. After that, We can get the height of the <div id="slider">, that is, the height of the article.