Creating a Dynamic Scrollbar for an AJAX-based Pagination System

In order to construct an efficient dynamic scroll bar, which will be used for determining when to fetch chunks of database records according to its physical position, I'm going to use Michael Foster's X library. The main purpose of utilizing this powerful JavaScript package is simply to create a realistic "drag-and-drop" element (the scrollbar handle), without having to reinvent the wheel by coding a script from scratch.

Since the X library requires the inclusion of three JavaScript files, that is "x_core.js", "x_event.js" and "x_drag.js" respectively, in order to create a dragging element, it is not surprising that I should start including these files on the web page, as shown below:

<script type="text/javascript" src="path-to-library/x_core.js"></script>

<script type="text/javascript" src="path-to-library /x_event.js"></script>

<script type="text/javascript" src="path-to-library /x_drag.js"></script>

Now, after importing the previous JavaScript files right into the web document, the next step rests on developing the corresponding functions that first initialize the handle of the scroll bar, and then define the behavior for each one of its possible states: when the dragging action is started, during the dragging process, and finally when this process has ended.

That said, here are the JavaScript functions that implement the dragging effect on the dynamic scroll bar:

// initialize 'controlbar' element and assign events
function initControlBar(){
    var controlbar=xGetElementById('controlbar');
    if(!controlbar){return};
    xMoveTo(controlbar,700,68);
    xEnableDrag(controlbar,controlbarOnDragStart,controlbarOnDrag,
controlbarOnDragEnd);
    xShow(controlbar);
}

// define 'controlbarOnDragStart()' function
function controlbarOnDragStart(obj,mdx,mdy){
   obj.totalMY=!obj.totalMY?0:obj.totalMY;
}

// define 'controlbarOnDrag()' function
function controlbarOnDrag(obj,mdx,mdy){
    obj.totalMY+=mdy;
    window.status=obj.totalMY;
    if(obj.totalMY>345){obj.totalMY=345;return};
    if(obj.totalMY<0){obj.totalMY=0;return};
    xMoveTo(obj,700,xTop(obj)+mdy);
}

// define 'controlbarOnDragEnd()' function
function controlbarOnDragEnd(obj,mdx,mdy){
    // modify this divisor to scope all rows
    var newoffset=Math.round(obj.totalMY/80);
    if(newoffset!=offset){
        offset=newoffset;
        sendHttpRequest(newoffset);
    }
}

As you can see, the first function of the above listing, that is "initControlBar()," is responsible for assigning the different callback functions that will control the operation of the "controlbar" DIV element. As you learned in the previous article, this element is simply the handle of the dynamic scroll bar, and it must be configured to trigger HTTP requests at predefined offset intervals, to fetch packets of database records in the background.

Aside from the respective "controlbarOnStartDrag()" and "controlbarOnDrag()" functions, undoubtedly the function that plays the most important role here is "controlbarOnDragEnd()." As you can appreciate by this function's source code, whenever the user releases the handle of the scroll bar (dragging has stopped), an HTTP request is made by calling the "sendHttpRequest()" function, resulting in the display of a new set of database records. Are you starting to see how the dynamic scroll bar will retrieve paginated data? I bet you do.

So far, you hopefully understand the complete process of turning a simple DIV element into an entirely programmable dragging control, which is placed inside the corresponding dynamic scroll bar. Now, let's move on and have a look at the remaining JavaScript functions, which are responsible for creating XMLHttpRequest objects, as well as for triggering and checking HTTP requests.

To learn how this will be achieved, please read the following section.