You are here: irt.org | Articles | JavaScript | Location | Array-Tours [ previous next ]
Published on: Wednesday 1st January 1997 By: Martin Webb
The Array-Tour demonstration is made up of three basic HTML files:
Note, the files do not need to be called this, but this is what has been used in this Array-Tour. There is also no restriction on the number of files that make up the tour.
The tour.htm file contains HTML to define the size, position and initial contents of two frames. The basic HTML without the completed JavaScript looks like this:
<html>
<head><title>Array-Tour Navigation</title></head>
<script language="JavaScript"><!--
//-->
</script>
<frameset frameborder="0" framespacing="0" rows="50,*">
<frame scrolling="no" frameborder="0" marginheight="0"
marginwidth="0" name="nav" noresize src="tour-n.htm">
<frame scrolling="yes" frameborder="0" marginheight="0"
marginwidth="10" name="workarea" noresize src="tour1.htm">
</frameset>
</html>The Frameset tags place the contents of tour-n.htm in the nav frame, and tour1.htm in the workarea frame.
Note that there isn't a Body tag as it is not required, and that the Frameset appears after the JavaScript otherwise the scripts may not be recognised by individual browsers.
The tour-n.htm uses the combination of a Table and a Form to display the navigation buttons. The basic HTML without the completed JavaScript looks like this:
<html> <body> <center> <table height="100%"><tr><td> <form name="form1" onSubmit=""> <input type="button" value=" << " onClick=""> <input type="button" value=" < " onClick=""> <input type="button" value=" ^ " onClick=""> <input type="button" value=" > " onClick=""> <input type="button" value=" >> " onClick=""> <select name="select1"> <script language="JavaScript"><!-- //--></script> </select> <input type="submit" value="Go"> </form> <script language="JavaScript"><!-- //--></script> </td></tr></table> </center> </body> </HTML>
This has defined a Form called form1 which contains a selection called select1. The onSubmit and onClick tags will contain JavaScript described later in the tour.
Note that there are currently no Options within the Selection. The Options will eventually be created by the addition of the JavaScript.
Finally, the contents of the actual tour contained within the HTML files tour1.htm through to tour9.htm.
This is entirely upto you, as there is no need for them to contain any JavaScript whatsoever. In fact you can use existing pages that you have available without making any modifications.
This Array-Tour demonstration does, however, include an example of extra features that can be added. The basic HTML, without the completed JavaScript, for the previous introduction page looks like this:
<html> <body> <script language="JavaScript><!-- //--></script> <p> Use the navigational aids shown above to follow the Web Site sample tour. </p> <p> The tour will explain how you can create your own Array-Tours. </p> <script language="JavaScript"><!-- //--></script> </body> </html>
The hierarchy of the basic components looks like this:
|
The tour.htm is the parent document of the two frames nav and workarea.
Within JavaScript to set the location of the workarea frame from the parent document the following syntax is used:
self.workarea.location.href = 'fileName'
The frames nav and workarea are child frames of the parent document tour.htm.
Within JavaScript to access a function in the parent document from one of the child frames the following syntax is used:
parent.functionName()
To access a property of an item within an array:
parent.arrayName[itemNumber].propertyName
In the nav frame to access the Selection select1 within the Form form1 the following syntax is used:
document.form1.select1
To access a property, e.g. the index of the selected Option:
document.form1.select1.selectedIndex
To access the value property of the selected Option:
document.form1.select1.options[ document.form1.select1.selectedIndex ].value
The following JavaScript code is placed in the tour.htm file.
The first part a function called Link() which when invoked will create an instance of an Link object with two properties href and text.
//This script defines an object called 'Link'
function Link(href,text) {
this.href = href;
this.text = text;
}The second part creates an array called myLink, and defines a function called setLink(), which when invoked will create a new instance of a Link object using the Link() function and store it in the myLink array.
//This script creates an array called 'myLink'
var item = 0;
var myLink = new Array();
//This script creates a new instance of a 'Link' object
function setLink(href,text) {
myLink[item] = new Link(href,text);
item++;
}The third part creates nine Link objects using the setLink() function.
//This script populates the array 'myLink' with 'Link' objects
setLink('tour1.htm','Array Tour Start');
setLink('tour2.htm','Tour Components');
setLink('tour3.htm','Frames');
setLink('tour4.htm','Arrays of Objects');
setLink('tour5.htm','Forms, Selections and Options');
setLink('tour6.htm','Navigation');
setLink('tour7.htm','Automating Headers and Footers');
setLink('tour8.htm','Source Code');The properties, href and text, of the Link object are set to the parameter values passed in the setLink function call.
The following JavaScript code:
document.write( 'href = ' + myLink[0].href + ', text = ' + myLink[0].text );
would display the following:
Note, the first array object created had an index of zero.
The fifth part is self-explanatory:
//The following parameter 'n' controls the position within the tour var n=0;
There will be further JavaScript added to the tour.htm file, but this will be covered later in the tour.
The completed tour-n.htm file with JavaScript follows:
<html> <body> <center> <table height="100%"><tr><td>
The first addition is the inclusion of a call to a function openDoc() contained in the parent frame. When the Form is submitted using the Go button a reference to the Selection select1 within the Form form1 is passed as a parameter.
The second additon is the JavaScript to each of the input buttons onClick tag. The JavaScript invokes one of several functions in the parent frame followed by the setting of the selectedIndex of the Selection select1 within the Form form1 to the variable n in the parent frame.
The functions openDoc(), goFirst(), goBack(), goHome(), goNext() and goLast() will be covered later.
<form name="form1"
onSubmit="return parent.openDoc(document.form1.select1)">
<!-- This form uses JavaScript functions in the parent frame -->
<input type="button" value=" << "
onClick="parent.goFirst();
document.form1.select1.selectedIndex =
parent.n">
<input type="button" value=" < "
onClick="parent.goBack();
document.form1.select1.selectedIndex =
parent.n">
<input type="button" value=" ^ "
onClick="parent.goHome()">
<input type="button" value=" > "
onClick="parent.goForward();
document.form1.select1.selectedIndex =
parent.n">
<input type="button" value=" >> "
onClick="parent.goLast();
document.form1.select1.selectedIndex =
parent.n">The third addition is the creation of the Object items within the Selection select1 using a for loop to output an entry for each Link object within the myLink array. The href property of the Link objects is output as the value of each of the Options, and the text property as the visible Option text.
<select name="select1">
<script language="JavaScript"><!--
//This script outputs an Option for each 'Link' object
//contained in the 'myLink' array in the parent frame
for (var i=0; i < parent.item; i++)
document.write(
'<option value="' + parent.myLink[i].href +
'">' + parent.myLink[i].text +
'<\/option>'
);
//--></script>
</select>The final addition is the setting of the selectedIndex of the Selection select1 within the Form form1 to the variable n in the parent frame. This ensures the Selection select1 is correctly set each time the nav frame is loaded.
<input type="submit" value="Go"> </form> <script language="JavaScript"><!-- //This script sets the selected option document.form1.select1.selectedIndex = parent.n; //--></script> </td></tr></table> </center> </body> </html>
The use of the goFirst(), goBack(), goHome(), goForward() and goLast() functions within the tour-n.htm file will now be described. The following JavaScript is added to the tour.htm file, it defines the functions which amend the n variable which controls the position within the tour and changes the location of the workarea frame using the href propery of the appropriate myLink object.
//The following scripts are used by the form 'form1'
//within the frame 'nav'
function goFirst() {
if (n != 0) {
n = 0;
self.workarea.location.href =
myLink[n].href;
}
}
function goBack() {
if (n != 0) {
n--;
self.workarea.location.href =
myLink[n].href;
}
}
function goHome() {
location.href = 'index.htm';
}
function goForward() {
if (n != (item - 1)) {
n++;
self.workarea.location.href =
myLink[n].href;
}
}
function goLast() {
if (n != item -1) {
n = item - 1;
self.workarea.location.href =
myLink[n].href;
}
}The following JavaScript is also added to the tour.htm file. The function openDoc() is called from the tour-n.htm file when the form1 Forms onSubmit is invoked.
If you remember the call to openDoc() passes a reference to document.form1.select1, which is received as object. This is then used to access the index of the selected option and then its value, which is then used to set the variable n to the position within the tour and to change the location of the workarea frame.
// This script navigates to the location of an option
//without the need of a cgi script:
function openDoc (object) {
var string =
object.options[object.selectedIndex].value;
if (string != '' && n != object.selectedIndex) {
n = object.selectedIndex;
self.workarea.location.href = string;
}
return false;
}Although it has already been mentioned that no JavaScript is required within the files shown in the workarea, some enhancements can be made to increase the presentation of the tour, for example automatic headings and page numbers.
The final version of the sample tour1.htm file is given below. It includes JavaScript to invoke two functions header() and footer() contained in the parent document.
<html> <body> <script language = 'JavaScript'><!-- //This script outputs the heading controlled by the parent frame document.write(parent.header()); //--></script> <p> Use the navigational aids shown above to follow the Site sample tour. </p> <p> The tour will explain how you can create your own Array-Tours. </p> <script language="JavaScript"><!-- //This script outputs page numbers controlled by the parent frame document.write(parent.footer()); //--></script> </body> </html>
The JavaScript to support this addition to the sample tour1.htm file which is added to the tour-n.htm file is shown below.
The header() function returns a string made up of HTML instructions and the text property of the appropriate Link object within the myLink array.
The footer() function again returns a string made up of HTML instructions but this time the current position within the tour and the number of pages based the variable n and on the length of the myLink array.
//The following scripts output formatted text, as used
//within the child frames
function header() {
return '<h1>' +
myLink[n].text +
'</H1>';
}
function footer() {
return '<hr><center>Page ' +
(n + 1) + ' of ' + item +
'</center><br>';
}View the complete tour.htm, tour-n.htm and tour1.htm source code:
You can also try out the working example.