You are here: irt.org | Articles | JavaScript | Location | Automated Links [ previous next ]
Published on: Saturday 29th March 1997 By: Martin Webb
Creating automated links between sections of the same document can be easily performed using JavaScript.
Within a document you must first define the top using the <a>, i.e. the Anchor tag:
<html> <body> <a name="top"></a>
This then creates an internal link which can be navigated to using the following syntax:
<a href="#top">Top</a>
We can extend this to include links to either the next or last anchor, for example:
<a href="#3">Next</a> <a name="2"></a> <a href="#1">Last</a>
Using JavaScript these can be automatically generated using a function a counter and multiple calls to the funtion.
First define the count variable:
<script language="JavaScript"><!-- var link = 0; ...
Followed by the links() function that will do all the work:
...
function links(next) {
if (!next)
document.write('<a name="end"></a>');
document.write('<a href="#top">Top</a> | ');
document.write('<a href="#',link-1,'">Last</a> | ');
document.write('<a name="',link++,'"></a>');
document.write('<a href="#',link,'">Next</a> | ');
document.write('<a href="#end">End</a>');
}
//--></script>The 1st line will only create an anchor called end if the parameter passed to the links() function is false.
The 2nd line of the function create a links to the top anchor already created within the document.
The 3rd line creates a link back to the previously defined anchor created by the links() function.
The 4th line creates a new anchor each time the links() function is called. The name of the new anchor is based on the value of link, which is then incremented by +1.
The 5th line creates a link to the next anchor that will be created by the links() function.
The 6th line creates a links to the end anchor already created within the document.
To produce automated links within a document then the following HTML must be placed where a new link is required:
<script language="JavaScript">links(true);</script>
or for the last link:
<script language="JavaScript">links(false);</script>
Obviously this will always show the text ' Top | Last | Next | End ' even when the document is currently at the top or end.
As this is untidy the links() function can be further extended to show only ' Next | End ' when the document is at the top, and only ' Top | Last ' when the document is at the bottom:
<script language="JavaScript"><!--
var link = 0;
function links(next) {
if (!next)
document.write('<a name="end"></a>');
document.write('<center><font size=-1><hr>');
if (link != 0) {
document.write('<a href="#top">Top</a> | ');
document.write('<a href="#',link-1,'">Last</a>');
}
if ((link != 0) && (next))
document.write(' | ');
document.write('<a name="',link++,'"></a>');
if (next) {
document.write('<a href="#',link,'">Next</a> | ');
document.write('<a href="#end">End</a>');
}
document.write('</font></center>');
}
//--></script>