Automating the Previous and Next buttons

You are here: irt.org | Articles | JavaScript | Miscellaneous | Automating the Previous and Next buttons

Published on: Thursday 12th June 1997 By: Martin Webb

If you want to navigate between documents at the same level, without having to return to the parent directory each time, and without having to specify the exact location and filename of the previous and next document each and every time a new article was written and added to the list, then this article is for you.

Each article would be in its own directory.
The directories would have the naming convention prefixPart999, where prefixPart can be anything as long as all the directories have the same value, and 999 is a number starting from 1. For example the first article is placed in the directory js001, the second in js002, third in js003, and so on.
Because there isn't a means to determine the last article written, then when adding an article to the site it would need some small manual override to stop the button being shown. At the same time the previous article would require the manual override being removed.
The first article in the list will also require a one off manual override to stop the button from being shown.

Now that we have stated the assumptions we can write the code:

<HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function go(dir) { 
    var text = self.location.href;
    var pos = text.indexOf('js');
    var num = text.substring(pos+2,pos+5) - 0 + dir;
    num = (num < 10) ? "00" + num : ( (num < 100) ? "0" + num : num);
    window.location.href = text.substring(0,pos+2) +
                           num +
                           text.substring(pos+5,text.length);
}
//--></SCRIPT>
</HEAD>

The go() function when passed a value of -1 or +1 as dir, first obtains the current location using self.location.href.

The text variable which holds the location is examined to extract the current directory number, i.e. the 999 suffix in prefixPart999, suing indexOf and substring. Once this is found the value of the passed parameter variable dir is added to the suffix to give the new location using window.location.href.

The superfluous - 0 allows us to convert a string containing a numerical value to a number, without having to resort to using eval().

To activate the go() we need to place the images with a link using the HREF="JavaScript:go(-1)" to go to the previous article and HREF="JavaScript:go(1)" to go to the next article.

To spread the images as far apart from one another, I have placed the images within a table:

<TABLE WIDTH=100% BORDER=0><TR>

<TD><A HREF="JavaScript:go(-1)"><IMG WIDTH=80 HEIGHT=26 BORDER=0
  ALT="previous" SRC="../images/prev.gif"></A></TD>

<TD WIDTH=100%>&nbsp;</TD>

<TD><A HREF="JavaScript:go(1)"><IMG WIDTH=80 HEIGHT=26 BORDER=0
  ALT="next" SRC="../images/next.gif"></A></TD>

</TR></TABLE>

To manually override one of the buttons, comment out the whole table cell:

<TABLE WIDTH=100% BORDER=0><TR>

<TD><A HREF="JavaScript:go(-1)"><IMG WIDTH=80 HEIGHT=26 BORDER=0
  ALT="previous" SRC="../images/prev.gif"></A></TD>

<TD WIDTH=100%>&nbsp;</TD>

<!--TD><A HREF="JavaScript:go(1)"><IMG WIDTH=80 HEIGHT=26 BORDER=0
  ALT="next" SRC="../images/next.gif"></A></TD-->

</TR></TABLE>

To create a second copy of the buttons, for example at the bottom of the page, just repeat the table.

The buttons can be further enhanced by the use of onMouseOver and onMouseOut events to highlight the images and change the status bar text - this exercise is left to the pupil.

View the profile on Martin Webb and the list of other Articles by Martin Webb.

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 21st December 2007. Maintained by: Martin Webb
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.