Link to home
Start Free TrialLog in
Avatar of bigstar
bigstar

asked on

Target two pages from one link

Please go to this URL:

http://www.tintrax.demon.co.uk/frameprob.htm

Here I've illustrated a Frames problem I have.

In short - Having got four seperate pages in the frameset, by clicking a link on the naviagation page, I want to be able to target two frames on the right hand side rather than the traditional one.

Can this be done in plain HTML or is JavaScript or VB script required?

Having a look at the illustration referenced above should make this question much simpler to understand.

Have also reproduced this question in Scripting areas at zero points in case this not seen.
Avatar of knightEknight
knightEknight
Flag of United States of America image

Avatar of mouatts
mouatts

No plain HTML can't do it as you cn only specify one frame on a target (unless you reload a frameset of course) so you must go down the javascript route as KEK has suggested.

Steve
Avatar of bigstar

ASKER

Yes thanks both. The other reference did give me some ideas, but I'm afraid I'm gonna have to ask you to spell it out for me. With JavaScript I tend not understand it enough to amend it successfully.

I know part of the code normally sits inside the <head> tag and some actually in the body of the HTML.

Perhaps if I explain further and give you precise file names you may be able to provide something that I can understand better:-

First off, my links on the naviagation page are graphics, not text and I can't use a drop down in this situation.

Secondly, my filenames are as follows:

PAGE                  TITLE
Frameset -             default.htm
Naviagation Page -      navigation.htm
Banner Page -            banner.htm
Secondary Banner -      sliver.htm
Main Window -            home.htm

All these files reside in root.

My images are called homebut.gif, clientbut.gif etc

And to restate in context, I require the sliver.htm and home.htm pages to change when the image link is clicked.

Sorry about this basic lack of knowledge - hope the above helps?
Avatar of bigstar

ASKER

Steve - yes did consider reloading a new Framset each time, but this is a pretty tortuos route.
Avatar of bigstar

ASKER

Steve - yes did consider reloading a new Framset each time, but this is a pretty tortuos route.
well, I'm wondering if you specified the target in the h ref, would it work?  I have never tried, nor can I try now, (as I am at work and on a mac :( )But if someone can check this:

<a href="banner.htm target="banner"><a href="mainpage.htm" target="main">Link here</a></a>

As I said, I'm not sure if this would work.  Never tried it and never seen it.  Of course, there could be a great reason why I've never seen it.(like, it doesn't work)
If you are using images in your links, then do this:

<A href='top.mainframename.location="main1.html";top.secondaryframename.location="second1.html";'><IMG name='link1' src='link1.gif' border='0'></a>
DOH -- that's not right, try this instead:

<A href='javascript:top.mainframename.location="main1.html";top.secondaryframename.location="second1.html";'>
<IMG name='link1'  src='link1.gif'  border='0'></a>
you would probably be best off making a function to do this, it will require a lot less typing as well as being easier

in middle of your head tags add this

<script language="javascript">
function DirectIt(htm1,htm2){
    <direction_to_frame>.location.href = htm1;
    <direction_to_second_frame>.location.href = htm2;
}
</script>

direction_to_frame would probably look like
parent.parent_of_second_window

then you would call it like this
<a href="javascript:void(null)" onmousedown="DirectIt('frame1.html','frame2.html');return true">click here</a>

if you do not understand this i can make you a small sample so you can see it and understand it either way good luck
Per my previous comment, this one will be more compatible with earlier browsers as well:

<A href='javascript:;'
  onClick='top.mainframename.location="main1.html";top.secondaryframename.location="second1.html";return(false);'>
<IMG name='link1'  src='link1.gif'  border='0'></a>
well, I'm home now and back on my beloved PC.  I tried the code I put in, and of course, it doesn't work.  (did anyone besides me really think it would?)  So it seems that JavaScript is needed.  And knight looks like the one with the brains here.

Mess
Avatar of bigstar

ASKER

Knight - your solution works - many thanks.

Just a few questions:

1. Why is your last example Old Browser friendly (I'm unable to test this claim)?
2. Why isn't a <SCRIPT> tag required in the head of the HTML document?
3. The solution doesn't work when you use the Browser's back button, you can see the joins - but I suppose I'll just have to live with that!

y2wacko - Yes I would appreciate an example of you alternative solution if possible?

messentary - Must admit with so may solutions, I didn't try yours - I was a little sceptical - thanks anyway - you've proved a point - it doesn't work ;-)
ASKER CERTIFIED SOLUTION
Avatar of knightEknight
knightEknight
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of bigstar

ASKER

Knight - yes the function does make it cleaner - I have about eight links that need this treatment.

Yes I didn't make my third point very clear: when you click the back or forward button in the browser, each link appears consecutively not simultaneously, unlike the the JavaScript solution, but I guess that's to be expected?

Anyway, you gave me the desired results, I'm very pleased, so many thanks again.
still want the sample?
Avatar of bigstar

ASKER

Y2KWacko - If you don't mind, just because your is an alternative solution - but of course there are no points in it - I'll leave it to you.

Cheers
Sorry it took me a while to get back to you, Life has just been a little hectic. In this example I will give you html code for a couple of pages. If you have trouble understanding this algo feel free to ask for clarifications

In index.html I had

--------------------start copy------------------

<FRAMESET COLS="35%,65%">
<FRAME  SRC="navleft.html" NAME="nav_left" MARGINWIDTH=3 MARGINHEIGHT=3>
<FRAMESET ROWS="16%,14%,70%">
<FRAME  SRC="banner1.html" NAME="banner_1" MARGINWIDTH=3 MARGINHEIGHT=3>
<FRAME  SRC="banner2.html" NAME="banner_2" MARGINWIDTH=3 MARGINHEIGHT=3>
<FRAME  SRC="main.html" NAME="right_main" MARGINWIDTH=3 MARGINHEIGHT=3>
</FRAMESET>
</FRAMESET>

---------------------end copy-----------------------

I then created a file named test.html, I did not create the banner1.html, banner2.html or main.html as those where not needed for the sample. I did create test.html as this would show me whether it worked correctly. In test.html you can put anything you want.

I then created navleft.html with this code

-------------------start copy-------------------------

<HTML>
      <HEAD>
            <TITLE>Target 2 url's from one link</TITLE>
      
      <SCRIPT LANGUAGE="javascript">
      function DirectIt(url1,url2){
            parent.parent.parent.banner_2.location.href = url1;
            parent.parent.parent.right_main.location.href = url2;
      }
      </SCRIPT>
      </HEAD>
      
      <BODY>
      
      <a href="javascript:DirectIt('test.html','test.html')">this is a test</a>      
</BODY>
</HTML>

---------------------end copy------------------

once again feel free to ask if you have any questions. although this is not the cleanest way to create this function it does work. If anyone has the time to clean up the code feel free

Good Luck,
Kevin