Next and Previous buttons with static pages?

[bobII]

I have a html catalog that is 555 pages and wanted to create [next] and [previous] buttons at the top of every page. I was planning on using a top frame that would contain the [next] and [previous] code. What I'm hoping to accomplish is a user would be able to start at page 1 and have the ability to click the [next] button until they reach page 555. At that point the [next] button would be grayed out, or the text would not appear. I'm just not sure where to start. The pages start at 1.html and end with 555.html.

Can someone give me a hand?

Thanks in advance for your help!

[TheDefender]

This is kind of a basic example, but here you go... This should get you started:

Setup your frames in your main page. In this case, mine was index.php:

<?
$page = $_GET['page'];
?>
<FRAMESET rows="100,*">
<FRAME src="nav.php?page=<? echo $page; ?>" />
<FRAME src="<? echo $page; ?>.html" />
</FRAMESET>

This should be your Navigation in the top frame. (the nav.php file)

<?
// Assign your GET variable to a usable variable
$page = $_GET['page'];

// Assign your high and low limits
$lowlimit = 1;
$highlimit = 555;

// Ensure you go to the first or last page if the page value posted from the GET is less than 1 or greater than 555 (your limit in this case)
IF(($page < $lowlimit) || ($page > $highlimit)):
  IF($page < $lowlimit):
    $page = $lowlimit;
  ENDIF;
  IF($page > $highlimit):
    $page = $highlimit;
  ENDIF;
ENDIF;


// Build Previous Link
IF($page > $lowlimit):
  echo "<a href=\"index.php?page=".($page-1)."\" target=\"_top\">Previous Page</a> | ";
ENDIF;

// Display the current page
echo "Currently Viewing Page: ".$page." of ".$highlimit;

// Build Next Link
IF($page < $highlimit):
  echo " | <a href=\"index.php?page=".($page+1)."\" target=\"_top\">Next Page</a>";
ENDIF;
?>

Then just make sure all of your files are in the same directory, and call the page like so:

http://www.yourdomain.com/index.php?page=1

Like I said, this is a pretty basic example, but it sounds like it does what you want. In this case, I didn't apply any formatting or alignment of the text. I leave that for you.

[TheDefender]

Oh yeah, you may want to put in some kind of error checking to make sure the $page variable is even set...

Put Something like this at the beginning of the index.php file.....

Replace the line that reads:

$page = $_GET['page'];

With:

IF(!ISSET($_GET['page']) || ($_GET['page'] == '')):
  $page = 1;
ELSE:
  $page = $_GET['page'];
ENDIF;

[bobII]

thanks for your help my friend! I'll be trying this out shortly 😃

[TheDefender]

No problem bobII. Just let me know if you need any help with it. It should be pretty straight forward. You can also rewrite the code a little, so you use form submissions instead of links. That way you can clean up the URL a bit and get rid of the page=1, but if you use javascript to pop open a window and hide the address, that doesn't matter too much anyhow. Either way, let me know if you need any other help. If this works for you, be sure to come back here and mark this thread resolved.

Good luck with it.

[bobII]

Originally posted by TheDefender
No problem bobII. Just let me know if you need any help with it. It should be pretty straight forward. You can also rewrite the code a little, so you use form submissions instead of links. That way you can clean up the URL a bit and get rid of the page=1, but if you use javascript to pop open a window and hide the address, that doesn't matter too much anyhow. Either way, let me know if you need any other help. If this works for you, be sure to come back here and mark this thread resolved.

Good luck with it.

Code worked out great my friend, thanks again!

If I wanted to add a form that would contain an input box, so a user could enter a page number and be taken directly to it, what would I need to do?

I started out so far with this (it doesn't work though) and placed it in nav.php:

// input box to allow user to enter in a page number
echo "<form action=nav.php?page=$inputbox method=post >";
echo "<div align=center>";
echo "<input name=inputbox type=text class=textbox size=6 maxlength=6>";
echo "<input type=submit name=Submit value=GO class=submit>";
echo "</div></form>";

Any suggestions?

[TheDefender]

Something along these lines, if you already use and commit to the GET method. (ie. page# in the URL)

// input box to allow user to enter in a page number 
echo "<form action=\"index.php\" method=\"GET\">"; 
echo "<div align=center>"; 
echo "<input name=\"page\" type=\"text\" class=\"textbox\" size=\"6\" maxlength=\"6\">"; 
echo "<input type=\"submit\" name=\"Submit\" value=\"GO\" class=\"submit\">"; 
echo "</div></form>";

Using what I gave you earlier, you always want to have your reference go to the main index page that contains the frameset. This way, the variables defined in the URL will be able to be properly distributed to the frames as needed. If you target specific pages or frames, it could mess things up a bit.

[bobII]

Originally posted by TheDefender
Something along these lines, if you already use and commit to the GET method. (ie. page# in the URL)

// input box to allow user to enter in a page number 
echo "<form action=\"index.php\" method=\"GET\">"; 
echo "<div align=center>"; 
echo "<input name=\"page\" type=\"text\" class=\"textbox\" size=\"6\" maxlength=\"6\">"; 
echo "<input type=\"submit\" name=\"Submit\" value=\"GO\" class=\"submit\">"; 
echo "</div></form>";

Using what I gave you earlier, you always want to have your reference go to the main index page that contains the frameset. This way, the variables defined in the URL will be able to be properly distributed to the frames as needed. If you target specific pages or frames, it could mess things up a bit. [/B]

Using the input box, it displays the desired page number, but it doesn't 'fetch' that page. Here's what I have so far:

Nav.php

<? 
// Assign your GET variable to a usable variable 
error_reporting(7);
IF(!ISSET($_GET['page']) || ($_GET['page'] == '')): 
  $page = 1; 
ELSE: 
  $page = $_GET['page']; 
ENDIF;

// Assign your high and low limits 
$lowlimit = 1; 
$highlimit = 555; 

// Ensure you go to the first or last page if the page value posted from the GET is less than 1 or greater than 555 (your limit in this case) 
IF(($page < $lowlimit) || ($page > $highlimit)): 
  IF($page < $lowlimit): 
    $page = $lowlimit; 
  ENDIF; 
  IF($page > $highlimit): 
    $page = $highlimit; 
  ENDIF; 
ENDIF; 


// Build Previous Link
echo "<center>"; 
IF($page > $lowlimit): 
  echo "<a href=\"index.php?page=".($page-1)."\" target=\"_top\"><font size=2 face=Verdana, Arial, Helvetica, sans-serif>Previous Page </font> </a> | "; 
ENDIF; 

// Display the current page 

echo "<font size=2 face=Verdana, Arial, Helvetica, sans-serif> Currently Viewing Page: <b><i>".$page." </i></b>of ".$highlimit; 
echo "</font>";
// Build Next Link 
IF($page < $highlimit): 
  echo " | <a href=\"index.php?page=".($page+1)."\" target=\"_top\"><font size=2 face=Verdana, Arial, Helvetica, sans-serif>Next Page</a></font>"; 
ENDIF; 

// input box to allow user to enter in a page number 
echo "<form action=\"index.php\" method=\"GET\">";    

echo "<div align=center>";  

echo "<input name=\"page\" type=\"text\" class=\"textbox\" size=\"6\" maxlength=\"6\">";  

echo "<input type=\"submit\" name=\"Submit\" value=\"GO\" class=\"submit\">";  

echo "</div></form>";
?>
// end of Nav.php

Index.php

<? 
$page = $_GET['page']; 
?> 
<FRAMESET rows="65,*" cols="*" frameborder="yes" bordercolor="#000000">
  <FRAME src="nav.php?page=<? echo $page; ?>" />
  <FRAME src="<? echo $page; ?>.html" />
</FRAMESET>
<noframes></noframes> 
# end of index.php 

Thanks in advance for your help!

[TheDefender]

Change this:

echo "<form action=\"index.php\" method=\"GET\">";

to this:

echo "<form action=\"index.php\" method=\"GET\" target=\"_top\">";

[TheDefender]

OK, so I was playing around with the code a lot, and came up with a solution to a bunch of things all at once...

• Get rid of the frames. Frames are a nuisance, and can create problems in different browsers.

• Have a means by which people can skip ahead or back a few pages at a time.

• Keep the look uniform.

• Make it so you can drop this script in any folder, and it is reusable (so long as you use the same scheme such as page1.html, page2.html, etc...)

So, without further ado, here it is:

<? 
// Assign your GET variable to a usable variable 
IF(!ISSET($_GET['page']) || ($_GET['page'] == '')): 
  $page = 1; 
ELSE: 
  $page = $_GET['page']; 
ENDIF;


// Assign your high and low limits 
$lowlimit = 1; 
$highlimit = 555; 

// Ensure you go to the first or last page if the page value posted from the GET is less than 1 or greater than 555 (your limit in this case) 
IF(($page < $lowlimit) || ($page > $highlimit)): 
  IF($page < $lowlimit): 
    $page = $lowlimit; 
  ENDIF; 
  IF($page > $highlimit): 
    $page = $highlimit; 
  ENDIF; 
ENDIF; 

echo "<div align=center>";  

// Build Previous Link 
IF($page > $lowlimit): 
	echo "<a href=\"index.php?page=".($page-1)."\" target=\"_top\">&laquo;</a> | ";
ELSE:
	echo "&laquo; | "; 
ENDIF; 


// Build Quick Nav links
IF($page == $lowlimit):
	FOR($i=$page; $i < ($page+5); $i++):
		IF($page == $i):
			echo $i." | ";
		ELSE:
			echo "<a href=\"index.php?page=".$i."\" target=\"_top\">".$i."</a> | ";
		ENDIF;
	ENDFOR;
ELSEIF(($page-1) == $lowlimit):
	FOR($i=($page-1); $i < ($page+4); $i++):
		IF($page == $i):
			echo $i." | ";
		ELSE:
			echo "<a href=\"index.php?page=".$i."\" target=\"_top\">".$i."</a> | ";
		ENDIF;
	ENDFOR;
ELSEIF(($page-2) == $lowlimit):
	FOR($i=($page-2); $i < ($page+3); $i++):
		IF($page == $i):
			echo $i." | ";
		ELSE:
			echo "<a href=\"index.php?page=".$i."\" target=\"_top\">".$i."</a> | ";
		ENDIF;
	ENDFOR;
ELSEIF($page == $highlimit):
	FOR($i=($page-4); $i <= $page; $i++):
		IF($page == $i):
			echo $i." | ";
		ELSE:
			echo "<a href=\"index.php?page=".$i."\" target=\"_top\">".$i."</a> | ";
		ENDIF;
	ENDFOR;
ELSEIF(($page+1) == $highlimit):
	FOR($i=($page-3); $i <= ($page+1); $i++):
		IF($page == $i):
			echo $i." | ";
		ELSE:
			echo "<a href=\"index.php?page=".$i."\" target=\"_top\">".$i."</a> | ";
		ENDIF;
	ENDFOR;
ELSEIF(($page+2) == $highlimit):
	FOR($i=($page-2); $i <= ($page+2); $i++):
		IF($page == $i):
			echo $i." | ";
		ELSE:
			echo "<a href=\"index.php?page=".$i."\" target=\"_top\">".$i."</a> | ";
		ENDIF;
	ENDFOR;
ELSE:
	FOR($i=($page-2); $i <= ($page+2); $i++):
		IF($page == $i):
			echo $i." | ";
		ELSE:
			echo "<a href=\"index.php?page=".$i."\" target=\"_top\">".$i."</a> | ";
		ENDIF;
	ENDFOR;
ENDIF;


// Build Next Link 
IF($page < $highlimit): 
	echo "<a href=\"index.php?page=".($page+1)."\" target=\"_top\">&raquo;</a>"; 
ELSE:
	echo "&raquo;"; 
ENDIF; 

echo "<BR/>";
// Display the current page 
echo "Page: ".$page." of ".$highlimit; 


// input box to allow user to enter in a page number 
echo "<form action=\"index.php\" method=\"GET\">";  

echo "<input name=\"page\" type=\"text\" class=\"textbox\" size=\"6\" maxlength=\"6\">";  

echo "<input type=\"submit\" value=\"Go\" class=\"submit\">";  

echo "</form>";
echo "</DIV>";
?> 
<HR>
<?
include("./page".$page.".html");
?>

There are easier ways to build the Quick Nav links, but I did it this way so you could see what it is doing, and why it does what it does. Have fun with it.

[bobII]

Originally posted by TheDefender
Change this:

echo "<form action=\"index.php\" method=\"GET\">";

to this:

echo "<form action=\"index.php\" method=\"GET\" target=\"_top\">";

[/B]

That worked great!

How about if I wanted to setup some sort of checking function of for the input box? The catalog is 555 pages, and if someone entered 556, if will take them to a "page cannot be displayed' error. I'd like it to say something like, "Please enter in a page number ranging from 1-555" or something along those lines....

I honestly think I'm stuck using a frameset since these catalog pages are 'layer' based.... They are converted .pdf pages....

Thanks again for all your help!

[TheDefender]

It's already in the code I gave you.

// Ensure you go to the first or last page if the page value posted from the GET is less than 1 or greater than 555 (your limit in this case) 
IF(($page < $lowlimit) || ($page > $highlimit)):  

  IF($page < $lowlimit):  

    $page = $lowlimit;  

  ENDIF;  

  IF($page > $highlimit):  

    $page = $highlimit;  

  ENDIF;  

ENDIF;

That's what this code is for. Basically, it is saying if the $page variable (the GET from the URL) is less than the lowlimit of 1, then set the $page variable to 1. If it higher than the $highlimit, then set it to the $highlimit value of 555 (in your case).

This way if someone enters 800 (or changes the URL to show 800 for example), then it will set the page to 555. (The URL still shows 800, but the page is actually 555.)
It doesn't echo any errors or anything. Instead, it just moves them to the next page within the range (either 1 or 555 in your case), but you can easily add some sort of message.

// Ensure you go to the first or last page if the page value posted from the GET is less than 1 or greater than 555 (your limit in this case)
$error = ""; 
IF(($page < $lowlimit) || ($page > $highlimit)):  

  IF($page < $lowlimit):  

    $page = $lowlimit;
    $error = "Your selection was too low, so you have been sent to the first page.";
  ENDIF;  

  IF($page > $highlimit):  

    $page = $highlimit;
    $error = "Your selection was too high, so you have been sent to the last page.";  

  ENDIF;  

ENDIF;

// Then later in the code, like right here:
// Display the current page and error
echo "Page: ".$page." of ".$highlimit;
echo "<BR/>".$error; 

Just for example.

[bobII]

Thanks again for all your help. Everything is working great!

[TheDefender]

Glad to hear it. Be sure to mark this thread resolved using the "Mark Thread Resolved" link at the bottom of the page.