Taking a JavaScript Approach

The template expression technique described in the previous section works well for sequentially numbered files. Life isn't always that tidy, however. Frequently, a sequence is composed of a series of static files with disparate names , such as beads.htm, necklaces.htm, earrings.htm, and so on. In situations such as these, JavaScript provides the needed functionality and flexibility.

The technique described in this section relies on three core JavaScript abilities : arrays, string manipulation, and browser control. Here's how it works:

An array is created that contains the filenames in the series in the desired order.
JavaScript functions are added to the Previous and Next links that trigger the process.
A JavaScript function retrieves the path to the current file and extracts the filename.
The filename is compared to elements of the array and, when a match is found, its location in the arrayand thus, the sequence is recorded.
The browser loads a new file which, depending on the link selected, is either the next or the previous filename in the sequence.

To keep it easy to update, two basic files are needed: a JavaScript include and a Dreamweaver template for basic page presentation and to call the JavaScript (see Bonus Listing 6-A, shown on the book's web site).

NOTE

To view the completed code, see Listing 6-1 at the end of this section.

Creating the Array

Much of the flexibility of this technique comes from the array element. Because the arrayand all of the other JavaScript codeis maintained in an external JavaScript file, modifications have to be made in only one file to alter the entire sequence. New files are easily added into the array and just as easily removed or rearranged.

There's only one small condition for coding this segment of the technique: The array should be entered in the root of the JavaScript file so that it is available globally. A typical array might look like this:

 var fileNameArr = new  Array("beads.htm","necklaces.htm","earrings.htm","brooches.htm");

One more global variable is needed to hold the pathname; in this example code, that variable is named thePath .

TIP

With larger sites or multiple sequential navigation series, you'll probably want to find some way to automate the creation of the array to avoid both typographical errors and extreme tedium. I've created such a tool for use with Deva Tools: the JavaScript Navigation Array Builder. This tool is available both on the book's web site and at www.devahelp.com.

Adding Function Calls

Next we add a function call to both the Previous and Next links contained in the template file. In this example, the function is named goPage() , and it takes a single argument: direction . For Next links, the direction value is forward ; for Previous links, the direction value is back . Here is some sample code for a pair of text links:

 <a href="javascript:;" onClick="goPage('back');">Previous</a>  <a href="javascript:;" onClick="goPage('forward');">Next</a>

Naturally, you can enter this code by hand through Code view. For brief edits like this, I am quite fond of using the Quick Tag Editor. Here's how you would enter the same code in the Design view:

TIP

Alternatively, we could write this code without the onClick event, like this:

 <a href="javascript:  goPage('back');"  >Previous</a>

I prefer to use the onClick event for clarity and in case I want to use additional events, such as onMouseOver or onMouseOut .

Select the text or image serving as your Next link.
In the Property inspector, enter javascript:; in the Link field to create a link.
Choose the <a> tag from the Tag Selector.
Select the Quick Tag Editor button from the Property inspector or use the keyboard shortcut Ctrl+T (Command-T).

The Quick Tag Editor displays the code snippet for the <a> tag in Edit Tag mode, as shown in Figure 6.4.

Figure 6.4. The Quick Tag Editor toggles through three modes: Edit Tag, Insert HTML, and Wrap Tag.
Tab to the end of the tag and enter the following code:
```
 onClick="goPage('forward');" 
```
Press Enter (Return) to close the Quick Tag Editor.
Repeat these steps for the Previous link.

As in the template expressions method, it's best to place your links in a locked region of the template. With these types of automatic links, the navigation code probably won't need to be edited.

Getting the Filename

Getting the filename in a JavaScript function is really a two-part process. First, the document.URL property is used to get the full path to the current file, like this:

 var theFile = document.URL

The variable, theFile , would contain something like this:

http://www.aresrare.com/specialorder/beads.htm

Only the filename is needed. The second part of the process is to extract the filename from the path. To accomplish this, you use the standard substring() function in conjunction with the lastIndexOf() property:

 theFile = theFile.substring(theFile.lastIndexOf('/')+1);

These two code lines are the first entries in the function used ultimately to find a match between the filename and an item in the array. In the example code, the function is called findIndex() .

Comparing the Filename to the Array

With the filename identified, a matching entry in the array is ready to be found. After it's discovered , the entry's location in the array is returned to the calling functionwhere it will be used to calculate the next or previous item in the array.

Here is the filename-array matching code, in bold, placed in the context of the containing function:

 function findIndex() {     var theFile = document.URL     theFile = theFile.substring(theFile.lastIndexOf('/')+1);  for (i=0; i < fileNameArr.length; ++i) {   if (fileNameArr[i] == theFile) {   return i;   }   }  return "noMatch";  }

This function is set up to return the matching array item index number (the variable i ) if a match is found. If not, noMatch is returned instead to allow for error checking in the calling function. This is covered next in the final step.

Opening the Requested Page

Remember the goPage() function called from the Next and Previous links? It's time to bring in that function and finish off this technique. When goPage() is initially called, it calls the findIndex() function which, as noted in the previous step, compares the current filename to the array items and returns its location in the array. The location is stored in a variable called theIndex :

 var theIndex = findIndex();

If no match is found, theIndex variable contains noMatch ; an error message is displayed:

 alert("No matching item in array. Check filename.");

Obviously, this is the bare minimum of what could or should be done if an error is encountered . Another tactic would be to redirect the user to another page on the site with more information and a request to email the webmaster concerning the problem. Here's one way to send a user to another page:

 window.location = "/help/nomatch.htm";

If no error is encountered, the argument passed by the links when calling goPage() is inspected. If the argument, theDirection , is equal to "forward" , then theIndex variable is incremented; otherwise , theDirection is implicitly "back" and theIndex is decremented.

 if (theDirection == "forward") {     theIndex = parseInt(theIndex) + 1  } else {   //go backwards     theIndex = parseInt(theIndex)  1  }

After the desired index is established, the filename corresponding to that index is extracted and set to another variable, thePath :

 thePath = fileNameArr[theIndex];

The final stepof the goPage() function as well as of the entire process is to load the new file into the browser. This transition is handled with the window.location object, like this:

 window.location = thePath;

In this routine, the window.location transition is enclosed by a setTimeout() function. The setTimeout() function delays execution of the enclosed argument by a specified number of milliseconds ; a value of 1,000 equals 1 second. The setTimeout() function is a necessary wrapper for window.location to function properlyeven if the delay is only 1/10th of one second.

Here's the entire goPage() function so that you can see how it all fits together:

 function goPage(theDirection) {     if (theIndex == "noMatch") {        alert("No matching item in array. Check filename.");     } else {        if (theDirection == "forward") {           theIndex = parseInt(theIndex) + 1;        } else {   //go backwards           theIndex = parseInt(theIndex)  1;        }     }     thePath = fileNameArr[theIndex];     setTimeout("window.location = thePath;",100);  }

Listing 6-1 JavaScript Navigation Functions (06_jvsnav.js)

 // JavaScript Document  var fileNameArr = new  Array("beads.htm","bracelets.htm","various.htm","brooches.htm",  "earrings.htm");  var thePath, thePathForward, thePathBack;  function findIndex() {     var theFile = document.URL     thePath = theFile.substring(0,theFile.lastIndexOf('/')+1);     theFile = theFile.substring(theFile.lastIndexOf('/')+1);     for (i=0; i < fileNameArr.length; ++i) {        if (fileNameArr[i] == theFile) {           return i;        }     }     return "noMatch";  }  function goPage(theDirection) {     var theIndex = findIndex();     if (theIndex == "noMatch") {        alert("No matching item in array. Check filename.");     } else {        if (theDirection == "forward") {           theIndex = parseInt(theIndex) + 1        } else {//go backwards           theIndex = parseInt(theIndex) - 1        }     }     thePath = fileNameArr[theIndex];     setTimeout("window.location = thePath;", 100);  }