Frames Tutor
How to load 2 (or more) frames with one mouse click

Here is an example.

Here is another example.

What we'll do is build the first example from scratch. Before I do, let me note that these instructions are geared towards those using Windows95 (or any operating system that can deal with long filenames). If you're running Windows3.x you'll have to use the file extension `.htm` and adjust the scripting accordingly.

First you'll need a few target documents. Copy the following and save as `hugh_ed.html` in a new folder somewhere.

`<htm>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">`

<FONT SIZE=3>Hugh's friend</FONT><BR>
<FONT SIZE=4>Ed</FONT>

</BODY>
</HTML>

VIEW IT

Save this as `hugh_cal.html`.

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">`

<FONT SIZE=3>Hugh's friend</FONT><BR>
<FONT SIZE=4>Calvin</FONT>

</BODY>
</HTML>

VIEW IT

Save this as `ron_mike.html`.

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">`

<FONT SIZE=3>Ron's friend</FONT><BR>
<FONT SIZE=4>Mike</FONT>

</BODY>
</HTML>

VIEW IT

And this as `ron_pete.html`.

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY bgcolor="#CCFFFF">`

<FONT SIZE=3>Ron's friend</FONT><BR>
<FONT SIZE=4>Pete</FONT>

</BODY>
</HTML>

VIEW IT

You should now have a folder with four documents in it...

1. `hugh_ed.html`
2. `hugh_cal.html`
3. `ron_mike.html`
4. `ron_pete.html`

Next you'll need a master page. It will have a left "directory" frame and the right side will be divided in half horizontally. Save the following as `index.html`.

`<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>`

<FRAMESET COLS="160,*">
<FRAME>
<FRAMESET ROWS="50%,50%">
<FRAME>
<FRAME>
</FRAMESET>
</FRAMESET>

</HTML>

Next, we need to specify what will be put into each frame when the page first loads. (We haven't made `direct.html` yet)

`<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>`

<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="hugh_ed.html">
<FRAME SRC="hugh_cal.html">
</FRAMESET>
</FRAMESET>

</HTML>

And, especially for what we're doing here, you gotta give each frame a `NAME`. Or should I say only those frames that will change. In our example, the directory frame never changes so we don't really need to name it.

`<HTML>
<HEAD>
<TITLE>Master Page</TITLE>
</HEAD>`

<FRAMESET COLS="160,*">
<FRAME SRC="direct.html">
<FRAMESET ROWS="50%,50%">
<FRAME SRC="hugh_ed.html" NAME="Frame_A">
<FRAME SRC="hugh_cal.html" NAME="Frame_B">
</FRAMESET>
</FRAMESET>

</HTML>

VIEW IT (Keep in mind that we haven't made the directory page yet)

And that's it for the master page.

The next thing we need to make is the directory page. Start with this and save it as `direct.html`.

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>`

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

</BODY>
</HTML>

Now if you load `index.html`, every frame will get filled. VIEW IT

All that's left is to add link information and JavaScript commands to `direct.html`. First add the links.

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>`

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

Hugh's friends<P>

Ron's friends<P>

</BODY>
</HTML>

VIEW IT

Now wrap the links in anchor tags.

`<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>`

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A>Hugh's friends</A><P>

<A>Ron's friends</A><P>

</BODY>
</HTML>

VIEW IT (no visible changes)

Here's where it get's a little confusing so, if you're at all like me, you'll want to take this nice and slow.

First, pop a set of JavaScript tags in the document `<HEAD>`. Make sure that it's in the `HEAD` tag and not within the `BODY` tag.

`<HTML>
<HEAD>
<TITLE></TITLE>`

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A>Hugh's friends</A><P>

<A>Ron's friends</A><P>

</BODY>
</HTML>

VIEW IT (no visible changes)

Now insert the scripting. Don't worry about what it means just yet. Just paste it in there for now.

`<HTML>
<HEAD>
<TITLE></TITLE>`

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A>Hugh's friends</A><P>

<A>Ron's friends</A><P>

</BODY>
</HTML>

VIEW IT (no visible changes)

Next, finish the links. Once again, I'll explain what's going on in a minute.

`<HTML>
<HEAD>
<TITLE></TITLE>`

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from tired old browsers

function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}

// -->
</SCRIPT>

</HEAD>

<BODY bgcolor="#FFFFFF">

<H3>Directory</H3>

<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>

</BODY>
</HTML>

VIEW IT

And that's it. Next we'll see exactly what's happening. (if you haven't figured it out already)

In the link part...

`<A HREF="javascript:multiLoad('hugh_ed.html', 'hugh_cal.html')">Hugh's friends</A><P>`

<A HREF="javascript:multiLoad('ron_mike.html', 'ron_pete.html')">Ron's friends</A><P>

...you simply insert the name of the html files. In the head tag we put a function. It's called a function because it performs an action. Let's suppose we made a function called `fry()`. It would `fry` whatever we sent to it. We could `fry('egg')` -or- `fry('bacon')` -or- `fry('egg','bacon')`. The end result would depend on what we passed to `fry()`. In our excercise we're calling the function `multiLoad()`. And we're telling that function to `multiLoad('hugh_ed.html', 'hugh_cal.html')` or `multiLoad('ron_mike.html', 'ron_pete.html')` depending on what link is clicked.

There's more...

In the function part...

`function multiLoad(doc1,doc2) {
parent.Frame_A.location.href=doc1;
parent.Frame_B.location.href=doc2;
}`

...we define the function. Let me continue with the fry thing. The first line in our function is like saying `fry(x,y)`, we can send it `egg,bacon`, or `fish,chips`, or `pancakes,sausage` (this is really making me hungry).

In our function `multiLoad(doc1,doc2)`, we are sending it `hugh_ed.html,hugh_cal.html` or `ron_mike.html,ron_pete.html` depending on what link is clicked.

The next two lines in the code define what to do with `hugh_ed.html`, etc. In a nutshell it says...

1- Place doc1 in Frame_A (doc1 being the first argument that was passed to the function - `hugh_ed.html`)
2- Place doc2 in Frame_B (doc2 being the second argument that was passed to the function - `hugh_cal.html`)

I know I'm probably over-explaining this, but I suppose that's better that under-explaining it.

More...

PROFESSIONAL WEB DESIGN