Add Pagination to your Pages

[bluedevil]

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]

<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!

[Dismal Shadow]

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

[bluedevil]

It should work on all portals 

[Dismal Shadow]

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.

[bluedevil]

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.

[Dismal Shadow]

I am stumped...

Codes?

You mean like this:

page one I add this?

Code: [Select]

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]

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