I see on alot of web sites they have pages where somewhere you've got "Page: 1 2 3 4" etc. and you click on each one, but rather then going to a new area of the website it has something like "www.something.com/somwhere.php?page=1" - "www.something.com/somwhere.php?page=2" etc. How is this done? As i'd like soemthing like this for the simplistic designed site i'm working on now. thanks, TDD
You have to have a little knowledge of PHP and about the POST and GET form methods. Its pretty easy. Google for tutorials and you'll get hundreds of them.
A JavaScript solution... <!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"> var maxItems = 21; 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> Code (markup):