Menu
To page my large content i am using JQuery with the script in the example below set to display 3 paragraphs per page:
[QUOTE]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.1 Transitional//EN”>
<html>
<head>
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<style type=”text/css”>
#pagingControls ul { display: inline; padding-left: 0.10em; }
#pagingControls li { display: inline; padding: 0 0.5em; font-size: 10pt; }
</style>
<script type=”text/javascript”>
var Imtech = {};
Imtech.Pager = function() {
this.paragraphsPerPage = 3;
this.currentPage = 1;
this.pagingControlsContainer = “#pagingControls”;
this.pagingContainerPath = “#content”;
this.numPages = function() {
var numPages = 0;
if (this.paragraphs != null && this.paragraphsPerPage != null) {
numPages = Math.ceil(this.paragraphs.length / this.paragraphsPerPage);
}
return numPages;
};
this.showPage = function(page) {
this.currentPage = page;
var html = “”;
for (var i = (page-1)*this.paragraphsPerPage; i < ((page-1)*this.paragraphsPerPage) + this.paragraphsPerPage; i++) {
if (i < this.paragraphs.length) {
var elem = this.paragraphs.get(i);
html += “<” + elem.tagName + “>” + elem.innerHTML + “</” + elem.tagName + “>”;
}
}
$(this.pagingContainerPath).html(html);
renderControls(this.pagingControlsContainer, this.currentPage, this.numPages());
}
var renderControls = function(container, currentPage, numPages) {
var pagingControls = “Pages: <ul>”;
for (var i = 1; i <= numPages; i++) {
if (i != currentPage) {
pagingControls += “<li><a href=’#’ onclick=’pager.showPage(” + i + “); return false;’>” + i + “</a></li>”;
} else {
pagingControls += “<li>” + i + “</li>”;
}
}
pagingControls += “</ul>”;
$(container).html(pagingControls);
}
}
var pager = new Imtech.Pager();
$(document).ready(function() {
pager.pagingContainer = $(“#content”);
pager.paragraphs = $(“p”, pager.pagingContainer);
pager.showPage(1);
});
</script>
</head>
<body>
<div id=”pagingControls”></div>
<div id=”content”>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
<p>Paragraph 5</p>
<p>Paragraph 6</p>
<p>Paragraph 7</p>
<p>Paragraph 8</p>
<p>Paragraph 9</p>
<p>Paragraph 10</p>
</div>
</body>
</html>
My problem is my content will be up to 100 pages. Now if for example a visitor is on page eleven (11), i want the script to display 5 previous pages and 5 next pages numbers in this order:
[QUOTE]
Pages: [COLOR=”RoyalBlue”]5 6 7 8 9 10[COLOR=”royalblue”]12 13 14 15 16
Can someone help to modify the script to achieve this. Thanks.