View Full Version : <FRAMESET> navigation fix needed

07-05-2008, 09:09 PM
Always hated <frameset> as wasteful and useless. Now totally have contempt for <frameset>. But I may be stuck trying to fix HORRIBLE navigation problem at http://www.jacquimorgan.com/

<frameset rows="35,450*" cols="*" noresize frameborder="NO" FRAMESPACING="0">
<frame name="topFrame" MARGINHEIGHT="2" noresize src="f_top.html" scrolling="NO">
<frameset cols="110,*" noresize frameborder="NO" FRAMESPACING="0">
<frameset rows="64,*" cols="*" noresize frameborder="NO" FRAMESPACING="0">
<frame src="f_left_1.html" noresize MARGINWIDTH="0" MARGINHEIGHT="10" scrolling="no">
<frame name="co11" noresize scrolling="auto" src="f_left_2.html">
<frame name="co12" noresize scrolling="auto" src="update/index.htm">

Two years ago, when first faced with this, almost got close. But still cannot get link in “topFrame” to change 2 links at once for col1 (“left_1.html”) and col2.

An example of one frame’s link simultaneously changing content of 2 other frames can be found at :

And WebMonkey’s old tutorial showed how to change 2 frames
Changing Two Frames At Once
Imagine we have a page with two frames in it -- one on the left and one on the right. We have a link in the left frame that we want to change both frames. In the document that fills the left frame, we'll pop this in:
<a href="zoinks.html"
onClick="window.self.location='raggy.html'" target="otherframe">
Let's break it down:
<a href="zoinks.html"
This is the new document that will be loaded into the right-hand frame. onClick="window.self.location='raggy.html'" target="otherframe">Zombies</a>
Basically, onClick means "when you click this." window.self.location refers to the window you're in during the onClick (the left-hand frame), which will be the host for raggy.html. The part of the script that changes the right frame is target="otherframe">Zombies</a>, which targets otherframe to be the host for zoinks.html.

I would much prefer starting over with up-to-date CSS/JavaScript such as that used at sampler http://jacquimorgan.tripod.com but I might not have that choice. So, if I’m stuck “patching” old <frameset>, any help with 3-frame navigation fix would be welcome.

07-06-2008, 04:01 PM
I don't know how important that 'self' bit is (window is already self), but the basic concept is right for changing both the page with the link and a page in the frame named "otherframe".

But if I read your post right (I'll go over it again later, and perhaps edit this post or make another post if I see I missed something), you want to change two pages, each in a frame other than the frame in which the page with the link on it resides.

So anyways, the situation is a little different, but essentially the same:

<a href="zoinks.htm" target="col1" onclick="top.frames['col2'].location.href='raggy.htm';return true;">Zombies</a>

This part is just an ordinary targeted link:

<a href="zoinks.htm" target="col1"

and doesn't require javascript. As long as a frame named col1 and a page named zoinks.htm exist, it will work. The onclick event requires a frame named col2 on the top page (the frameset page) and the page raggy.htm, but it also requires javascript enabled (fortunately the usual state of affairs) on the user's part.

07-08-2008, 08:56 PM
2 years ago I had tried disecting http://www.partnershipforthehomeless.org/bottomnav.html <frameset> and tried following this (from htttp://builder.cnet.com
In JavaScript, each member of the frames index is itself a window--with all of a Window's methods, events, and properties, including its own frames array (in case it contains another frameset page). So, changing a frame's contents from a script is as simple as modifying its location.href.

For example, consider a frameset that begins with three identical frames along the bottom:

<FRAMESET rows="60%,40%">
<FRAME name="link" src="link.html">
<FRAMESET cols="*,*,*">
<FRAME name="blank1" src="blank.html">
<FRAME name="blank2" src="blank.html">
<FRAME name="blank3" src="blank.html">

The first frame's document, link.html, can change the other three with a single link using the syntax href="javascript:navAll()" and the following function:

<SCRIPT language="JavaScript"><!--
function navAll() {
parent.frames[3].location.href="white.html"; }
// --></SCRIPT>

If you frame a document that already contains JavaScript navigation via the self property or Window, History, or Location objects, those links should still work within the frame.

When scripting, it's important to give every <FRAME> an src attribute. Navigator doesn't count frames without the attribute, which can result in a different frames[] index.
Paul Anderson is senior producer and technical editor for CNET Builder.com.
I haven't tried your advice yet.

07-20-2008, 12:24 AM
Thanks to your help, I ALMOST got it for http://www.jacquimorgan.com

Without success, I tried versions of your <a href="zoinks.htm" target="col1" onclick="top.frames['col2'].location.href='raggy.htm';return true;">Zombies</a>. But when I combined your suggestion with the CNET Builder.com (Paul Anderson) tutorial above, I was able to change 2 frames simultaneously from the third frame.

<A HREF="f_left_a.html " TARGET="col1" onClick="parent.frames[3].location.href=fl_01.html; return true;">Florals<BR></A>
<A HREF="f_left_b.html" TARGET="col1" onClick="parent.frames[3].location.href='l_01.html'; return true;">Landscape</A>
<A HREF="f_left_c.html" TARGET="col1" onClick="parent.frames[3].location.href='pe_01.html'; return true;">People </A>
A HREF="f_left_d.html" TARGET="col1" onClick="parent.frames[3].location.href='pl_01.html'; return true;">Places</A>
<A HREF="f_left_e.html" TARGET="col1" onClick="parent.frames[3].location.href='s_01.html'; return true;">StillLife</A>
<A HREF="f_left_f.html" TARGET="col1" onClick="parent.frames[3].location.href='c_01.html'; return true;">Children's</A>

[Oops! Did I have "co11" instead of "col1"????]

But then I had a problem with the first link (“FLORALS”) not working at all. So I tried adding an “UPDATE” link and switching around the “FLORALS” target / onclick. HELP! I’m still having a problem with this. (Probably something obvious that I just do not see.)

<A HREF="f_left_2.html" TARGET="col1" onClick="parent.frames[3].location.href='update/index.html'; return true;">Update</A>
<A HREF="fl_01.html" TARGET="col2"
return true;">Florals<BR></A>

The original <FRAMESET> and f_top.html links were as follows:

<frameset rows="35,450*" cols="*" noresize frameborder="no" framespacing="0">
<frame name="topframe" marginheight="2" noresize src="f_top.html" scrolling="no">
<frameset cols="110,*" noresize frameborder="no" framespacing="0">
<frameset rows="64,*" cols="*" noresize frameborder="no" framespacing="0">
<frame src="f_left_1.html" noresize marginwidth="0" marginheight="10" scrolling="no">
<frame name="co11" noresize scrolling="auto" src="f_left_2.html">
<frame name="co12" noresize scrolling="auto" src="update/index.htm">

<A HREF="f_left_a.html" TARGET=co11>Florals</A
<A HREF="f_left_b.html" TARGET=co11>Landscape</A>
<A HREF="f_left_c.html" TARGET=co11>People</A
<A HREF="f_left_d.html" TARGET=co11>Places</A
<A HREF="f_left_e.html" TARGET=co11>StillLife</A>
<A HREF="f_left_f.html" TARGET=co11>Children's</A>

07-20-2008, 07:55 AM
You might be better off referencing the frameset as top, rather than as parent. For example, paste this into the address bar of the browser:

javascript:for(var i = 0; i < top.frames.length; ++i)if(top.frames[i].name)alert(i + ' ' + top.frames[i].name)

and hit enter. You will get three alerts:

0 topFrame
2 co11
3 co12

Frame 1 has no name.

Now, as far as I can tell, you may have some confusion in your mind about what is col1 and col2 (neither of which exist in the current page) and co11 and co12 which do exist.

But, using the number, you can access any of the 4 frames from any of the pages contained in them:


will load into topFrame


will load into the unnamed frame


will load into co11


will load into co12

Since frame 1 (the unnamed frame) has no name, you cannot make a targeted link to it from another frame's page, but all the others may be linked to using target (this is just an ordinary link):

<a href="some.htm" target="co12">whatever</a>

A link like that can be combined with an onclick:

<a href="some.htm" target="co12" onclick="top.frames[2].location.href='some_other.htm';return true;">whatever</a>

That will load 'some.htm' into co12, and 'some_other.htm' into co11. It's really not any more complicated than that.

07-20-2008, 07:30 PM
Thanks again. I left it at PARENT.frames[] instead of TOP.frames[] (although your good advice has been noted).

[Oops! Did I have "co11" instead of "col1"????]

I did not catch that in the original index.html <frameset>: "Now, as far as I can tell, you may have some confusion in your mind about what is col1 and col2 (neither of which exist in the current page) and co11 and co12 which do exist."

Your observation resolved my FLORALS link problem.

Did I mention: I hate <frameset>. It's upsetting that at FIT CG214 (intro Web) is still devoted to <frameset>. This site is something I got stuck with, but that HORRIBLE original navigation was something I could not tolerate.

Many, many thanks. You are a life-saver.

07-20-2008, 11:39 PM

Just as a side note, the difference between parent and top is worth noting, even if it doesn't come into play in this situation.

Top and parent refer to windows. Top is the very top window, parent is the window immediately above the current window. Windows are different from pages, but at the same time, the structure of any given page determines how many windows its window may contain.

The bottom line is that top will always refer to the topmost page/window, while parent will only refer to one level up from the current page/window. Often these are the same, and it doesn't really matter which you use. However, when there are more than one level of frames - say a frameset being loaded into the frame of a frameset, it will make a difference.

When iframes are included, these also count as windows and can make a difference as well.

09-21-2008, 12:51 AM
I could edit the first entry. http://www.jacquimorgan.com is being moved to http://www.doteasy.com host/server so it is no longer a sub-domain of www.greatfolio.com and we were able to dump the <frameset> layout.

Another example of the navigation problem we had experienced can be viewed at http://www.patportergallery.com/.

The education and examples of jscheuer1 (John Davenport Scheuer?) herein were so great it was almost a shame to dispense with JacqiMorgan's <frameset> layout. May some other <frameset> sufferer benefit from this discussion.