Multi-Page Menus

Introduction

One way in which I decided to try and improve navigation around the site was to include a menu at the bottom of the pages that are a continuation of another. For example, the "Postcards" section of "Terre Haute" currently contains 11 pages, the "Castle" section of "Bristol, England' currently contains 6 pages.

What I wanted was a system where a single piece of JavaScript could write a menu showing the number of pages in the section, with links and also have links for the first, previous, next and last pages.

What I came up with looks like this...

Example Multi-Page Menu

Example Multi-Page Menu
Image from Terre Haute > Postcards, page 6

Implementation

I've seen menu's like this on other sites but in this case decided simply to write my own.

The Code

What I came up with is...

function multipage(){

var path = location.pathname;
path = path.replace(/\\/g, '/');
var fullName = ""
var fileName = path.substring(path.lastIndexOf('/')+1);
var numStart = fileName.search(/\d/);
var numEnd = fileName.indexOf('.');
var pageNum = fileName.substring(numStart,numEnd);
var firstPart = fileName.substring(0, numStart);

switch(firstPart){
case "tpcards" :
fullName = "Postcards";
maxPages=11;
break;

case "bcastle" :
fullName = "Bristol Castle";
maxPages=6;
break;
}

document.write('<p class="ctr">' + fullName + ': ');

if(pageNum>"1"){
document.write('<a href="' + firstPart + '1.htm">First</a>');
document.write(' <a href="' + firstPart + (pageNum-1) + '.htm">Prev.</a>');
}
else{
document.write('First');
document.write(' Prev.');
}

for(cnt=1;cnt<=maxPages;cnt++){
if(pageNum!=cnt){
document.write(' <a href="' + firstPart + cnt + '.htm">' + cnt + '</a>');
}
else{
document.write(' ' + cnt);
}
}

if(pageNum<maxPages){
document.write(' <a href="' + firstPart + (++pageNum) + '.htm">Next</a>');
document.write(' <a href="' + firstPart + maxPages + '.htm">Last</a>');
}
else{
document.write(' Next');
document.write(' Last');
}

document.write('</p>');
}

Dissection

location.pathname is used to obtain the path from the root and the current document name. For example, /th/tpcards6.htm

path = path.replace(/\\/g, "/"); is for when the site is on a CD or hard drive. What this code does is replace all the instances of "\" in the path name and changes them to a "/". This is the regular expression form of replace that is capable of changing all the looked for characters in a string.

path.substring(path.lastIndexOf('/')+1); looks for the last instance of the substring "/" in the variable named path. and returns the position number from the left. The first character of a string starts at position 0. ie lastIndexOf() starts the search from the right of the string. In this instance it's extracting the filename from the full path.

fileName.search(/\d/); looks for any numeral in the string variable fileName and returns its position number. This is a regular expression, where \d means digit. \d\d would look for a substring of two digits. Because each of the files is named to a convention ie tpcards1.htm, tpcards2.htm etc. it's picking out the position at where the digits start. In tpcards12.htm it would return the position of the first digit it finds. In all these examples it would return the number 7.

fileName.indexOf('.'); looks for the first instance of the substring "." in the variable named fileName and returns the position number from the left. The first character of a string starts at position 0. ie IndexOf() starts the search from the left of the string. In tpcards1.htm it would return 8, in tpcards12.htm it would return 9.

fileName.substring(numStart,numEnd); Uses the previous two searches to extract the number in the file name. In tpcards1.htm it would return 1, in tpcards12.htm it would return 12.

fileName.substring(0, numStart); Extracts the first part of the filename. In tpcards1.htm and tpcards12.htm it returns "tpcards"

The switch function makes the last extracted string more human readable. For example, tpcards is pretty meaningless so it makes sure it is associated with "Postcards". Because JavaScript can't search for the number of pages in a section (it has no server file search facilities) the number of files in a section has to be hard coded.

The final part of the code simply writes the links and page numbers to the HTML page. The actual page numbers are inserted using a FOR loop

Calling the function

The JavaScript function can be called by using any of the standard techniques. Because the code is used on several pages on the site I put the function in the main JS file for the site, brisray.js

The pages have to be told where this file is. This is done by putting <script type="text/javascript" src="../common/brisray.js" language="javascript"></script> in the HEAD section of each page.

Where the menu is to appear in the BODY of the page the following code is used...

<script language="JavaScript" type="text/javascript">
<!--
multipage();
-->
</script>

Sources

JavaScript - String Object - String functions and regular expressions
Object: Document - Document objects and properties
Parsing the Querystring with JavaScript - Location and document objects and properties
Strings in JavaScript - String functions
Using Regular Expressions with JavaScript and ECMAScript - Regular expressions

This page created 19th October 2005, last modified 19th October 2005


GoStats stats counter