Interactive navigation

**Riseard** · 08-18-2005, 05:49 PM

Profs Twey and jscheuer1 helped me with a script to allow viewers to type in a page number and press 'go', in order to navigate through pages of a book (see Thread 'Interactive page navigation) 08-04-05, which works brilliantly.

The same script does not seem to work twice on the same page (with the scripts directed at different sets of files -- for that matter, it doesn't work directing them at the same set of files either); that is, the first version of the script works, the second doesn't.

Is there a way round this?

Riseard

**jscheuer1** · 08-20-2005, 09:43 AM

Code:

<script type="text/javascript">
function go(numPages, textId) {

  var page = parseInt(document.getElementById(textId).value);
  if((page !== page) || (page < 1) || (page > numPages)) {
    window.alert("Page does not exist.");
    document.getElementById(textId).value = "";
    document.getElementById(textId).focus();
  }
  else window.location = textId + page + ".htm";
}
</script>
<input type="text" size="3" id="page"/><button onclick="go(103, 'page');">Get Page</button><br>
<input type="text" size="3" id="footnote"/><button onclick="go(52, 'footnote');">Get Footnote</button>

The first input/button combo will navigate to page#.htm out of a collection of 103, assuming they exist, where '#' is the number entered in its textbox. The second combo will take you to footnote#.htm out of a collection of 52.

**Riseard** · 08-20-2005, 07:52 PM

Thanks, John.

Can the footnote#.htm open in a separate window?

Riseard

**jscheuer1** · 08-20-2005, 08:37 PM

Well yes but, we need to modify the script again. Before I get into that, I'd like to mention that this script can go in the head of the document or be converted to an external script and be linked to the head. The textbox/button combos can go anywhere in the body of the page and you can have as many as you need but no duplicates. That is because only one unique id is allowed and the id is, in this case, also the prefix to the page. So, let's rewrite the whole thing a bit more to allow for duplicate acting textbox/button combo's on the same page, as well as allow for optionally opening a new window:

Code:

<html>
<head>
<script type="text/javascript">
function go(numPages, textId, pagePrefix, targType) {

  var page = parseInt(document.getElementById(textId).value);
  if((page !== page) || (page < 1) || (page > numPages)) {
    window.alert("Page does not exist.");
    document.getElementById(textId).value = "";
    document.getElementById(textId).focus();
  }
  else if (targType&&targType=='new')
  window.open(pagePrefix + page + ".htm");
  else window.location = pagePrefix + page + ".htm";
}
</script>
</head>
<body>
<input type="text" size="3" id="text1"/><button onclick="go(103, 'text1', 'page');">Get Page</button><br>
<input type="text" size="3" id="text2"/><button onclick="go(52, 'text2', 'footnote', 'new');">Get Footnote</button><br>
<input type="text" size="3" id="text3"/><button onclick="go(103, 'text3', 'page');">Get Page</button>
</body>
</html>

**Riseard** · 08-21-2005, 06:55 AM

That's great, John; thanks.

I've put the script in the head. (What would be the advantage of having an external script?) I've restricted the size of the new window too, so it works well.

Riseard

**jscheuer1** · 08-21-2005, 12:54 PM

You can use any of the settings/parameters/techniques associated with the window.open() method you like. For instance, if you give the window a name, only one new window will open. As long as that new window is open, its contents will be replaced by subsequent requests for pages with targType 'new'. If it is closed and another request is made, a new one will open. Anyways, the advantages in making the script external are the usual ones, as are the disadvantages. It can be accessed by multiple pages with only one load into memory, editing it once will change it for all pages that use it, it can become a part of a larger external script containing functions and variables common to many pages. The disadvantages to externalizing a script - If it becomes a part of a common scripts external script and is not used by many pages, it can slow initial loads on the site to little end. It can conflict with other common script functions/variables. Specifying paths to files it accesses sometimes becomes trickier (using absolute paths can become necessary).

**Riseard** · 08-21-2005, 04:32 PM

Ok, that's clearer now; thanks.

As far as other features are concerned, there's one puzzle left, I think: When I call up a footnote#.htm file from the main page, then click on something else on the main page (bringing the main page to the fore), if I then call up another footnote#.htm file, the pop-up window is filled with the new footnote#.htm file text but stays behind the main window. Can it be brought to the fore when calling a footnote.htm file (I don't necessarily want it to remain on top all the time, just to come to the fore when called up), or is this one of the realities of parent-child window relationships?

Riseard

**jscheuer1** · 08-21-2005, 06:35 PM

You gave the window a name, didn't you? This is where the 'techniques' part comes in. Now, in order to return it to top (focus), you need to assign it a variable as well:

Code:

<script type="text/javascript">
function go(numPages, textId, pagePrefix, targType) {

  var page = parseInt(document.getElementById(textId).value);
  if((page !== page) || (page < 1) || (page > numPages)) {
    window.alert("Page does not exist.");
    document.getElementById(textId).value = "";
    document.getElementById(textId).focus();
  }
  else if (targType&&targType=='new'){
  var pageWin =  window.open(pagePrefix + page + ".htm", "someName");
  pageWin.focus()
  }
  else window.location = pagePrefix + page + ".htm";
}
</script>

**Riseard** · 08-22-2005, 03:43 AM

You've taught me a lot. Very much appreciated.
R.

Thread: Interactive navigation

Thread Tools

Search Thread

Interactive navigation

Bookmarks

Bookmarks

Posting Permissions