Tip 41…
Ever since I announced we would be playing around with this drop-down menu, the mail has been coming in saying “When are you going to get to the configuration that allows me to use this across frames?” Wait no longer. We’re there. Here’s the script’s latest configuration:
The code looks like this:
<SCRIPT LANGUAGE=”JavaScript”>
function acrossFrames()
{
if (document.FrameForm.DDFrameForm.options[0].selected)
parent.frames[0].location=’menuframes.html’
if (document.FrameForm.DDFrameForm.options[1].selected)
parent.frames[1].location=’scripttip1.html’
if (document.FrameForm.DDFrameForm.options[2].selected)
parent.frames[1].location=’scripttip2.html’
if (document.FrameForm.DDFrameForm.options[3].selected)
parent.frames[1].location=’scripttip3.html’
}
</SCRIPT>
<FORM NAME=”FrameForm”>
<SELECT NAME=”DDFrameForm”>
<OPTION SELECTED> –> Pick One <–
<OPTION>Script Tip One
<OPTION>Script Tip Two
<OPTION>Script Tip Three
</SELECT>
<INPUT TYPE=”button” VALUE=”go there” onClick=”acrossFrames()”>
</FORM>
You sharp-eyed tippers will notice I brought the button back. If you want to be rid of it, re-read the last tipand follow the same format. For this across-frames format, I want the button.
Let’s start at the bottom. It should look very familiar. The only reason I am showing it to you is that I have changed the name of the form and of the drop-down box. It looks like this:
<FORM NAME=”FrameForm”>
<SELECT NAME=”DDFrameForm”>
<OPTION SELECTED> –> Pick One <–
<OPTION>Script Tip One
<OPTION>Script Tip Two
<OPTION>Script Tip Three
</SELECT>
<INPUT TYPE=”button” VALUE=”go there” onClick=”acrossFrames()”>
</FORM>
The FORM itself is called “FrameForm” and the SELECT box is named “DDFrameForm”. The button is back and is set to trigger a function called
acrossFrames(). With me? Super. Let’s see the function that passes info from frame window to frame window.
The Function
It looks like this:
function acrossFrames()
{
if (document.FrameForm.DDFrameForm.options[0].selected)
parent.frames[0].location=’menuframes.html’
if (document.FrameForm.DDFrameForm.options[1].selected)
parent.frames[1].location=’scripttip1.html’
if (document.FrameForm.DDFrameForm.options[2].selected)
parent.frames[1].location=’scripttip2.html’
if (document.FrameForm.DDFrameForm.options[3].selected)
parent.frames[1].location=’scripttip3.html’
}
Let me first point out a basic tenant of JavaScript. JavaScript counts everything and it starts counting at zero. That means that the items in the SELECT box have already been assigned numbers. The first choice is choice zero, then one, then two, then three.
In addition… the frames have also been given numbers starting at zero. The first frame listed in a page’s FRAMESET is frame window zero. The second is frame window 1. The third listed would be frame window 2, and so on.
The frameset format for the example is a simple two-frame window, in rows, set to 30% and 70%:
<FRAMESET ROWS=”30%,*”>
<FRAME SRC=”menuframes.html”>
<FRAME SRC=”lookhere.html”>
</FRAMESET>
The first FRAME SRC listed will be known as
frames[0]. The second listed will be known as frames[1]. That’s the format of denoting a specific frame in JavaScript hierarchy statements.
Let’s look at the first two small blocks of code in the function:
if (document.FrameForm.DDFrameForm.options[0].selected)
parent.frames[0].location=’menuframes.html’
if (document.FrameForm.DDFrameForm.options[1].selected)
parent.frames[1].location=’scripttip1.html’
The first choice is the text “Pick One.” We do not want that to produce any linking, so I have set that link to reload the same page into the same frame window.
See that? If the item chosen by the user is option[0], the first choice, then loadn menuframes.html into frames[0] which is the one it is already in. Follow that? It just reloads the same page in the same frame window.
The next block of code is for the second choice. That is choice number 1 because JavaScript starts counting at zero. It reads that if someone chooses options[1], then that page is to be loaded into frames[1], the lower frame window. Get it?
Follow along with the next two blocks of code. Each says that if a specific option is chosen, then load it into frames[1], the lower frame.
Other Frames
But what if you have multiple frames? No sweat. Just remember to count your frame windows from zero, top to bottom. If you have five frame windows, they would be numbered zero through four. You could set each choice in the drop-down menu to load into a different window simply by putting in the appropriate frame window number.
Note
Each of the function blocks of code are an If statement. Usually, an If statement ends with an Else. The reason this does not is because I am sure one of the If statements will be true every time someone chooses one of the SELECT box items. There is no need for the Else statement.
You now know more ways to play with a drop-down menu than you probably will ever need to know. So enjoy it. It’s a great script that can look very professional on your pages.
Next Week: Multiple Engine Search Script
