Home / Free JavaScripts / Combo Boxes / Here

Cut & Paste Pagination Combo Box

Credit: JavaScript Kit

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="" selected="true">Build Your Own Rocket Article Page 1 </option>
<option value="">Build Your Own Rocket Article Page 2 </option>
<option value="">Build Your Own Rocket Article Page 3 </option>
</select> <a href="#" class="paginatenext">Next</a>
<div class="paginatestatusdiv"></div>

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.

JavaScript Tools:
Site Info

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info