New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Virtual Pagination script v2.1

Author: Dynamic Drive | Documentation

Oct 19th, 09': Updated to v2.1, which adds:

  1. New wraparound:true/false option, which when set to false disables moving back/forth beyond first and last content, respectively

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: Five Virtual Pagination demos below:

Demo #1: 6 pieces of content, each separated by a "P" element. 2 pieces of content is shown per page. Persistence enabled.

RSS Display Boxes Credits: Dynamic Drive
Tme to get your RSS on! Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers, by communicating with a versatile PHP RSS parser called "Simplepie". Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the "title", or "title" plus "description" etc) to display.

Interstitial Content Box Credits: Dynamic Drive
An interstitial is a container that appears over an entire webpage intermittingly to display content in an eye catching way. This is a Interstitial Box script that uses Ajax to fetch and display the contents of external pages on your server as an interstitial.

Omni Slide Menu Credits: John Scheuer
Omni Slide Menu is an super versatile slideout menu that reacts to the mouse hovering over and out of it. It can be positioned to the left, top, or right edge of the browser window, supports static positioning, plus multiple instances of the same menu on a page and more. Very cool.

Custom Cursor Script II (Crosshair mouse cursor) Credits: Webtoolkit.info
This script adds a custom cursor to your webpage using an interchangeable image. The result is a custom mouse cursor that can be modified in anyway your graphic skills take you. Elegant and non intrusive effect!

Drop Down Tab Menu Credits: Dynamic Drive
This is a lean CSS tab menu that supports a 2nd level drop down menu for any of its tabs. It supports subtle yet helpful features such as the ability to set a default selected tab, hide any element on the page (ie: a form field) when the menu drops down etc.

Featured Content Slider Credits: Dynamic Drive
Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Pagination links let the user quickly pick a content to show. Each content is simply normal HTML wrapped in DIV tags for effortless integration.


Demo #2: Contains 4 pieces of content, each separated by a "DIV" element. 1 piece of content is shown per page. Custom text defined for pagination links (instead of "1", "2", "3" etc). Persistence enabled.

<

Demo #3: 4 pieces of content, each separated by a "DIV" element. 1 piece of content is shown per page. Two pagination DIVs defined.

Go to 3rd page within "gallery"

Demo #4: 6 pieces of content, each separated by a "P" element. 1 pieces of content is shown per page. Two pagination DIVs defined. Persistence enabled.

RSS Display Boxes Credits: Dynamic Drive
Tme to get your RSS on! Using Ajax, this script makes it easy to display RSS feeds from other sites inside DIV containers, by communicating with a versatile PHP RSS parser called "Simplepie". Each RSS box can be independently tailored, from the RSS feed to fetch, how many items to show (and whether to paginate them), to what portions of each entry (just the "title", or "title" plus "description" etc) to display.

Interstitial Content Box Credits: Dynamic Drive
An interstitial is a container that appears over an entire webpage intermittingly to display content in an eye catching way. This is a Interstitial Box script that uses Ajax to fetch and display the contents of external pages on your server as an interstitial.

Omni Slide Menu Credits: John Scheuer
Omni Slide Menu is an super versatile slideout menu that reacts to the mouse hovering over and out of it. It can be positioned to the left, top, or right edge of the browser window, supports static positioning, plus multiple instances of the same menu on a page and more. Very cool.

Custom Cursor Script II (Crosshair mouse cursor) Credits: Webtoolkit.info
This script adds a custom cursor to your webpage using an interchangeable image. The result is a custom mouse cursor that can be modified in anyway your graphic skills take you. Elegant and non intrusive effect!

Drop Down Tab Menu Credits: Dynamic Drive
This is a lean CSS tab menu that supports a 2nd level drop down menu for any of its tabs. It supports subtle yet helpful features such as the ability to set a default selected tab, hide any element on the page (ie: a form field) when the menu drops down etc.

Featured Content Slider Credits: Dynamic Drive
Featured Content Slider makes a slideshow out of arbitrary content on your page, so users can manually select a content to see or have them rotated automatically. Pagination links let the user quickly pick a content to show. Each content is simply normal HTML wrapped in DIV tags for effortless integration.


Demo #5: 4 pieces of content, each separated by a "DIV" element. 1 piece of content is shown per page. Custom text defined for pagination links (instead of "1", "2", "3" etc). Persistence enabled.

Directions: Developer's View

Step 1: Add the below code and sample CSS to your page:

Select All

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:

Select All

Time to learn exactly how to apply this script to your content.

Basic Setup information

Setting 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 shared CSS class name (ie: "virtualpage"):

<div style="width: 400px;">

<div class="virtualpage hidepiece">
First Piece within Content
"
</div>

<div class="virtualpage hidepiece">
Second Piece within Content
"
</div>

<div class="virtualpage hidepiece">
Third Piece within Content
"
</div>

</div>

Here I'm using DIVs to contain each content piece. These containers should contain an arbitrary but shared CSS class (ie: "virtualpage"), plus the CSS class "hidepiece" that should always be present. 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 containers in Step 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 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">

var pagecontent=new virtualpaginate({
 piececlass: "virtualpage", //class of container for each piece of content
 piececontainer: "div", //container element type (ie: "div", "p" etc)
 pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
 defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
 wraparound: false,
 persist: false //Remember last viewed page and recall it when user returns within a browser session?
})

pagecontent.buildpagination(["paginatediv"])

</script>

Where the two CSS classes in red must correspond to the two classes defined earlier. And that's it for setup, the basic version that is!

Moving on, it's time to look at the Virtual Pagination Documentation, where you'll learn how to do things such as define multiple pagination DIVs for a Virtual Pagination instance, customize the pagination DIVs in a variety of ways, selecting a page by calling the navigate() method or via a URL parameter string, and more.

Table Of Contents

This script consists of an index page plus a supplementary page: