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

There are two ways to do this... the HTML method, and the javascript method. Each has it's advantages and each has it's drawbacks.

The HTML method does not require that javascript be enabled for it to work. It doesn't require that you learn anything new (If you can make frames, you can do this.)

The javascript method is better if you're going to get into some fancy frame manipulation. It's often less work, it's more or less "reusable", it's more flexible and it can be easier to add on to. The only real drawback is if someone comes to your site with their JS disabled, they're not going to get very far.

If at all possible, use the HTML method.

We will get into that HTML method first.

Change 2 (or more) frames - the HTML method

The idea here is simple... the two frames that will be changed have been defined with a FRAMESET doc. To change them, just load a new FRAMESET doc.

Click the link below. Follow me step by step. I'll explain what's happening.
Here is an example.

The link first loads a directory page in the left frame and a frameset page in the right. The frameset page immediately loads 2 documents in that right frame: Joe's friend Bill and Joe's friend Ed.

Click the link to Jackie's friends.

This loads a whole new frameset doc (split2_jackie.html) into the right frame which immediately loads Jackie's friend Amy and Jackie's friend Joan into the frames.

You see, all you're doing is loading a new frameset doc when you click on a link. The framesets can be as complex as you wish. Click back and forth between Joe's friends and Jackie's friends.

Now click on More friends.

Oh my! What the heck happened?

Well... more of the same. Clicking on that link loaded an entirely new master page with the TARGET being set as "_top". This loaded a new directory page in the left frame and a new frameset page in the right which in turn spilled 4 documents into those 4 right frames.

Click on John's friends. This loads a new frameset doc (split4_john.html) into the right frame which in turn loads John's friends. Clicking back and forth between Joe, Jackie, John and Jenny simply loads different framesets into the right frame. Clicking on the Less frames link re-loads the first master page.

Pretty neat eh?

The following documents were used in the above examples.

View directory
 
Master pages
master_html_2.html
master_html_4.html
Directory pages
dir_html_2.html
dir_html_4.html
Frameset pages
split2_joe.html
split2_jackie.html
split4_joe.html
split4_jackie.html
split4_john.html
split4_jenny.html
Friends pages
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

Thats about it for the HTML method. Remember, regardless of the method you choose, there's a lot of room for error here. Be meticulous and thorough. Test your setup completely before unleashing it on the world.


You want to tax yourself? Here's what you can do for some intense practice...

practice

Put this little frames symphony together from scratch. Use the following outline...

   Mammals
         Farm Animals
               Cow | Pig | Horse
         Big Game
               Bear | Moose
         Small Critters
               Mouse | Gerbil | Squirrel | Mole
   Plants
         Trees
               Maple | Oak | Fir | Cherry
         Flowers
               Daisy | Tulip | Rose
         Fruits
               Apple | Orange | Grapes | Peaches | Plums | Lemons
         Vegetables
               Cucumber | Green beans
   Fish
         Game fish
               Salmon | Bass | Walleye | Catfish
         Aquarium fish
               Goldfish | Guppies

A solution is here if you need it.

Now off to the javascript method...

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