So You Want To Change More Than One Frame, Huh?

by Joe Burns, Ph.D.

...use these to jump around or read it all....

[The Frame Page Code] [Frame Order]
[The Command] [Here's What's Happening]

     ...and now for my first trick. Click the button below and watch the frames to the right!
(Drum roll Sound Effect)

     (Cymbal Crash Sound Effect)

And now I will restore the original frames.

(Drum roll again)

     Good trick, huh? But unlike the true magicians, I will reveal my trick to you. I am using some simple java commands to change the three frames to the right. By the way, if you haven't already changed them back so the three frames read This is frames[1], frames[2], and frames[3], then please do so now. I'll be referring to those frame numbers soon.

The Frame Page Code

     In order to tell you how this is done, we need to start with the code I created that made these four little frame cells. Here is it:

<FRAMESET cols="85%,15%">
     <FRAME SRC="zippy1.html" NAME="A">

     <FRAMESET rows="33%,33%,33%">

     <FRAME SRC="zippy2.html" NAME="B">
     <FRAME SRC="zippy3.html" NAME="C">
     <FRAME SRC="zippy4.html" NAME="D">
</FRAMESET>
</FRAMESET>

     If what is above is a bit of Greek to you, you really should start with learning frames first as I won't be explaining them here. I am assuming that what is above makes sense to you already. If it doesn't, go to the original frames tutorial and get caught up to speed. Than come on back and get this bit of information under your belt.

     OK, now that they're gone...look at the set-up above. See how there are four frame cells? I have given them the names "A" through "D", in case I want to target any of my HREF link outputs.
     What you may not already know is that the frames had names before I named them. The browser already has "ordered" them for you. You may not know that because it has never come into play before. Well, now it does.

Frame Order

     When displayed, frames are given number names in the order that they appear in the code.

BUT!

     The numbers do not start with one. They start with zero.
     Look to the right at those three little frames. See how they are named frames[1], frames[2], and frames[3]? That's what the browser sees them as. So where's frames[0]? You're reading it. Here's how the frames break down using the code up above again:

<FRAMESET cols="85%,15%">
     <FRAME SRC="zippy1.html" NAME="A"> This is frames[0]

     <FRAMESET rows="33%,33%,33%">

     <FRAME SRC="zippy2.html" NAME="B"> This is frames[1]
     <FRAME SRC="zippy3.html" NAME="C"> This is frames[2]
     <FRAME SRC="zippy4.html" NAME="D"> This is frames[3]

</FRAMESET>
</FRAMESET>

     See how the frame cells are numbered starting with zero? Please note also that the word used is "frames[1]" with an "s". There are more than one. Forgetting the "s" will mess up the whole deal. OK, now that we know that, let's go on to use that to our advantage to change multiple cells.

The Command

     Here's the command I used above to change the three cells:

<FORM>
<INPUT TYPE="button" Value="Change Three Frames at Once"
onClick="parent.frames[1].location='zippy5.html';
parent.frames[2].location='zippy6.html';
parent.frames[3].location='zippy7.html';">
</FORM>

Here's What's Happening

  • FORM tells the browser a form type is going here.
  • INPUT TYPE="button" seems pretty self-explanatory.
  • VALUE= denotes what will be written on the button itself.
  • onClick= denotes that what follows should happen when the button is clicked. Please keep the capitalization on the letter "C".
  • parent.frames[1].location='zippy5.html'; is the java script command that does the trick for you.
         "parent" is the main page, the frame page.
         "frames[1]" is the frame that will be affected.
         "location='---' denotes what will fill the frame when clicked. In this case it's some pages called zippy.
         Please make note of the semicolon (;) at the end of each frame command line. Without it, you will get errors like crazy.
  • /FORM ends the entire deal.

     You can add as many or as few of the location commands as you want. If you have 20 frames, you can change them all with one click. Just make sure to add a new parent.frames[#].location='--'; for each one. However, you only need one onClick command.

     Let me also caution you that the quotes that surround the location page are single quotes. But there are double quotes surrounding the run of parent.frames[#].location='--'; commands. Make sure you get the quotes right or errors galore.

     Well, there you go. As many frames as you can write, that's how many you can change with the click of a button. Good luck with this, but remember that when you are reloading multiple frames, you are loading multiple pages. The process may be very slow due to the many items needed. If you use this function, do your best to offer low-byte pages for the shortest loading time.

Enjoy!

 

[Back to the Goodies Home Page]

 

[The Frame Page Code] [Frame Order]
[The Command] [Here's What's Happening]