A simple pagination script.

This script will create several pages within your SP page with pagination in the top and bottom of the page.  Its set to make 4 pages.

Create a page called whatever you like.

Add to the page:

Code Select Expand

<script type="text/javascript" src="virtualpaginate.js">

/***********************************************
* Virtual Pagination script- ? Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

/*Sample CSS used for the Virtual Pagination Demos. Modify/ remove as desired*/

.paginationstyle{ /*Style for demo pagination divs*/
width: 100%;
text-align: center;
padding: 2px 0;
margin: 10px 0;
}

.paginationstyle select{ /*Style for demo pagination divs' select menu*/
border: 1px solid navy;
margin: 0 15px;
}

.paginationstyle a{ /*Pagination links style*/
padding: 0 5px;
text-decoration: none;
border: 1px solid black;
color: navy;
background-color: white;
}

.paginationstyle a:hover, .paginationstyle a.selected{
color: #000;
background-color: #FEE496;
}

.paginationstyle a.disabled, .paginationstyle a.disabled:hover{ /*Style for "disabled" previous or next link*/
background-color: white;
cursor: default;
color: #929292;
border-color: transparent;
}

.paginationstyle a.imglinks{ /*Pagination Image links style (class="imglinks") */
border: 0;
padding: 0;
}

.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}

.paginationstyle a.imglinks a:hover{
background: none;
}

.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{ /*Pagination div "flatview" links style*/
color: #000;
background-color: yellow;
}

</style>

<!-- Virtual Pagination Demo 1  -->

<!-- Additional Pagination DIV for Demo 1 (should be an empty DIV)-->
<div id="gallerypaginate2" class="paginationstyle"></div>

<div style="width: 100%;">

<div class="virtualpage hidepiece">
<img src="http://img25.imageshack.us/img25/8442/castlei.gif" />
</div>

<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" />
</div>

<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" />
</div>

<div class="virtualpage hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" />
</div>

</div>

<!-- Pagination DIV for Demo 1 -->
<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>

<!-- Initialize Demo 1 -->
<script type="text/javascript">

var gallery=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?
})

gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])

</script>


Download attached file and load it to your forum root.

Replace all 4 images from imageshack in the script with your own HTML content.

Demo: http://www.bluedevilcustoms.com/community/index.php?page=page4507

Have fun! ;D

Hey BD I am trying to get pagination to work with http://thetwoworldsforum.com/index.php?page=changelog

I am looking at this thread and not sure if it works with my portal page...
http://www.simplemachines.org/community/index.php?topic=364988.0

It should work on all portals  :o

It does but I am trying to understand what you mean by "Replace all 4 images from imageshack in the script with your own HTML content."

I am not using images for those, so instead I will using it for this :http://thetwoworldsforum.com/index.php?page=changelog

to cut down into paginations.

It's a BBcode page.

Gotcha.


You would have to take out the image tags section, and there you add your codes.


So page 1, take the image tags and add your own stuff.

page 2 the same thing.
page 3 the same thing.

I am stumped...

Codes?

You mean like this:

page one I add this?

Code Select Expand

Thursday, July 22, 2010, 10:24:41 PM

+ Moods in profile

* Facebook Connect major upgraded

- Bottenisi stepped down from staff postion

+  Created changelog page, added to dropdown menu

Wednesday, July 14, 2010, 03:37:37 AM

* Improve footer from clutterness, added sitemap, TW is now copyrighted.

+ Added Mobile Web shortcut link on link bar and in footer.

Wednesday, July 14, 2010, 03:37:37 AM

+Posts can now auto draft (to view your saved drats: Profile> Show Posts> Draft)

! Improve footer from clutterness, added sitemap, TW is now copyrighted.

+ Added Mobile Web shortcut link on link bar and in footer.

Page 2:

Code Select Expand

Wednesday, July 07, 2010, 04:38:30 AM

+ Now supports thread prefixes

- Alec is no longer Team member

Tuesday, July 06, 2010, 07:56:54 PM

! Fixed the selector to have empty field in the profile when selecting

+ Added new "Online, Offline" icons

+ Added new moods and smileys

+ Added the 404 redirect error

+ Added the option to search board, topic or the entire forum with the new dropdown next to the search box