Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JS Previous and Next page function

    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.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.

    Code:
            
              <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

    Code:
             <button onclick="changePage(-1);">Previous</button>
             <button onclick="changePage(1);">Next</button>
    Last edited by bullant; 06-26-2011 at 06:15 AM.

  • #3
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by mellow View Post
    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.

  • #4
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


    Code:
    <!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.
    Last edited by mellow; 06-26-2011 at 06:59 AM.

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.
    Code:
    <!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>
    Last edited by bullant; 06-26-2011 at 07:20 AM.

  • #6
    New to the CF scene
    Join Date
    Jun 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    you're welcome


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •