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

part 1 | part 2

Here is an example.

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.

General Table of Contents | Lessons Intro - 1 - 2 - 3 - 4 - 5 - 6 - 7 | Templates | Barebones HTML Guide
PROFESSIONAL WEB DESIGN