Jump to content

By clicking, loading 2 different docs in 2 different frames


Recommended Posts

Hello all.

I have a question that some alredy asked similar but couldn't figure it out or it didn't worked.

Please refer to the picture I attached.

When I click on "Click Here", I want 2 different htm pages to load into 2 different frames. That is for example doc1.htm loads to Frame: content and doc2.htm loads to frame: menu2. How do you do that? I am using dreamweaver software but I am not a programmer. I have seen some examples found on the net, but they didnt worked, or at least I am doing something very wrong (as a basic user).

Thank you in advance any help. If possible by giving examples I would really appreciate it.

Cyrolab

click question.png

I try to explain with another attached image. Many yrs ago I made a website with flash but as flash can't be used I am stucked with this problem. I try to be short.

As you see on the image, top left is the main menu that stays always there. When I click on Discography a secondary menu opens to the bottom left while another html file to the main content that guides a bit what the visitor can do at this part of the site.

I hope I was a bit clear and the image is not too dizzy :).

Thx for asking.

click question 2.png

Normally you solve this problem by not using frames. Is that an option? How much work are you willing to put into this?

The alternative is Javascript: make your link open one of the pages (I suggest the content page) normally, then use Javascript to "open" the discography page in the other frame as well.

Well, I am not talented in Javascript and realised I can't do this in an HTML making software like Dreamweaver that I like a lot. Actually there is the possibility to do Javascript in Dreamweaver but I can't porgram it. I saw an example somewhere here in one of the forums but can't figure it out:

<a id='threelinks' href='#'>Open three tabs</a>

then use jQuery (or Javascript )

$("a#threelinks").on('click', function() {        

window.open('page1.php', 'first page');      

window.open('page2.php', 'secondpage');      

window.open('page3.php', 'third page');      

return false;   });

 

Here, I don't understand what eg. 'page1.php' means either 'first page'. I guess, page1.php could mean the html page that I want to load but that php disturbes me. And 'first page' would mean the target? I am pretty sure that I am totally wrong. I am sorry that I am this silly.

To answer your question, Javascript would suit me the best.

It'll be fine if you do this in a way that isn't perfect. Namely, by not using jQuery and instead using inline Javascript events.

First, take your link, make it open the content page in the frame if it doesn't already, and then add an onclick that calls a Javascript function. It should look something like this:

<a target="content" href="doc1.htm" onclick="andAlsoDoc2();">

Inside the menu page (not doc1 or doc2) add the Javascript for that function. Its code goes like

<script>
  function andAlsoDoc2() {
    window.parent.frames["menu2"].location.assign("doc2.htm");
  }
</script>

That looks in the parent window (which is the one with the frames), finds the frame named "menu2", and makes it navigate to doc2.htm.

Notice that the function does not "return false": doing so would prevent the original action (ie. browsing to doc1) from happening, and you do want it to happen.

<!DOCTYPE html>
<html>
<head>
	<title>Two Frames Example</title>
	<script>
		function loadFrames() {
			document.getElementById("frame1").src = "page1.html";
			document.getElementById("frame2").src = "page2.html";
		}
	</script>
</head>
<body>
	<a href="#" onclick="loadFrames()">Click Here for Page 1 and Page 2</a>
	<br><br>
	<iframe id="frame1"></iframe>
	<iframe id="frame2"></iframe>
</body>
</html>

 

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.