Changing Two Frames At Once

non-frames link to top of chapter

Changing Two Frames With One Click

This is one of those mysteries you would have thought the HTML Writers Of The World would have solved before releasing the version with the frames in. It seems so logical. You want to click a table of contents sidebar and get both a main document and something footnotish to pop up. Or you want to click on a title and have the document come up in two languages. Useful, eh? But nooooooo.

Are you familiar already with frame-related tags? Good. Then before I do anything else, I should tell you that the following two tricks DON'T WORK.

   <a href="doc1.html" target="frame1">
   <a href="doc2.html" target="frame2">
      click
   </a>
   </a>

   <a href="doc1.html" target="frame1"
      href="doc2.html" target="frame2">
      click
   </a>

Apparently, the browser just decides to ignore one "href" in favor of the other. There are only two ways I know of to get one click to change two frames. One of them is a pain in the butt, though very useful in the long run; the other involves java script.

Method Number One: Nested FRAMESET Documents

For those of you playing along at home that might be less familiar with frames than others, here's how a basic frame source document might look.

   <html>

   <head>
     <title>Example #1</title>
   </head>

   <frameset cols="20%,*">
     <frame src="contents.html" name="contents">
     <frame src="page.html" name="page">
   </frameset>

   <noframes>
      You don't have frames? YOU LOSE!
   </noframes>

This produces a document much like the one at which you are looking now, provided your browser supports frames. (If it does not, you probably won't be interested in reading this in the first place.) Two frames split the screen into columns; the first column takes up the leftmost twenty percent of available space and the second takes the remainder.

The first "frame src" tag places "contents.html" into the "20%" column, and names that frame "contents". I gave it that name because it's the perfect place for a Table of Contents list. (Naming frames is important if you want a link in one frame to change the content of another.) The second frame source tag puts "page.html" in the larger column, where the main page of text might go.

Lastly, I've included a "noframes" tag to give frameless viewers a link to a frameless version of the page.

Notice that this document has no "body" tag. Were I to include one, your browser would ignore all the frameset information and the page would appear somewhat unimpressive.

Now for the quantum leap. Imagine that "page.html", rather than being a ho-hum version on the theme of This Is My Page Hope You Like It, is a FRAMESET document, something like this:

   <html>

   <head>
     <title>Example #2</title>
   </head>

   <frameset rows="*,85">
     <frame src="text.html" name="text">
     <frame src="footnote.html" name="foot">
   </frameset>

This code breaks the "page" frame into two rows: a larger top row where one might post text, and a bottom row, eighty-five pixels high, where footnotes might easily be displayed. In essence, we'd be recreating the format of my home page index document. Go ahead and "view document source" of both "index.htm" and "index2.htm" and see how it works.

As I said, this method is a pain in the butt. The amount of FRAMESET documents you might end up needing can get ridiculous really quickly. But in the long run, the versatility of nested FRAMESETs makes up for the inconvenience. Besides, more layers of frames than what's described here is going to be kind of silly.

Method Number Two: Java Script

There's another way to get the same result, and it involves java script. Go visit "The Java Planet" at...

http://www.oocities.org/SiliconValley/7116/

In the menu, find "Load Two Frames in One" and click on it. Then you can see the script in action. If you view the source of the frame with the two links, "link1" and "link2", this is what you'll see:

<SCRIPT>
<!--
function twoinone(nr){
	if (nr==1){
		parent.banner.location.href="jv_2i1c.html"
		parent.display.location.href="jv_2i1b.html"
	}
	if (nr==2){
		parent.banner.location.href="jv_2i1b.html"
		parent.display.location.href="jv_2i1c.html"
	}
}
//-->
</SCRIPT>

Now, I'm not too savvy when it comes to java script, understand. If you want to use this, it's up to you to figure out which variables to change to make it useful on your page.

Good luck! ...Class dismissed.