├── README.md ├── LICENSE ├── example.html └── jshtmlpagination.js /README.md: -------------------------------------------------------------------------------- 1 | # JSHTMLPagination 2 | 3 | **JSHTMLPagination** is a small library to achieve pagination of arbitrary HTML in modern browsers (currently supported Chrome and Safari). 4 | 5 | ## Usage 6 | 7 | To paginate you need a container which is going to be the pagination *window* and some text to paginate. 8 | 9 | var pager = new JSHTMLPagination(container_elm, html_to_paginate); 10 | 11 | To control the behavior you can use the following methods 12 | 13 | pager.next(); // to show next page 14 | 15 | and 16 | 17 | pager.previous(); // to show previous page 18 | 19 | 20 | See example.html for a better example or [this demo](http://tahvel.info/pagination/example.html). 21 | 22 | ## How does it work? 23 | 24 | **JSHTMLPagination** makes use of *multi column* support in CSS3. The text is divided into columns with the paging screen dimensions and layed out accordingly. 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011 Andris Reinman, andris.reinman@gmail.com 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 11 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 12 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 13 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 14 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 15 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 16 | SOFTWARE. -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | test 5 | 6 | 25 | 26 | 27 | 28 | 54 | 55 | 56 | 57 |

JSHTMLPagination

58 |

Paginate arbitrary HTML with ease

59 | 60 | 61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 76 | 77 |

NB! This example currently works only in Chrome and Safari and iPhone Safari (IOS5)

78 |

Source on GitHub

79 | 80 | 81 | -------------------------------------------------------------------------------- /jshtmlpagination.js: -------------------------------------------------------------------------------- 1 | /* 2 | * ----------------------------- JSHTMLPagination ------------------------------------- 3 | * Simple paging wrapper to generate pagination inside a web page 4 | * 5 | * Copyright (c) 2011 Andris Reinman, andris.reinman@gmail.com 6 | * 7 | * Licensed under MIT-style license: 8 | * 9 | * Permission is hereby granted, free of charge, to any person obtaining a copy 10 | * of this software and associated documentation files (the "Software"), to deal 11 | * in the Software without restriction, including without limitation the rights 12 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 13 | * copies of the Software, and to permit persons to whom the Software is 14 | * furnished to do so, subject to the following conditions: 15 | * 16 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | * SOFTWARE. 23 | */ 24 | 25 | /** 26 | * new JSHTMLPagination(container, data) 27 | * - container (Element): DOM object that is going to host the pagination 28 | * - data (String | Element): HTML contents to be paginated 29 | * 30 | * Creates a pagination element. 31 | * 32 | * var pager = new JSHTMLPagination($("pager"), "

.....

"); 33 | * pager.next(); // show next page 34 | * pager.previous(); // show previous page 35 | * 36 | **/ 37 | function JSHTMLPagination(container, data){ 38 | 39 | this.container = container; 40 | this.data = data; 41 | 42 | this.position = 0; 43 | 44 | this.column_count = 1; 45 | this.curcolumn = 0; 46 | 47 | this.column_gap = 20; 48 | this.getDimensions(); 49 | this.generate(); 50 | 51 | if(typeof data == "string"){ 52 | this.column_container.innerHTML = data; 53 | }else{ 54 | this.column_container.appendChild(data); 55 | } 56 | 57 | this.container.appendChild(this.inner_container); 58 | 59 | this.calculateColumnCount(); 60 | } 61 | 62 | /** 63 | * JSHTMLPagination#getDimensions() -> undefined 64 | * 65 | * Calculates available dimensions (width, height) to be used 66 | **/ 67 | JSHTMLPagination.prototype.getDimensions = function(){ 68 | 69 | this.styles = window.getComputedStyle(this.container,null); 70 | this.width = Number(this.styles.getPropertyValue("width").replace(/\D/g,'')) || 0; 71 | this.height = Number(this.styles.getPropertyValue("height").replace(/\D/g,'')) || 0; 72 | 73 | this.column_width = this.width; 74 | 75 | } 76 | 77 | /** 78 | * JSHTMLPagination#generate() -> undefined 79 | * 80 | * Generates DOM structure to hold the pagination 81 | **/ 82 | JSHTMLPagination.prototype.generate = function(){ 83 | 84 | // inner container 85 | this.inner_container = document.createElement("div"); 86 | this.inner_container.style.overflow = "hidden"; 87 | this.inner_container.style.padding = 0; 88 | this.inner_container.style.margin = 0; 89 | this.inner_container.width = this.width+"px"; 90 | this.inner_container.height = this.height+"px"; 91 | 92 | // lenghty spacer 93 | this.space_container = document.createElement("div"); 94 | this.space_container.style.width = "99999999px"; 95 | this.space_container.style.height = this.height+"px"; 96 | this.space_container.style.padding = 0; 97 | this.space_container.style.margin = 0; 98 | 99 | // columns 100 | this.columns_container = document.createElement("div"); 101 | this.columns_container.style.height = this.height+"px"; 102 | this.columns_container.style.padding = 0; 103 | this.columns_container.style.margin = 0; 104 | 105 | this.columns_container.style.mozColumnWidth = this.column_width + "px"; 106 | this.columns_container.style.webkitColumnWidth = this.column_width + "px"; 107 | this.columns_container.style.msColumnWidth = this.column_width + "px"; 108 | this.columns_container.style.columnWidth = this.column_width + "px"; 109 | 110 | this.columns_container.style.mozColumnGap = this.column_gap +"px"; 111 | this.columns_container.style.webkitColumnGap = this.column_gap + "px"; 112 | this.columns_container.style.msColumnGap = this.column_gap + "px"; 113 | this.columns_container.style.columnGap = this.column_gap +"px"; 114 | 115 | // column 116 | this.column_container = document.createElement("div"); 117 | this.column_container.style.padding = 0; 118 | this.column_container.style.margin = 0; 119 | 120 | this.inner_container.appendChild(this.space_container); 121 | this.space_container.appendChild(this.columns_container); 122 | this.columns_container.appendChild(this.column_container); 123 | } 124 | 125 | /** 126 | * JSHTMLPagination#calculateColumnCount() -> undefined 127 | * 128 | * Calculates column count for paging 129 | **/ 130 | JSHTMLPagination.prototype.calculateColumnCount = function(){ 131 | var total_height = Number(window.getComputedStyle(this.column_container,null).getPropertyValue("height").replace(/\D/g,'')); 132 | this.column_count = Math.ceil(total_height / this.height) || 1; 133 | } 134 | 135 | /** 136 | * JSHTMLPagination#next() -> undefined 137 | * 138 | * Displays next page 139 | **/ 140 | JSHTMLPagination.prototype.next = function(){ 141 | if(this.curcolumn>=this.column_count-1)return; 142 | this.curcolumn++; 143 | this.position += this.column_width + this.column_gap; 144 | this.space_container.style.marginLeft = -this.position + "px"; 145 | this.space_container.style.webkitTransition = "1s ease-out"; 146 | } 147 | 148 | /** 149 | * JSHTMLPagination#previous() -> undefined 150 | * 151 | * Displays previous page 152 | **/ 153 | JSHTMLPagination.prototype.previous = function(){ 154 | if(this.curcolumn<=0)return; 155 | this.curcolumn--; 156 | this.position -= this.column_width + this.column_gap; 157 | this.space_container.style.marginLeft = -this.position + "px"; 158 | this.space_container.style.webkitTransition = "1s ease-out"; 159 | } --------------------------------------------------------------------------------