https://github.com/dislogical/pagr
A paginating css/javascript library for creating smoothly scrolling pages.
https://github.com/dislogical/pagr
Last synced: about 1 month ago
JSON representation
A paginating css/javascript library for creating smoothly scrolling pages.
- Host: GitHub
- URL: https://github.com/dislogical/pagr
- Owner: dislogical
- License: mit
- Created: 2013-09-26T20:07:42.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2013-11-18T02:10:06.000Z (over 12 years ago)
- Last Synced: 2025-07-03T19:02:24.480Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 147 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
pagr
====
A paginating CSS/JavaScript library for creating smoothly scrolling pages.
### Format
First, make sure you're including a recent version of jQuery and jQueryUI.
Using pagr is incredibly simple; simply create a div (or section or what have you), give it the class `pagecontainer-horiz` or `pagecontainer-vert`, and then add the class `page` to its direct children.
To link to a page, create an `a` tag with the class you define in config (see below, or use `pagrlink`), and with an `href` of `/outerpage/innerpage`. You can scroll to as many nested pages as you'd like, but make sure you include all of the pages outside of the page you are scrolling to, just to make sure that you are scrolling to the correct page.
### To Initialize
In your HTML page, include the css and js files. Then, in your onload function, call `pagr( [config] )`. Config can have any of the following values:
```
{
initialPage: "/home", // [no default] Page to scroll to as soon as the page loads
scrollTime: 0, // [default: 400] Time in milliseconds it takes to scroll
scrollEase: "", // [default: easeOutQuad] Any easing listed on http://api.jqueryui.com/easings/
linkName: "pagrlink", // [default: pagrlink] The class name to look for links with
useHistory: true // [default: true] Whether or not to use the forward/back buttons
}
```
### Examples
Want to see pagr in action? Take a trip over to [node.coldencullen.com](http://node.coldencullen.com/) (which is SUPER in development) and check it out. The main page uses the horizontal pagination, and the projects section uses a vertical one.