Ancora
04-16-2008, 06:55 PM
e.g. Previous 1 2 3 4 5 6 7 Next
Customizable. One control for web documents, another for images.
Paging Control for Web Documents:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
// Copyright 2007 Michael J. Hill www.javascript-demos.com
// Free use of the code so long as the above notice is kept intact
var maxItems = 21; // this is the number of documents/pages in the set
var consecItems = 10; // this is the number of integers appearing in between Previous and Next
var path = "./products/product_"; // the path and partial file name of your data documents, e.g., product_1.html;
var ext = ".html" // the file extension of your data files, e.g., .php, .pl, .asp, .aspx
function init(){
var activeURL = "";
var endItem = "";
var remaining = "";
var nextSet = "";
var index = 0;
var nList = document.getElementById('itemLinks');
for (i=0; i<consecItems+2; i++)
{
var nLink = document.createElement('span');
nLink.onclick = function()
{
var pageList = nList.getElementsByTagName('span');
if (this.firstChild.data == "Next")
{
if (pageList[pageList.length-2].firstChild.data == maxItems && pageList[pageList.length-2].className == "activePage")
{
return false;
}
if (pageList[pageList.length-2].className != "activePage")
{
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
index = i+1;
}
}
if (pageList[index].firstChild.data == "-")
{
pageList[index-1].className = "activePage"
return false;
}
pageList[index].className = "activePage";
}
else {
endItem = pageList[pageList.length-2].firstChild.data;
remaining = maxItems - endItem;
if (remaining >= consecItems)
{
nextSet = consecItems+1;
}
else {
nextSet = remaining + 1;
}
for (i=1; i<nextSet; i++)
{
pageList[i].firstChild.data = Number(endItem) + i;
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].firstChild.data <= Number(endItem))
{
pageList[i].firstChild.data = "-";
}
}
pageList[1].className = "activePage";
pageList[pageList.length-2].className = "availPage";
}
}
else if (this.firstChild.data == "Previous")
{
if (pageList[1].firstChild.data == 1 && pageList[1].className == "activePage")
{
return false;
}
if (pageList[1].className != "activePage")
{
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
index = i-1;
}
}
pageList[index].className = "activePage";
}
else {
endItem = pageList[1].firstChild.data;
remaining = endItem - 1;
var nSet = ((remaining / consecItems) - 1) * consecItems;
for (i=1; i<consecItems+1; i++)
{
pageList[i].firstChild.data = i + nSet;
}
pageList[1].className = "availPage";
pageList[pageList.length-2].className = "activePage";
}
}
else {
if (this.firstChild.data == "-")
{
return false;
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
}
}
this.className = "activePage";
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
activeURL = path + pageList[i].firstChild.data + ext;
}
}
//alert(activeURL);
// the following loads each selected document
window.frames['docDisplay'].location.replace(activeURL);
}
nLink.className = "availPage";
var nText = document.createTextNode(i);
nLink.appendChild(nText);
nList.appendChild(nLink);
}
var nItems = nList.getElementsByTagName('span');
nItems[1].className = "activePage";
nItems[0].firstChild.data = "Previous";
nItems[nItems.length-1].firstChild.data = "Next";
// the following loads the initial document, product_1.html
window.frames['docDisplay'].location.href = path + "1" + ext;
}
onload=init;
</script>
<style type="text/css">
body {background-color:#eae3c6;margin-top:60px}
#itemLinks {background-color:#f0fff0;font-family:times;font-size:12pt;border:1px solid black;text-align:center;width:600px;margin:auto;position:relative;top:50px}
#docDisplay {background-color:#ffdab9;display:block;width:600px;height:400px;margin:auto}
.availPage {color:#0000ff;cursor:pointer;padding:5px}
.activePage {color:#000000;padding:5px;text-decoration:underline;cursor:auto}
</style>
</head>
<body>
<iframe name="docDisplay" id="docDisplay" scrolling="auto"></iframe>
<div id="itemLinks"></div>
</body>
</html>
Paging Control for Images:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
// Copyright 2007 Michael J. Hill www.javascript-demos.com
// Free use of the code so long as the above notice is kept intact
var maxItems = 14; // this is the number of images in the set
var consecItems = 5; // this is the number of integers appearing in between Previous and Next
var path = "./images/rosewood_"; // the path & partial file name of your images, e.g., rosewood_1.jpg
var ext = ".jpg" // the file extension of your image files, e.g., .jpeg, .gif, .png
function init(){
var activeURL = "";
var endItem = "";
var remaining = "";
var nextSet = "";
var index = 0;
var subjImage = document.getElementById('imgDisplay');
var nList = document.getElementById('itemLinks');
for (i=0; i<consecItems+2; i++)
{
var nLink = document.createElement('span');
nLink.onclick = function()
{
var pageList = nList.getElementsByTagName('span');
if (this.firstChild.data == "Next")
{
if (pageList[pageList.length-2].firstChild.data == maxItems && pageList[pageList.length-2].className == "activePage")
{
return false;
}
if (pageList[pageList.length-2].className != "activePage")
{
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
index = i+1;
}
}
if (pageList[index].firstChild.data == "-")
{
pageList[index-1].className = "activePage"
return false;
}
pageList[index].className = "activePage";
}
else {
endItem = pageList[pageList.length-2].firstChild.data;
remaining = maxItems - endItem;
if (remaining >= consecItems)
{
nextSet = consecItems+1;
}
else {
nextSet = remaining + 1;
}
for (i=1; i<nextSet; i++)
{
pageList[i].firstChild.data = Number(endItem) + i;
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].firstChild.data <= Number(endItem))
{
pageList[i].firstChild.data = "-";
}
}
pageList[1].className = "activePage";
pageList[pageList.length-2].className = "availPage";
}
}
else if (this.firstChild.data == "Previous")
{
if (pageList[1].firstChild.data == 1 && pageList[1].className == "activePage")
{
return false;
}
if (pageList[1].className != "activePage")
{
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
index = i-1;
}
}
pageList[index].className = "activePage";
}
else {
endItem = pageList[1].firstChild.data;
remaining = endItem - 1;
var nSet = ((remaining / consecItems) - 1) * consecItems;
for (i=1; i<consecItems+1; i++)
{
pageList[i].firstChild.data = i + nSet;
}
pageList[1].className = "availPage";
pageList[pageList.length-2].className = "activePage";
}
}
else {
if (this.firstChild.data == "-")
{
return false;
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
}
}
this.className = "activePage";
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
activeURL = path + pageList[i].firstChild.data + ext;
}
}
//alert(activeURL);
// the following loads each selected image
subjImage.src = activeURL;
}
nLink.className = "availPage";
var nText = document.createTextNode(i);
nLink.appendChild(nText);
nList.appendChild(nLink);
}
var nItems = nList.getElementsByTagName('span');
nItems[1].className = "activePage";
nItems[0].firstChild.data = "Previous";
nItems[nItems.length-1].firstChild.data = "Next";
// the following loads the initial image, e.g., ./images/roswood_1.jpg
subjImage.src = path + "1" + ext;
}
onload=init;
</script>
<style type="text/css">
body {background-color:#eae3c6;margin-top:60px}
#itemLinks {background-color:#f0fff0;font-family:times;font-size:12pt;border:1px solid black;text-align:center;width:600px;margin:auto;position:relative;top:50px}
#imgDisplay {display:block;width:400px;height:300px;margin:auto}
.availPage {color:#0000ff;cursor:pointer;padding:5px}
.activePage {color:#000000;padding:5px;text-decoration:underline;cursor:auto}
</style>
</head>
<body>
<img id="imgDisplay" src="null" alt="">
<div id="itemLinks"></div>
</body>
</html>
Customizable. One control for web documents, another for images.
Paging Control for Web Documents:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
// Copyright 2007 Michael J. Hill www.javascript-demos.com
// Free use of the code so long as the above notice is kept intact
var maxItems = 21; // this is the number of documents/pages in the set
var consecItems = 10; // this is the number of integers appearing in between Previous and Next
var path = "./products/product_"; // the path and partial file name of your data documents, e.g., product_1.html;
var ext = ".html" // the file extension of your data files, e.g., .php, .pl, .asp, .aspx
function init(){
var activeURL = "";
var endItem = "";
var remaining = "";
var nextSet = "";
var index = 0;
var nList = document.getElementById('itemLinks');
for (i=0; i<consecItems+2; i++)
{
var nLink = document.createElement('span');
nLink.onclick = function()
{
var pageList = nList.getElementsByTagName('span');
if (this.firstChild.data == "Next")
{
if (pageList[pageList.length-2].firstChild.data == maxItems && pageList[pageList.length-2].className == "activePage")
{
return false;
}
if (pageList[pageList.length-2].className != "activePage")
{
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
index = i+1;
}
}
if (pageList[index].firstChild.data == "-")
{
pageList[index-1].className = "activePage"
return false;
}
pageList[index].className = "activePage";
}
else {
endItem = pageList[pageList.length-2].firstChild.data;
remaining = maxItems - endItem;
if (remaining >= consecItems)
{
nextSet = consecItems+1;
}
else {
nextSet = remaining + 1;
}
for (i=1; i<nextSet; i++)
{
pageList[i].firstChild.data = Number(endItem) + i;
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].firstChild.data <= Number(endItem))
{
pageList[i].firstChild.data = "-";
}
}
pageList[1].className = "activePage";
pageList[pageList.length-2].className = "availPage";
}
}
else if (this.firstChild.data == "Previous")
{
if (pageList[1].firstChild.data == 1 && pageList[1].className == "activePage")
{
return false;
}
if (pageList[1].className != "activePage")
{
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
index = i-1;
}
}
pageList[index].className = "activePage";
}
else {
endItem = pageList[1].firstChild.data;
remaining = endItem - 1;
var nSet = ((remaining / consecItems) - 1) * consecItems;
for (i=1; i<consecItems+1; i++)
{
pageList[i].firstChild.data = i + nSet;
}
pageList[1].className = "availPage";
pageList[pageList.length-2].className = "activePage";
}
}
else {
if (this.firstChild.data == "-")
{
return false;
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
}
}
this.className = "activePage";
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
activeURL = path + pageList[i].firstChild.data + ext;
}
}
//alert(activeURL);
// the following loads each selected document
window.frames['docDisplay'].location.replace(activeURL);
}
nLink.className = "availPage";
var nText = document.createTextNode(i);
nLink.appendChild(nText);
nList.appendChild(nLink);
}
var nItems = nList.getElementsByTagName('span');
nItems[1].className = "activePage";
nItems[0].firstChild.data = "Previous";
nItems[nItems.length-1].firstChild.data = "Next";
// the following loads the initial document, product_1.html
window.frames['docDisplay'].location.href = path + "1" + ext;
}
onload=init;
</script>
<style type="text/css">
body {background-color:#eae3c6;margin-top:60px}
#itemLinks {background-color:#f0fff0;font-family:times;font-size:12pt;border:1px solid black;text-align:center;width:600px;margin:auto;position:relative;top:50px}
#docDisplay {background-color:#ffdab9;display:block;width:600px;height:400px;margin:auto}
.availPage {color:#0000ff;cursor:pointer;padding:5px}
.activePage {color:#000000;padding:5px;text-decoration:underline;cursor:auto}
</style>
</head>
<body>
<iframe name="docDisplay" id="docDisplay" scrolling="auto"></iframe>
<div id="itemLinks"></div>
</body>
</html>
Paging Control for Images:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
// Copyright 2007 Michael J. Hill www.javascript-demos.com
// Free use of the code so long as the above notice is kept intact
var maxItems = 14; // this is the number of images in the set
var consecItems = 5; // this is the number of integers appearing in between Previous and Next
var path = "./images/rosewood_"; // the path & partial file name of your images, e.g., rosewood_1.jpg
var ext = ".jpg" // the file extension of your image files, e.g., .jpeg, .gif, .png
function init(){
var activeURL = "";
var endItem = "";
var remaining = "";
var nextSet = "";
var index = 0;
var subjImage = document.getElementById('imgDisplay');
var nList = document.getElementById('itemLinks');
for (i=0; i<consecItems+2; i++)
{
var nLink = document.createElement('span');
nLink.onclick = function()
{
var pageList = nList.getElementsByTagName('span');
if (this.firstChild.data == "Next")
{
if (pageList[pageList.length-2].firstChild.data == maxItems && pageList[pageList.length-2].className == "activePage")
{
return false;
}
if (pageList[pageList.length-2].className != "activePage")
{
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
index = i+1;
}
}
if (pageList[index].firstChild.data == "-")
{
pageList[index-1].className = "activePage"
return false;
}
pageList[index].className = "activePage";
}
else {
endItem = pageList[pageList.length-2].firstChild.data;
remaining = maxItems - endItem;
if (remaining >= consecItems)
{
nextSet = consecItems+1;
}
else {
nextSet = remaining + 1;
}
for (i=1; i<nextSet; i++)
{
pageList[i].firstChild.data = Number(endItem) + i;
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].firstChild.data <= Number(endItem))
{
pageList[i].firstChild.data = "-";
}
}
pageList[1].className = "activePage";
pageList[pageList.length-2].className = "availPage";
}
}
else if (this.firstChild.data == "Previous")
{
if (pageList[1].firstChild.data == 1 && pageList[1].className == "activePage")
{
return false;
}
if (pageList[1].className != "activePage")
{
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
index = i-1;
}
}
pageList[index].className = "activePage";
}
else {
endItem = pageList[1].firstChild.data;
remaining = endItem - 1;
var nSet = ((remaining / consecItems) - 1) * consecItems;
for (i=1; i<consecItems+1; i++)
{
pageList[i].firstChild.data = i + nSet;
}
pageList[1].className = "availPage";
pageList[pageList.length-2].className = "activePage";
}
}
else {
if (this.firstChild.data == "-")
{
return false;
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
pageList[i].className = "availPage";
}
}
this.className = "activePage";
}
for (i=1; i<consecItems+1; i++)
{
if (pageList[i].className == "activePage")
{
activeURL = path + pageList[i].firstChild.data + ext;
}
}
//alert(activeURL);
// the following loads each selected image
subjImage.src = activeURL;
}
nLink.className = "availPage";
var nText = document.createTextNode(i);
nLink.appendChild(nText);
nList.appendChild(nLink);
}
var nItems = nList.getElementsByTagName('span');
nItems[1].className = "activePage";
nItems[0].firstChild.data = "Previous";
nItems[nItems.length-1].firstChild.data = "Next";
// the following loads the initial image, e.g., ./images/roswood_1.jpg
subjImage.src = path + "1" + ext;
}
onload=init;
</script>
<style type="text/css">
body {background-color:#eae3c6;margin-top:60px}
#itemLinks {background-color:#f0fff0;font-family:times;font-size:12pt;border:1px solid black;text-align:center;width:600px;margin:auto;position:relative;top:50px}
#imgDisplay {display:block;width:400px;height:300px;margin:auto}
.availPage {color:#0000ff;cursor:pointer;padding:5px}
.activePage {color:#000000;padding:5px;text-decoration:underline;cursor:auto}
</style>
</head>
<body>
<img id="imgDisplay" src="null" alt="">
<div id="itemLinks"></div>
</body>
</html>