asked on

One html page (page 1) with links and no frames to one html page with frames (page 2) - target of body (page 2) depending on link selected on Page 1 (using HTML and Javascript only)

I have an HTML page with a bunch of links on it. Depening on the link clicked on in page 1, it has to navigate to a frames page. My problem is that depending on the link clicked on on the first page, I have to set the URL for the body frame on the next page (frames page). I don't want to create a frames page for each of the links, as this would result in about 49 pages! Also, and here's the problem, I can only use HTML and Javascript... No ASP or PHP etc... ONLY HTML and JScript!

What I did up to now was to do the following:
On page one the <a> tags' hrefs are set as follows "framespage.htm?Name=page1", "framespage.htm?Name=page2", "framespage.htm?Name=page3" etc...
Then, on the frames page, I've got Javascript that can get the Name variable from the query string (see below function PageName), but I have no idea how to use this to set the body frame's src. I know the function works, but I have no idea where to call it etc...

Here follows the Frames Page code:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <script language='javascript'>
            function PageName()
            {
                  var query = unescape(window.location.search.substring("?"));
                  var LoadName = request(query,"name") + '.htm'
                  return LoadName;
             }

            function request(query,name)
            {
                  var x = query.indexOf(name)+name.length+1;
                  if(x!=-1)
                  {
                        var y = query.indexOf("&",x);
                        if (y==-1)y=query.length;
                        return query.substring(x,y);
                  }
            }


      </script>

</head>
<frameset rows="*" cols="152,*" frameborder="NO" border="0" framespacing="0">
<frame src="left.htm" name="left" scrolling="NO" noresize id="left">
<frameset rows="36,*,43" cols="*" framespacing="0" frameborder="NO" border="0">
<frame src="top.htm" name="top" scrolling="no" id="top">
      <frame src="" name="body" noresize id="body">
<frame src="bottom.htm" name="bottom" scrolling="no" id="bottom">
</frameset>
</frameset>
<noframes><body>

</body></noframes>
</html>

Am I on the right track at all?????

Thanx!

imnajam

Hi KlockWurk,

you may try to put the script in TOP.HTM file and than at the end of function you can change the content of the frame by "this.document.bottom.location=<ur URL here>"

Cheers!

KlockWurk

ASKER

Yello imnajam

I did think of somthing like this, but how do I pass the query string variable to the TOP.htm page?

Thanks for the reply!

ASKER CERTIFIED SOLUTION

imnajam

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

KlockWurk

ASKER

You are a star! OK, with all the above I made a work around:
For reference here is what I did:

I changed the frames page as follows:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<form name="fmHidden">
      <input type="hidden" name="hidName" ID="hidName" value="">
</form>

<script language='javascript'>
      var query = unescape(window.location.search.substring("?"));
      var LoadName = request(query,"name") + '.htm'
      document.fmHidden.hidName.value = LoadName;

      function request(query,name)
      {
            var x = query.indexOf(name)+name.length+1;
            if(x!=-1)
            {
                  var y = query.indexOf("&",x);
                  if (y==-1)y=query.length;
                  return query.substring(x,y);
            }
      }

</script>

<frameset rows="*" cols="152,*" frameborder="NO" border="0" framespacing="0">
<frame src="menu.htm" name="left" scrolling="NO" noresize id="left">
<frameset rows="36,*,43" cols="*" framespacing="0" frameborder="NO" border="0">
<frame src="top.htm" name="top" scrolling="no" id="top">
      <frame src="" name="body" noresize id="body">
<frame src="bottom.htm" name="bottom" scrolling="no" id="bottom">
</frameset>
</frameset>
<noframes><body>

</body></noframes>

</html>

OK, then I added the following to the top.htm

function OpenCorrectPage()
{
      var OpenPage = parent.fmHidden.hidName.value;
      parent.body.location=OpenPage;
}

Also, in the BODY tag now looks as follows:
<body leftmargin="0" topmargin="0" onload="OpenCorrectPage();">

So here's what happens:
On the first page you click on a link and it opens the frames page with the URL:
frame.htm?name=page1 or frame.htm?name=page2 or frame.htm?name=page3 etc

On the frames page, the query string's value is placed into a hidden variable (hope that brigmar doesn't mind, I used his name fmHidden for my form - I liked it :P )
The frames then load the top page, the menu and the bottom. When the Top loads it picks up the value set in the frames page in the hidden variable and then sets the body part of the frames to what ever is stored in the variable. Cool!!!! Now who would have thought HTML and Java could be so clever! When this site is live, I'll post the URL where it is used.

Thanks for being my guide through these dark and troublesome times...

KlockWurk

ASKER

Don't spend all the points in one place, you hear!

imnajam

thank for the grade and point but I don't understand what do you mean to say by "Don't spend all the points in one place, you hear!"

btw, congrats(Y)

KlockWurk

ASKER

When you were little, when someone gave you some money, they would say, "don't spend it all in one place"... ;)

Have a great day!

KlockWurk

ASKER

Ooooh, btw, if anyone uses the above, please let me know what you think about the solution, or if you find a better way to do it, also just drop a post here.

Thanks!
KlockWurk

imnajam

umm okay,
all the best for your project/site