Google Answers Logo
View Question
 
Q: Forward-Back menu in frames using JavaScript from available list of pages ( Answered 5 out of 5 stars,   1 Comment )
Question  
Subject: Forward-Back menu in frames using JavaScript from available list of pages
Category: Computers > Programming
Asked by: asm_internet-ga
List Price: $20.00		 Posted: 19 Oct 2004 10:31 PDT
Expires: 18 Nov 2004 09:31 PST
Question ID: 417037 
I would like to get the following script finished:
1. Bottom frame has back-forward menu which detects
the existing page in another frame (main)
2. "Forward" graphic button advances that page (main) to the next page in the list
3. "Back" graphic button brings the page back to the previous page in
the list (array)
4. When the menu reaches (starts at) the beginning, the "Back button" is hidden
5. When the last page is reached, the Forward button can have a custom
link like this:
<a target="_new" href="../launch.html"
onClick="javascript:parent.window.close();"><IMG SRC="images/next.gif"
WIDTH="120" HEIGHT="44" BORDER="0"></a>


Oh yes, and I need it ASAP!!

Here is the existing script (feel free to write your own from scratch):

<script language="JavaScript">
<!--
function getpagenumber() {
// #### this part doesn't work for me
    var otherpage = parent.main.location.href;
    var pagenumber = otherpage.substring(otherpage.length-3,otherpage.length);
    return pagenumber - 0;
}

function goForward() {
// ## you will see there is no list or array - but I will need one 
// ## - unless you have another solution
    var page = getpagenumber();
    if (page < 100)
        parent.main.location.href = 'bg' + pad(page + 1,3) + '.html';
}
function goBackward() {
    var page = getpagenumber();
    if (page > 1) 
        parent.main.location.href = 'bg' + pad(page - 1,3) + '.html';
}
function pad(number,length) {
    var str = '' + number;
    while (str.length < length)
        str = '0' + str;
    return str;
}
//--></script>


THE PART THAT GOES IN THE BOTTOM-NAV PAGE:
not done yet
Answer  
Subject: Re: Forward-Back menu in frames using JavaScript from available list of pages
Answered By: passive-ga on 19 Oct 2004 12:37 PDT
Rated:5 out of 5 stars		  
Hi there,

Here's what I did.
I used buttons for the forward and back, and a fair amount of files.
It should fulfill your needs quite nicely, the only part it doesn't
implement is having the forward button launch a new window at the end.
But that's just because I didn't have time, and I would be happy to
add that in a clarification.

To see it in action, go to:
http://www.unified-designs.com/answers/

I'll copy and paste the files individually here:
All files are in the same directory.

--nav.js--
var pages = Array("one.html", "two.html", "3.html", "4four.html");
var top_frame = "top"
function arrayIndex(array, key){
   for (i = 0; i < array.length; i++){
      if(array[i] == key){
         return i;
      }
   }
   return false
}

function getPage(target){
   path = parent.frames[target].location.pathname;
   file = path.substr(path.lastIndexOf("/")+1);
   return file
}
function goForward(target, cur_index){
   next_index = cur_index + 1;
   if (pages.length > next_index){
      parent.frames[target].location = pages[next_index];
   }
   return next_index;
}
function goBackward(target, cur_index){
   next_index = cur_index - 1;
   if (next_index >= 0){
      parent.frames[target].location = pages[next_index];
   }
   return next_index;
}
function nav(direction){
   cur_index = arrayIndex(pages, getPage(top_frame));
   if (direction == "forward"){
      new_index = goForward(top_frame, cur_index);
   }
   else if (direction == "backward"){
      new_index = goBackward(top_frame, cur_index);
   }
   maintain(new_index)
}
function maintain(cur_index){
   back_button = parent.bottom.document.getElementById("backward");
   next_button = parent.bottom.document.getElementById("forward");
   back_button.style.display = "inline";
   next_button.style.display = "inline";
   if (cur_index == 0){
      back_button.style.display = "none";
   }
}
maintain(0);

--index.html--
<html>
 <head>
 </head>
 <frameset rows="80%, 20%">
  <frame name="top" src="one.html" />
  <frame name="bottom" src="bottom.html" />
 </frameset>
<!-- Frame Set -->
</html>

--bottom.html--
<html>
   <head>
   </head>
<body>This is the bottom<br />
<input id="backward" type="button" value="Back"
onClick="javascript:nav('backward');"/>
<input id="forward" type="button" value="Forward"
onclick="javascript:nav('forward');"/>
<script language="javascript" src="nav.js"></script>
</body>
</html>

--one.html--
<html>
    <body>one.html</body>
</html>

--two.html--
<html>
    <body>two.html</body>
</html>

--3.html--
<html>
    <body>3.html</body>
</html>

--4four.html--
<html>
    <body>4four.html</body>
</html>



I hope this formats properly.
Let me know if there's any help you need with this. I think it is
pretty clear, but it was written in a hurry, so let me know if I need
to clarify anything.

Passive
Request for Answer Clarification by asm_internet-ga on 19 Oct 2004 17:46 PDT 
Hi Passive,
I'm sure this will work perfectly, but I think there is a bug in this version.

When I viewed the online example, I got from Page 1 to Page 2 by
pressing Foreward. But, when I got to page 2, the bottom menu
disappeared.

In a clarification, can you also add the last part?

Thanks,

Chria
Clarification of Answer by passive-ga on 19 Oct 2004 22:12 PDT 
Hello again,

I assume you are using IE, which I can't test with at the moment, but
I've made a couple changes that will hopefully solve the problem.
Also, as it is right now, the code could probably be consolidated significantly.
There are only two changed files.

--nav.js--
var pages = Array("one.html", "two.html", "3.html", "4four.html");
var top_frame = "top"
function arrayIndex(array, key){
   for (i = 0; i < array.length; i++){
      if(array[i] == key){
         return i;
      }
   }
   return false
}

function getPage(target){
   path = parent.frames[target].location.pathname;
   file = path.substr(path.lastIndexOf("/")+1);
   return file
}
function goForward(target, cur_index){
   next_index = cur_index + 1;
   if (pages.length > next_index){
      parent.frames[target].location.replace(pages[next_index]);
   }
   return next_index;
}
function goBackward(target, cur_index){
   next_index = cur_index - 1;
   if (next_index >= 0){
      parent.frames[target].location.replace(pages[next_index]);
   }
   return next_index;
}
function nav(direction){
   cur_index = arrayIndex(pages, getPage(top_frame));
   if (direction == "forward"){
      new_index = goForward(top_frame, cur_index);
   }
   else if (direction == "backward"){
      new_index = goBackward(top_frame, cur_index);
   }
   maintain(new_index)
}
function finish(){
   window.open("launch.html");
   parent.window.close();
}
function next(e){
   nav("forward");
}
function prev(e){
   nav("backward");
}
function maintain(cur_index){
   back_button = parent.bottom.document.getElementById("backward");
   next_button = parent.bottom.document.getElementById("forward");
   init();
   if (cur_index == 0){
      back_button.style.display = "none";
   }
   else if (cur_index == (pages.length-1)){
      next_button.value = "Finish";
      next_button.onmouseup = finish;
   }
}
function init(){
   back_button = parent.bottom.document.getElementById("backward");
   next_button = parent.bottom.document.getElementById("forward");
   
   back_button.style.display = "inline";
   back_button.value = "Back";
   back_button.onmouseup = prev;
   
   next_button.style.display = "inline";
   next_button.value = "Forward";   
   next_button.onmouseup = next;
}
maintain(0);

--bottom.html--
<html>
   <head>
   </head>
<body>This is the bottom<br />
<input id="backward" type="button" value="Back" />
<input id="forward" type="button" value="Forward" />
<script language="javascript" src="nav.js"></script>
</body>
</html>


Also, I updated the demo, so you can check it and let me know if it's
still problematic.

Take care,

Passive
Request for Answer Clarification by asm_internet-ga on 19 Oct 2004 22:48 PDT 
hi Passive,
Much better. The finish button works - thank you.

One item:
When I am on the first page in the array, the "Back" button is no longer hidden.

Here is where I have it:
http://www.cfdlearn.ca/courses/seb/

Please view it in IE, since that is what the client will use :)

Thanks Passive,
Chris
Clarification of Answer by passive-ga on 21 Oct 2004 06:50 PDT 
Hi there,

I figured out what the problem was.
IE uses "top" as a reserved frame name for the uppermost frame. I
changed it to top_frame, and it seems to be working fine, in IE,
Opera, Konqueror and Firefox.
Here's the changed code:

--nav.js--
var pages = Array("one.html", "two.html", "3.html", "4four.html");
var top_frame = parent.top_frame;
function arrayIndex(array, key){
   for (i = 0; i < array.length; i++){
      if(array[i] == key){
         return i;
      }
   }
   return false
}

function getPage(target){
   path = target.location.href;
   file = path.substr(path.lastIndexOf("/")+1);
   return file
}
function goForward(target, cur_index){
   next_index = cur_index + 1;
   if (pages.length > next_index){
      target.location.href = pages[next_index];
   }
   return next_index;
}
function goBackward(target, cur_index){
   next_index = cur_index - 1;
   if (next_index >= 0){
      target.location.href = pages[next_index];
   }
   return next_index;
}
function nav(direction){
   cur_index = arrayIndex(pages, getPage(top_frame));
   if (direction == "forward"){
      new_index = goForward(top_frame, cur_index);
   }
   else if (direction == "backward"){
      new_index = goBackward(top_frame, cur_index);
   }
   maintain(new_index)
}
function finish(){
   window.open("launch.html");
   parent.window.close();
}
function next(e){
   nav("forward");
}
function prev(e){
   nav("backward");
}
function maintain(cur_index){
   back_button = parent.bottom_frame.document.getElementById("backward");
   next_button = parent.bottom_frame.document.getElementById("forward");
   init();
   if (cur_index == 0){
      back_button.style.display = "none";
   }
   else if (cur_index == (pages.length-1)){
      next_button.value = "Finish";
      next_button.onmouseup = finish;
   }
}
function init(){
   back_button = parent.bottom_frame.document.getElementById("backward");
   next_button = parent.bottom_frame.document.getElementById("forward");
   
   back_button.style.display = "inline";
   back_button.value = "Back";
   back_button.onmouseup = prev;
   
   next_button.style.display = "inline";
   next_button.value = "Forward";   
   next_button.onmouseup = next;
}
maintain(0);

--index.html--
<html>
 <head>
 </head>
 <frameset rows="80%, 20%">
  <frame name="top_frame" src="one.html" />
  <frame name="bottom_frame" src="bottom.html" />
 </frameset>
<!-- Frame Set -->
</html>



Hope this finishes it for you. One thing you might want to note, is
that if you want people to be unable to use their browsers "back"
button, you can use:
location.replace(url)
in place of:
location.href = url

Hope this has been useful to you,

Passive
asm_internet-ga rated this answer:5 out of 5 stars 
When he finishes - this will be a five star. He understood the
question, gave me a demo, a did it quick!! Excellent

Comments  
Subject: Re: Forward-Back menu in frames using JavaScript from available list of pages
From: austral-ga on 26 Oct 2004 23:07 PDT		  
Hi there,

I've tried locally to use your code and got a javascript error. I'm
using framesets as follow:

<frameset rows="80,*" frameborder="NO" border="0" framespacing="0">
  <frame src="header.htm" name="topFrame" scrolling="NO" noresize >
  <frameset rows="*" cols="105,*" framespacing="0" frameborder="NO" border="0">
    <frame src="leftNav.htm" name="leftFrame" scrolling="NO" noresize>
    <frameset rows="*,36" cols="*" framespacing="0" frameborder="NO" border="0">
      <frame src="Content55.html" name="mainFrame">
      <frame src="bottomNav.htm" name="bottomFrame" scrolling="NO" noresize>
    </frameset>
  </frameset>
</frameset>
<noframes>

In my nav.js file I've got the following code:
var pages = Array("Content55.html","Content56.html","Content33.html","Content35.html","Content36.html","Content37.html","Content38.html","Content58.html","Content39.html","Content40.html","Content41.html","Content42.html","Content43.html","Content59.html","Content44.html","Content34.html","Content45.html","Content46.html","Content47.html","Content48.html","Content49.html","Content60.html","Content
50.html","Content60.html","Content61.html","Content62.html","Content51.html","Content52.html","Content1.html","Content2.html","Content3.html","Content63.html","Content4.html","Content5.html","Content6.html","Content64.html","Content7.html","Content8.html","Content65.html","Content9.html","Content10.html","Content11.html","Content12.html","Content66.html","Content13.html","Content67.html","Content6
8.html","Content14.html","Content54.html","Content57.html","Content53.html");
var mainFrame = "mainFrame";
function arrayIndex(array, key){
   for (i = 0; i < array.length; i++){
      if(array[i] == key){
         return i;
      }
   }
   return false
}

function getPage(target){
   path = parent.frames[target].location.pathname;
   file = path.substr(path.lastIndexOf("/")+1);
   return file
}
function goForward(target, cur_index){
   next_index = cur_index + 1;
   if (pages.length > next_index){
      parent.frames[target].location.replace(pages[next_index]);
   }
   return next_index;
}
function goBackward(target, cur_index){
   next_index = cur_index - 1;
   if (next_index >= 0){
      parent.frames[target].location.replace(pages[next_index]);
   }
   return next_index;
}
function nav(direction){
   cur_index = arrayIndex(pages, getPage(mainFrame));
   if (direction == "forward"){
      new_index = goForward(mainFrame, cur_index);
   }
   else if (direction == "backward"){
      new_index = goBackward(mainFrame, cur_index);
   }
   maintain(new_index)
}
function finish(){
   window.open("Content55.html");
   parent.window.close();
}
function next(e){
   nav("forward");
}
function prev(e){
   nav("backward");
}
function maintain(cur_index){
   back_button = parent.bottomFrame.document.getElementById("backward");
   next_button = parent.bottomFrame.document.getElementById("forward");
   init();
   if (cur_index == 0){
      back_button.style.display = "none";
   }
   else if (cur_index == (pages.length-1)){
      next_button.value = "Finish";
      next_button.onmouseup = finish;
   }
}
function init(){
   back_button = parent.bottomFrame.document.getElementById("backward");
   next_button = parent.bottomFrame.document.getElementById("forward");
   
   back_button.style.display = "inline";
   back_button.value = "Back";
   back_button.onmouseup = prev;
   
   next_button.style.display = "inline";
   next_button.value = "Forward";   
   next_button.onmouseup = next;
}
maintain(0);

On the bottom navigation frame I've got this following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT language="javascript" src="nav.js" type="text/javascript"></SCRIPT>
<link href="images/35normal.css" rel="stylesheet" type="text/css">
<link href="Common/new_style.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="right"> 
  <form method="" action="">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr> 
        <td style="border-top: solid 2px #7392B5;"><INPUT
id="backward" onclick="javascript:nav('backward')" type="image"
src="images/tcisample_20.gif" value="Back">
        </td>
        <td style="border-top: solid 2px #7392B5;">&nbsp;</td>
        <td style="border-top: solid 2px #7392B5;"> <div align="right"> 
            <INPUT id="forward" onclick="javascript:nav('forward')"
type="image" src="images/tcisample_24.gif" value="Forward">
          </div></td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>

Somehow, when I test it, it doesn't work properly, each time that I
click on the next button it keeps getting back to the second page,
which is Content56.html but never wants to move forward. When testing
the page, I've got that javascript error on line 68 Char 4 and the
Error is: object required. As my bottom navigation page doesn't have
68 lines of code, I've assumed that the problem resides on the nav.js
file, but I can't figure out where is the error and can't get it
working.

Can anyone help me ASAP?

Thanks
Australia
Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy