Building a Pagination System with AJAX

A logical place to start building the presentational layer of this AJAX-driven scrolling system is with precisely defining the CSS rules that will provide the look and feel of each (X)HTML element. That said, here is the set of styling rules that I plan to integrate with the program. Please have a look:

<style type="text/css">

.handle{
    width: 16px;
    height: 118px;
    position: absolute;
    background: url('handle.gif') center center no-repeat;
    margin: 0;
    padding: 0;
    cursor: default;
    z-index: 2;
}

#scrollbar{
    width: 18px;
    height: 500px;
    position: absolute;
    top: 50px;
    left: 700px;
    background: url('scrollbar.gif') center center no-repeat;
    margin: 0;
    padding: 0;
    z-index: 1;
}

#datacontainer{
    width: 500px;
    height: 498px;
    position: absolute;
    top: 50px;
    left: 198px;
    background: #fc6;
    border: 1px solid #ccc;
    margin: 0;
    padding: 5;
}

p{
    font: normal 12px Verdana, Arial;
    color: #000;
    padding: 5px;
    border: 1px solid #000;
    background: #F7F8CB;
}

</style>

As you can see, the above CSS rules clearly show how the dynamic scrollbar will be created, as well as how the containing DIV, responsible for displaying the chunks of database records, will be included in the respective web document.

I think that the most important things to note here are the “handle” class and the “scrollbar” selector. In each case, I defined the corresponding background image for the elements. When displayed together, these images will simulate the appearance of a real scrollbar.

The rest of the CSS rules are used for styling the containing DIV that I mentioned before, which during a highly inspirational moment I called “datacontainer,” as well as for spicing up all the paragraphs inside the web page.

Obviously, as you’ll know, all this isn’t rocket science at all, therefore let’s jump straight into the next section of this tutorial, so you can see how the (X)HTML markup and the skeleton of the JavaScript functions that I plan to use are properly defined.