Virtual Pagination Script Documentation

Virtual Pagination script lets you transform long content on your page into a series of virtual pages, browseable via pagination links. The pieces are separated simply via arbitrary DIVs or another block level element with a shared class name. Here's a complete example, minus the mandatory code that goes in the HEAD section of your page:

<div style="width: 300px; height: 230px;">

<div class="virtualpage">
Some content some content Some content<img src="doggie.gif" />
Do you like my dog?
</div>

<div class="virtualpage">
Some content some content Some content<img src="cat.gif" />
Do you like my cat?
</div>

<div class="virtualpage">
Some content some content Some content<img src="rabbit.gif" />
Do you like my rabbit?
</div>

<div class="virtualpage">
Some content some content Some content<img src="horse.gif" />
Do you like my horse?
</div>

</div>


<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>


<script type="text/javascript">
var gallery=new virtualpaginate("virtualpage", 1)
gallery.buildpagination("gallerypaginate")
</script>

To fully take advantage of this script, however, 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 below documents these two aspects of the script.

Public methods reference

**Methods for virtualpaginate() object**
Method	Description
`virtualpaginate(className, pieces__per_page, [elementType])`	Main Virtual Pagination object function that prepares a series of DIVs with a common CSS class name to participate in pagination. Parameters: className: Name of the common class of the DIV tags used to divvy up your content. pieces_per_page: An integer denoting the number of content pieces to show per page. Default is 1. By increasing this parameter, it in turn affects decreases the total number of pages that's created. Enter "" to show all pieces at once, effectively removing virtual pagination on it. ElementType (optional): Optional parameter containing the name of the element that's acting as the separator for your content pieces. The default is to look for "`div`"s, though you can change that to say, "`p`", if that's how your content pieces are separated by. Examples: var eg1=new virtualpaginate("gallery", 1) //show 1 piece at a time var eg2=new virtualpaginate("spreadsheet", 3) //show 3 pieces at a time var eg3=new virtualpaginate("myform", "") //show all pieces at once var eg4=new virtualpaginate("comments", 2, "p") //switch to "p" tags instead as the content pieces separator (default is "div").
`instance.buildpagination(divID, [anchor_text_array])`	Function that accepts the ID value of a DIV present on the page and uses it to create the pagination interface for the corresponding paginated content. Parameters: divID: ID of arbitrary DIV element on the page used by the script to create the pagination interface using. [anchor_text_array]: Optional array that contains the desired text to be used to for the pagination links, instead of sequential numbers (ie: "1", "2", "3" etc). Applicable only for the "flatview" and "select menu" pagination interfaces. Examples: gallery.buildpagination("mypaginate") //substitute default "1", "2", "3" etc with my own anchor text gallery.buildpagination("mypaginate2", ["castle", "park", "harvest", "country"])
`instance.showpage(page_number)`	A "dormant" function that lets you explicitly jump to any page within the paginated content after it's been initialized. Pass in the page number you wish to reveal, where 0=first page. Any number larger than the total page numbers available will cause nothing to be shown (hide all). Parameter: page_number: The page number to instantly show within the paginated content, where 0=1st page etc. Example: <a href="javascript:eg1.showpage(0)">Go to first page of this paginated content</a>

Methods for virtualpaginate() object

Method

Description

virtualpaginate(className, pieces__per_page, 
        [elementType])

Main Virtual Pagination object function that prepares a series of DIVs with a common CSS class name to participate in pagination.

Parameters:

className: Name of the common class of the DIV tags used to divvy up your content.
pieces_per_page: An integer denoting the number of content pieces to show per page. Default is 1. By increasing this parameter, it in turn affects decreases the total number of pages that's created. Enter "" to show all pieces at once, effectively removing virtual pagination on it.
ElementType (optional): Optional parameter containing the name of the element that's acting as the separator for your content pieces. The default is to look for "div"s, though you can change that to say, "p", if that's how your content pieces are separated by.

Examples:

var eg1=new virtualpaginate("gallery", 1) //show 1 piece at a time

var eg2=new virtualpaginate("spreadsheet", 3) //show 3 pieces at a time

var eg3=new virtualpaginate("myform", "") //show all pieces at once

var eg4=new virtualpaginate("comments", 2, "p") //switch to "p" tags instead as the content pieces separator (default is "div").

instance.buildpagination(divID,
		[anchor_text_array])

Function that accepts the ID value of a DIV present on the page and uses it to create the pagination interface for the corresponding paginated content.

Parameters:

divID: ID of arbitrary DIV element on the page used by the script to create the pagination interface using.
[anchor_text_array]: Optional array that contains the desired text to be used to for the pagination links, instead of sequential numbers (ie: "1", "2", "3" etc). Applicable only for the "flatview" and "select menu" pagination interfaces.

Examples:

gallery.buildpagination("mypaginate")

//substitute default "1", "2", "3" etc with my own anchor text
gallery.buildpagination("mypaginate2", ["castle", "park", "harvest", "country"])

instance.showpage(page_number)

A "dormant" function that lets you explicitly jump to any page within the paginated content after it's been initialized. Pass in the page number you wish to reveal, where 0=first page. Any number larger than the total page numbers available will cause nothing to be shown (hide all).

Parameter:

page_number: The page number to instantly show within the paginated content, where 0=1st page etc.

Example:

<a href="javascript:eg1.showpage(0)">Go to first page of this paginated content</a>

The above methods mainly pertain to setting up a Paginated Content itself. Moving on, you need to personalize the format and look of the pagination interface itself. That's done via special "templates" you embed inside your pagination DIV.

Pagination DIV Templates

You already know that the pagination div for each paginated content must first be manually defined on the page, as an arbitrary DIV with a unique ID:

<div id="paginatediv" class="pagination">
<a href="#" rel="previous">Prev</a> <a href="#" rel="next">Next</a>
</div>

The real reason for this manual first step is to faciliate what comes next- the ability to customize exactly how the pagination links should look. By inserting whatever HTML you wish inside the pagination DIV and using special "template" codes where you want a specific function to appear (ie: "back" button), you can custom tailor the pagination interface whichever way you like. Here are the "templates" supported by the script that you can embed inside your pagination DIV:

**Templates you can use within your pagination DIV**
Template	Description
`<a href="#" rel="previous">Previous</a>` `<a href="#" rel="next">Next</a>` `<a href="#" rel="first">First</a>` `<a href="#" rel="last">Last</a>`	Creates links that paginate backwards, forward, to the 1st page, and to the last page, respectively. The link can be created anyway you like (ie: use an image instead), as long as it contains the designated "rel" attribute inside the link. Examples: <a href="#" rel="last" style="font-weight: bold">Last Page</a> <a href="#" rel="previous" style="margin-right: 80px">Prev</a> <a href="#" rel="next" style="font-weight: bold">Next</a> <a href="#" rel="previous" style="margin-right: 100px><img src="arrowleft.gif" /></a> <a href="#" rel="next"><img src="arrowright.gif" /></a>
`<select></select>`	Creates a drop down menu containing all available pages for the user to quickly jump to a specific page. Feel free to style the menu anyway you like. Note: Synchronizes automatically with the other templates. For example, if a user clicks on a "next" link above to move forward 1 page, the drop down menu changes to select the current page number within it. Example: <select style="background-color: lightyellow" class="lighttheme"></select>
`<span class="flatview"></span>`	By inserting this template, a span element with class="flatview", the script will automatically generate a pagination link for every one of the pages within the paginated content within the span. If you have 10 pages for example, 10 links will be generated with the text "1, 2, 3" and so on. Note: Synchronizes automatically with the other templates. For example, if a user clicks on a "next" link to move forward 1 page, the script highlights the appropriate link within the list of "flatview" links as well.
`<span class="paginateinfo"> </span>`	By inserting this template, a span element with class="paginateinfo", the script will display the page number of the current page relative to all available pages (ie: Page 2/4). Note: Synchronizes automatically with the other templates. As the user moves through the pages, this info is updated automatically. Example: <span class="paginateinfo" style="font-weight:bold"></span>

Templates you can use within your pagination DIV

Template

Description

<a href="#" rel="previous">Previous</a>

<a href="#" rel="next">Next</a>

<a href="#" rel="first">First</a>

<a href="#" rel="last">Last</a>

Creates links that paginate backwards, forward, to the 1st page, and to the last page, respectively. The link can be created anyway you like (ie: use an image instead), as long as it contains the designated "rel" attribute inside the link.

Examples:

<select></select>

Creates a drop down menu containing all available pages for the user to quickly jump to a specific page. Feel free to style the menu anyway you like.

Note: Synchronizes automatically with the other templates. For example, if a user clicks on a "next" link above to move forward 1 page, the drop down menu changes to select the current page number within it.

Example:

<span class="flatview"></span>

By inserting this template, a span element with class="flatview", the script will automatically generate a pagination link for every one of the pages within the paginated content within the span. If you have 10 pages for example, 10 links will be generated with the text "1, 2, 3" and so on.

Note: Synchronizes automatically with the other templates. For example, if a user clicks on a "next" link to move forward 1 page, the script highlights the appropriate link within the list of "flatview" links as well.

<span class="paginateinfo">

        </span>

By inserting this template, a span element with class="paginateinfo", the script will display the page number of the current page relative to all available pages (ie: Page 2/4).

Note: Synchronizes automatically with the other templates. As the user moves through the pages, this info is updated automatically.

Example:

By picking and combining the above templates inside your pagination DIV as desired, your pagination interface is as unique as you want it to be. For example: