Javascript Paging

I wanted to have my own home page that would display all I published on Twitter and other blogger services. So I learned Javascript and wrote one myself. It was easy to have the content displayed on the web page. It displays the latest tweet followed by a blog article. When you click on the right margin, the next article will appear. Similar to that, when you click on the left margin, the previous article will display. There was a problem though. When the article happens to be long, it would take much space from top to bottom. Then I wanted to add paging and the area to display the article is fixed. If the article cannot fit into that area, it only displays what it can display and the remaining parts are hidden. When the right margin is clicked on, the next part is going to display.I spent a lot of time looking for a way for paging. There are many methods and plugins to do this. But they seem not so useful in my case. They provide simple and convenient methods to do the paging. Some assume that every content for each page is already in the page (technically speaking, in DOM). When paging occurs, they just display the next element and hide the current one. Others retrieve new content when paging occurs and replace the old content. But in my case, I have the whole article and need to implement paging on it. That means I also need to "divide" an article into parts.

I found this blog Javascript Dynamic Paging (MooTools Pager). I wished I can just copy and paste. But I was using JQuery framework. However, after reading some lines of code, I guessed I could implement it in JQuery. That's why I couldn't copy & paste and I even didn't bother to read the blog at the first time.

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.

To put them together, I've managed to implement a Javascript paging method. Take a look at kceiw.me. You can find the source. It is without minification.