Building a Pagination System with AJAX - Building the dynamic scroll bar
(Page 2 of 4 )
In order to start building up the AJAX-driven scrolling system, first I must create the dynamic scrollbar. It will be the key element that commands the whole application, instructing when to fetch new records from the corresponding database table and displaying chunks of rows.
In short, I’m not going to utilize a real scrollbar, like the one displayed on certain (X)HTML elements, but I’ll create a fake one, comprised basically of two DIVS. The first DIV will be the element responsible for displaying the background of the scrollbar, in conjunction with the corresponding scrolling arrows, while the second one will show the proper handle. As you might have guessed, the position of this handle along the scrollbar will control how and when to fetch new packets of database records.
Since the previous description will be best understood with some images, take a look at the pictures below. They show the background images that I’m going to use for each DIV element of the dynamic scrollbar, along with a screenshot of the application in action:
As you can see, the first two images depicted above show clearly how the dynamic scrollbar will be constructed, while the last one exemplifies how the application will display different sets of database records. Regarding the creation of the dynamic control bar, the first DIV element will hold the handle, while the second one will be used for displaying the complete scrollbar.
Obviously, these two elements properly overlapped will simulate a real (X)HTML scrollbar. In this specific case, the handle can be programmatically controlled via JavaScript to trigger HTTP requests in the background, in accordance with its physical position within the containing scrollbar.
However, there’s still one question that remains unanswered: how will the above handle be turned into a “sliding” element, in this way simulating a real scrollbar element? Well, to achieve this, I’ll use the help of a good JavaScript library, in order to make the DIV that contains the handle a “drag-and-drop” control. But in fact, I’m getting ahead of myself, so let’s continue for the moment exploring other topics.
All right, now that you know how the dynamic scrollbar will be created, the next step rests on defining the corresponding CSS rules, along with the (X)HTML markup that will make up the user interface of this AJAX-driven scrolling system.
With reference to building the graphical interface, over the course of the next section, my attention will be focused on defining the pertinent CSS styles that control the visual presentation of the application, therefore wait no longer and read the next few lines.
Next: Defining the scrolling system’s CSS declarations >>
More Java Articles
More By Alejandro Gervasio
