Home 
Dynamic Content Here
|
Categories
Partners
DaniWeb is an exciting community for web developers, Internet marketers, and technology enthusiasts.
 Other Sections
Compatibility
|
|
FF1+ IE5+ Opr7+
Virtual Pagination script Author:
Note: Last updated June 1st, 07'. Added ability to personalize the text for the pagination links within "flatview" and "select" interfaces (instead of the default "1", "2", "3" etc..). Description: Does your page contain lengthy chunks of text, a series of images, or long forms that dissuade people from reading them top to bottom? This script lets you transform long content on your page into a series of virtual pages, browseable via pagination links. The broken up content pieces are separated simply via arbitrary DIVs (or another block level element of your choice) with a shared class name. Pagination links are "semi automatically" created for the user to navigate to any "page" within the content easily. Watch out, pagination is no longer just a "between pages" affair thanks to this script! The cornerstone feature of this script is its extreme flexibility when it comes to personalizing the format/look of the content's pagination interface. Instead of letting the script dictate how the links should look, you tell the script instead how and what to show as part of the pagination interface. Whether you want to just display "back/forward" links, switch to images instead, display a drop down, and more, what and how everything is shown is up to you, thanks to special "keywords" you use in your HTML that the script will pick up as having special meaning. Demos: Three Virtual Pagination demos below:
Demo #1 (upper left): Contains 6 pieces of content, each
separated by a "P" element. 3 pieces of content is shown per page. Directions:
Step 1: Add the below code and sample CSS to your page: The code references an external .js file. Download it below: Step 2: Add the below to the BODY of your page, which contains 5 virtual pagination demos to help you see the syntax: Time to learn exactly how to apply this script to your content. Basic ConfigurationSetting up this script on any long piece of content on your page is a 1-2-3 process. Stage 1: Divide your long content into individual parts using a DIV tag (or any block element. See Documentation) that contains an arbitrary but common CSS class name (ie: "virtualpage"): <div style="width: 400px; height: 250px"> <div class="virtualpage"> First Piece within Content " </div> <div class="virtualpage"> Second Piece within Content " </div> <div class="virtualpage"> Third Piece within Content " </div> </div> Here I'm using DIVs to separate each content piece, which as mentioned is configurable. Now, it's recommended that you throw in an extra DIV that surrounds the entire content with an explicit width/ height set. This sets the height of the area in which each piece of content is contained in, to prevent the page from "bopping" as the user paginates through the pieces of content with varying heights. That's what the DIV in gray is for. Stage 2: Once your content is sliced into individual pieces, you must now define the pagination interface for the content. At its simplest the code for it looks something like this: <div id="paginatediv" class="paginationstyle"> <a href="#" rel="previous" style="margin-right: 100px">Prev</a> <a href="#" rel="next">Next</a> </div> The DIV must carry an arbitrary but unique ID (ie: "paginatediv"), to help the script identify it in the final step below. Add this pagination code anywhere on the page as desired (ie: directly below the paginated content box in 1) above). Inside this DIV you can customize the pagination interface in limitless ways, using a flexible template system to assign special meaning to various components inside it. See Virtual Pagination Documentation on a separate page for more info. Stage 3) Finally, time to tie 1) and 2) together to complete the illusion! Following both codes above, add the below invocation JavaScript to your page: <script type="text/javascript">
//virtualpaginate(className, pieces_to_show_per_page)
var pagecontent=new virtualpaginate("virtualpage", 1)
pagecontent.buildpagination("paginatediv")
</script>
The two text in red correspond to the CSS classname of your content separator tags, plus the ID of the pagination DIV for the content, respectively. Note that for the buildpagination() function, it supports an optional 2nd parameter that lets you substitute the default "1", "2", "3" etc pagination text with your own instead: pagecontent.buildpagination("paginatediv", ["castle", "park", "harvest", "country"])
See the documentation for more info. Now, to fully take advantage of this script, you need to be familiar with the methods you can call, plus pagination templates you can use within your pagination DIV to customize it. The documentation page can be found below: |
