Drop Boxes and FramesUsing drop boxes with frames
The trick is to change window.location to this:
What you do is change the word framename above with the name of your target frame, or what you would normally write inside the target=" " attribute.
So, suppose you had a frameset like the one below, using the left frame for navigation and the right frame for content:
<HTML> <HEAD> <TITLE>Frames Example 1</TITLE> </HEAD> <FRAMESET cols="20%,80%"> <FRAME SRC="jex18.htm" name="left_frame"> <FRAME SRC="jex19.htm" name="right_frame"> <NOFRAMES> Sorry, you can't see this page.. </NOFRAMES> </FRAMESET> </HTML>
Now, since we want the drop box in the left frame, that is the page we need to modify. Above, the left frame is "jex18.htm", and we want to open our drop box links in the right frame, "jex19.htm". Notice how the FRAME tag uses the name=" " attribute. We will need this when we write the code for the drop box.
Now, edit your left frame HTML by adding the dropbox. The thing we need to concentrate on is getting the target frame correct. With our frameset, the right frame is named "right_frame". This is what we use to change our command line when the go button is clicked:
Now, everything your viewers choose from the drop box will open in the right frame. The complete drop box code is below:
<FORM name="guideform"> <SELECT name="guidelinks"> <OPTION SELECTED value="jex20.htm">Page 1 <OPTION value="jex21.htm">Cool Page </SELECT> <INPUT type="button" name="go" value="Go!" onClick="parent.right_frame.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> </FORM>
If you want to see this in action, check out the example below by clicking the View Example link:
What if I'm using the no-button Drop Box?You do the same thing with the code, changing only the information to the left of the "=" sign. The code for one of these is below:
<FORM name="guideform"> <SELECT name="guidelinks" onChange="parent.right_frame.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value"> <OPTION SELECTED value="jex20.htm">Page 1 <OPTION value="jex21.htm">Cool Page </SELECT> </FORM>
So, now you have the drop box working with your frames, rather than against them- or maybe that should be the other way around?
Well, that does it for now, try out the next section on
||By: John Pollock||