Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Target two pages from one link

Posted on 1999-07-28
18
Medium Priority
?
154 Views
Last Modified: 2010-05-18
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.
0
Comment
Question by:bigstar
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 3
  • +2
18 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 1852542
0
 
LVL 11

Expert Comment

by:mouatts
ID: 1852543
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
0
 

Author Comment

by:bigstar
ID: 1852544
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?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:bigstar
ID: 1852545
Steve - yes did consider reloading a new Framset each time, but this is a pretty tortuos route.
0
 

Author Comment

by:bigstar
ID: 1852546
Steve - yes did consider reloading a new Framset each time, but this is a pretty tortuos route.
0
 
LVL 3

Expert Comment

by:messentary
ID: 1852547
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)
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 1852548
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>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 1852549
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>
0
 
LVL 3

Expert Comment

by:y2kwacko
ID: 1852550
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
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 1852551
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>
0
 
LVL 3

Expert Comment

by:messentary
ID: 1852552
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
0
 

Author Comment

by:bigstar
ID: 1852553
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 ;-)
0
 
LVL 3

Expert Comment

by:messentary
ID: 1852554
haha
0
 
LVL 33

Accepted Solution

by:
knightEknight earned 280 total points
ID: 1852555
<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>

Per your questions:

1)  because older browsers recognize the onClick event, but not necessarily the javascript:  notation -- but they ignore this anyway because of the return(false).

2)  It's not required because you are embedding the code in the event hander (onClick) of the link -- but you could create a seperate function for this (as was previously pointed out) if you want to change 10 frames or something, just to make it cleaner.  In this case, you would need to surround your function in <SCRIPT> tags.

3) a little unclear what you mean, but yes, the back button with multiple frames sometimes does funny things.

Below is an example of how to do this using a function:

<HTML>
<HEAD>
<SCRIPT language='JavaScript'>
function loadmyframes( mainurl, secondurl )
{
   top.mainframename.location=mainurl;
   top.secondaryframename.location=secondurl;
   return(false);
}
</script>
</head>

<BODY>
<A href='javascript:;'  onClick='return(loadmyframes("main1.html","second1.html"));'>
<IMG name='link1'  src='link1.gif'  border='0'></a>
</body>
</html>

0
 

Author Comment

by:bigstar
ID: 1852556
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.
0
 
LVL 3

Expert Comment

by:y2kwacko
ID: 1852557
still want the sample?
0
 

Author Comment

by:bigstar
ID: 1852558
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
0
 
LVL 3

Expert Comment

by:y2kwacko
ID: 1852559
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


0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question