...

View Full Version : JS Previous and Next page function



mellow
06-26-2011, 04:59 AM
Evening folks

I'm -very- green when it comes to Javascript, but I'm working my way up.

The problem right now I'm running in to now is when trying to implement a website function that allows two buttons (previous, and next) to do their respective tasks.

I can get the script to go forward and back, however when I jump to another page in the frame (this is all through iframes), when clicking either button, it will take me to the last page I had stopped on. A little hard to explain, but maybe seeing the code will give you a better idea.

<script type="text/javascript">
var pNum=0;
var maxPage=10;
function next()
{
pNum++;
if (pNum > maxPage) pNum=10;
document.getElementById("frame").src="page"+pNum+".htm";
}
function prev()
{
pNum--;
if (pNum < 0) pNum=0;
document.getElementById("frame").src="page"+pNum+".htm";
}
</script>


It's nothing fancy, but it's apparently keeping the last page it was on in memory instead of resetting itself, so when I go back to the start page it starts on page 0 and goes to page 10; right now I can stop on page 5, click a link to go back to the starting default page, and when using the 'next page' button it will start on 6 and go from there.


Any help or advice would be appreciated.

bullant
06-26-2011, 05:11 AM
I can't see anything obvious why your code doesn't work. Maybe there is something else going on elsewhere in your code or someone else can spot something.

But if you wanted to, you could combine your 2 prev/next functions into 1 function.



<script type="text/javascript">
var minPage = curPage = 0;
var maxPage = 10;
function changePage(dirn){
curPage += dirn;
if(curPage > maxPage) {curPage = maxPage;}
if(curPage < minPage) {curPage = minPage;}
document.getElementById("frame").src="page"+curPage+".htm";
}
</script>and somewhere in your html



<button onclick="changePage(-1);">Previous</button>
<button onclick="changePage(1);">Next</button>

bullant
06-26-2011, 05:22 AM
right now I can stop on page 5, click a link to go back to the starting default page, and when using the 'next page' button it will start on 6 and go from there.


I suspect the code that runs when you click the link (yellow bit) is not resetting the current page value to the default page number.

Post the code the link executes.

mellow
06-26-2011, 05:55 AM
Thanks for the quick replies, guys. I really appreciate it. Here's the entire source for the index page I'm working on. It's a self-interest site to which I plan on doing some short stories. So in the top menu bar I'll have Home, Chapters, Page back and Page next.

When I get to the page 10 and click on Home, it's supposed to bring me to the default page I started on so I can start on the first page again. However when I get to page 10, click home, and click on the 'next page' option, it'll take me to the last page I was on instead of starting over.

Appreciate the help again folks.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var pNum=0;
var maxPage=10;
function next()
{
pNum++;
if (pNum > maxPage) pNum=10;
document.getElementById("frame").src="page"+pNum+".htm";
}
function prev()
{
pNum--;
if (pNum < 0) pNum=0;
document.getElementById("frame").src="page"+pNum+".htm";
}
</script>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<table>
<tr>
<td>
<div class="menu">
<ul>
<li><a href="default.htm" target="frame">Home</a></li>
<li><a href="#">Chapters</a>
<ul>
<li><a href="page0.htm" target="frame">@Level 1</a></li>
</ul>
</li>
<li><a href="#" OnClick="prev();">Page [ - ]</a></li>
<li><a href="#" OnClick="next();">Page [ + ]</a></li>
</ul>
</div>
</td>
</tr>
</table>
<iframe id="frame" name="frame" src="default.htm" frameborder="0">
</iframe>
</body>
</html>

For some reason when I post the source on these fourms, in the Home link it adds a "rel="nofollow", and I'm not exactly sure why or what it is. Just a heads up.

bullant
06-26-2011, 06:11 AM
ok, it looks like that maybe when you click the home link, it is loading the default.htm into the iframe with the current value for pNum unchanged.

Try this (changes highlighted in red) so that when you click the home link, pNum is reset to 0 and default.htm is loaded into the iframe.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var pNum=0;
var maxPage=10;
function next()
{
pNum++;
if (pNum > maxPage) pNum=10;
document.getElementById("frame").src="page"+pNum+".htm";
}
function prev()
{
pNum--;
if (pNum < 0) pNum=0;
document.getElementById("frame").src="page"+pNum+".htm";
}
function resetPages(){
pNum = 0;
document.getElementById("frame").src = 'default.htm';
}
</script>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<table>
<tr>
<td>
<div class="menu">
<ul>
<li><a href="" onclick="resetPages(); return false;">Home</a></li>
<li><a href="#">Chapters</a>
<ul>
<li><a href="page0.htm" target="frame">@Level 1</a></li>
</ul>
</li>
<li><a href="#" OnClick="prev(); return false;">Page [ - ]</a></li>
<li><a href="#" OnClick="next(); return false;">Page [ + ]</a></li>
</ul>
</div>
</td>
</tr>
</table>
<iframe id="frame" name="frame" src="default.htm" frameborder="0">
</iframe>
</body>
</html>

mellow
06-26-2011, 06:19 AM
That did the trick, bullant. I had figured it was something like that and wrote a reset function earlier in the day, but used reset() instead of resetPage().

Thanks! :D

bullant
06-26-2011, 06:21 AM
you're welcome :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum