Professional Web Design - Frames Tutor - Load 2 (or more) frames with one click

Load 2 (or more) frames with one click - javascript method

First we need a few target documents. grab the following and save them in your working folder.

zjoe_bill.html zjoe_ed.html zjoe_frank.html zjoe_tom.html		zjackie_amy.html zjackie_joan.html zjackie_lisa.html zjackie_toni.html
zjohn_al.html zjohn_dean.html zjohn_george.html zjohn_ralph.html		zjenny_denise.html zjenny_marci.html zjenny_pam.html zjenny_shannon.html

By the way, these all begin with z so they all stay together in the directory and are easy to grab all at once.

First we'll build the smaller example. You need a master page that specifies what goes where to begin with. Save the following as master.html...

<HTML>
<HEAD>
<TITLE>Joe and Jackie's friends</TITLE>
</HEAD>

<FRAMESET COLS="25%,75%">
  <FRAME SRC="dir.html">
  <FRAMESET ROWS="50%,50%">
    <FRAME SRC="zjoe_bill.html" NAME="right_top">
    <FRAME SRC="zjoe_ed.html" NAME="right_bottom">
  </FRAMESET>
</FRAMESET>

</HTML>

This is just simple HTML frame stuff so far. Notice the frame names. (We haven't made dir.html yet).

Save the following as dir.html....

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

</BODY>
</HTML>

Add some scripting to the HEAD...

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
  parent.right_top.location.href=doc1;
  parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

</BODY>
</HTML>

No need to worry about what it does just yet.

Add the text of the links and the anchor tags. Just don't fill in the HREF part just yet.

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
  parent.right_top.location.href=doc1;
  parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="">Joe's friends</A>
<P><A HREF="">Jackie's friends</A>
</BODY>
</HTML>

Now add the HREF part.

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad2(doc1,doc2) {
  parent.right_top.location.href=doc1;
  parent.right_bottom.location.href=doc2;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="javascript:multiLoad2('zjoe_bill.html', 'zjoe_ed.html')">Joe's friends</A>
<P><A HREF="javascript:multiLoad2('zjackie_amy.html', 'zjackie_joan.html')">Jackie's friends</A>
</BODY>
</HTML>

Now load master.html and your example should be functional.

Alright, what have we done? How does it work?

In a nutshell, we have a function - multiLoad2(). We pass arguments to the function - zjoe_bill.html and zjoe_ed.html. The function then processes those arguments.

function multiLoad2(doc1,doc2) {
Here two arguments get passed to the function. As soon as the arguments hit the function, they become variables doc1 & doc2 so they can be manipulated.

parent.right_top.location.href=doc1;
Place whatever is in variable doc1 in the right top frame.

parent.right_bottom.location.href=doc2;
Place whatever is in variable doc2 in the right bottom frame.

You could easily expand on this to change more frames. Add to master.html and save it as master2.html...

<HTML>
<HEAD>
<TITLE>Joe and Jackie's friends</TITLE>
</HEAD>

<FRAMESET COLS="25%,75%">
  <FRAME SRC="dir2.html">
  <FRAMESET ROWS="25%,25%,25%,25%">
    <FRAME SRC="zjoe_bill.html" NAME="right1">
    <FRAME SRC="zjoe_ed.html" NAME="right2">
    <FRAME SRC="zjoe_frank.html" NAME="right3">
    <FRAME SRC="zjoe_tom.html" NAME="right4">
  </FRAMESET>
</FRAMESET>

</HTML>

(Don't forget the the change from dir.html to dir2.html. We're going to use a different directory page.)

Now add to your original dir.html and save as dir2.html...

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hiding
function multiLoad4(doc1,doc2,doc3,doc4) {
  parent.right1.location.href=doc1;
  parent.right2.location.href=doc2;
  parent.right3.location.href=doc3;
  parent.right4.location.href=doc4;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><A HREF="javascript:multiLoad4('zjoe_bill.html',     'zjoe_ed.html',      'zjoe_frank.html',   'zjoe_tom.html'      )">Joe's friends</A>
<P><A HREF="javascript:multiLoad4('zjackie_amy.html',   'zjackie_joan.html', 'zjackie_lisa.html', 'zjackie_toni.html'  )">Jackie's friends</A>
<P><A HREF="javascript:multiLoad4('zjohn_al.html',      'zjohn_dean.html',   'zjohn_george.html', 'zjohn_ralph.html'   )">John's friends</A>
<P><A HREF="javascript:multiLoad4('zjenny_denise.html', 'zjenny_marci.html', 'zjenny_pam.html',   'zjenny_shannon.html')">Jenny's friends</A>
</BODY>
</HTML>

Now load master2.html to test your creation.

A little fiddling with this setup and you'll see how it could be very powerful. The tying together of the 2-frame JS version and the 4-frame JS version I'll leave up to you. As far as the random load thing, that's a little beyond the scope of this piece. I just added it in so you could see the potential of javascript based frame manipulation.

And so we wrap up the second method for changing multiple frames with one click. As I've said before, if at all possible, use the HTML method for this.