Cut & Paste Pagination Combo Box
|
Description: Inspired by a similar mechanism found on certain articles on PCWorld, use this combo box script as the pagination interface on a series of related pages, such as a long article. The combo automatically creates a "Next" link that goes to the next page within the select menu, plus a DIV containing the same. The idea is to put this script on each of the participating pages, and watch the script adopt accordingly.
Example: (incomplete demo, as you need multiple pages all containing this script to fully demonstrate how it works):
Step 1: Insert the below into the <HEAD> section of your page:
There are two variables within the script (near the top) you can customize.
Step 2: Insert the below two sample combo boxes the <body> section of your page:
The code of Step 2 shows the HTML of a sample Pagination Combo. What you have is this:
<form
class="paginateform">
<select size="1" class="paginateselect">
<option value="http://www.google.com" selected="true">Build
Your Own Rocket Article Page 1 </option>
<option value="http://images.google.com/">Build Your Own Rocket Article Page 2
</option>
<option value="http://groups.google.com">Build Your Own Rocket Article Page 3
</option>
</select> <a href="#" class="paginatenext">Next</a>
<div class="paginatestatusdiv"></div>
</form>
The key are the four CSS class names above, which are used by
the script to identify the four components of a pagination combo- the form, the
select menu, the "Next" link, and the "Next" div. Do NOT remove these
class names! Then, use HTML's selected="true"
attribute inside the
OPTION that refers to the current page, and that's it! For each page within your
series of pages, obviously move this attribute around to point to the OPTION in
question.
You can have multiple pagination combos on the same page, though in most cases, you probably won't need to.