Web Hosting Directory | Web Hosting Resources | Webmaster Resources | Domain Tools | Search Engine Marketing | Forums
  Signup
Today: 875   Yesterday: 1,235   Max: 1,872   Total: 481,852   Current Users : 18 (Member 0) 
DOMAIN TOOLS

WEBMASTER TOOLS

RELATED ARTICLES

SUBMIT AN ARTICLE

Write for us and get publicity, link to your website, and best of all get paid. Please visit our writers page for details.


LINK TO US

Link to us and earn points for each visitor you bring to us. Please visit our link partner page for details.

 

Drop Down Menu With Frames

A drop down menu can be targeted to another frame. For example, suppose that you have a dropdown in the upper frame of a framed page, and you want to target it at the lower frame. We might create this sort of frameset with the following code. Notice that we name the lower frame MAIN:

<FRAMESET ROWS="35%,*">
   <FRAME SRC="ddf.titlebar.php" NAME=TITLEBAR>
   <FRAME SRC="ddf.lower.php"    NAME=MAIN>

<NOFRAMES>NOFRAMES stuff
</NOFRAMES>

</FRAMESET>

To create a drop down menu in the upper frame, we'll use the same script as described in the previous page. Copy the following script exactly as-is into the <HEAD> section of your page:

<SCRIPT TYPE="text/javascript">
<!--
function dropdown(mySel)
{
var myWin, myVal;
myVal = mySel.options[mySel.selectedIndex].value;
if(myVal)
   {
   if(mySel.form.target)myWin = parent[mySel.form.target];
   else myWin = window;
   if (! myWin) return true;
   myWin.location = myVal;
   }
return false;
}
//-->
</SCRIPT>

The dropdown will use a select form like in the previous example. To target the dropdown at the lower frame we'll make one small change. In the <FORM ...> tag add a TARGET attribute targeting the form at the MAIN frame:

this code produces this
<FORM 
   ACTION="../cgi-bin/redirect.pl" 
   METHOD=POST onSubmit="return dropdown(this.gourl)"
   TARGET=MAIN
   >
<SELECT NAME="gourl">
<OPTION VALUE="">Choose a Destination...

<OPTION VALUE="ddf.lower.php">Home
<OPTION VALUE="ddf.user.php">User Manuals
<OPTION VALUE="ddf.resume.php">Resume
<OPTION VALUE="ddf.contact.php">Contacts

</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go">
</FORM>
the dropdown in this page

This select works almost the same as that in the previous page. The Javascript checks if the <FORM ...> has a TARGET attribute. If it finds one, it redirects the indicated frame instead of the current frame. If the browser has Javascript turned off then it uses the TARGET attribute anyway when it is redirected by our redirection CGI.



Copyright 1997-2002 Idocs, Inc. Written by Miko Sullivan.

 
 
 
What is your major source of website traffic?
 
 
 
 
 
 

ADVERTISEMENT

 
Cheap Web HostingBudget Web HostingEcommerce Web Hosting
Link to UsLink ExchangeAdvertisePrivacy PolicyTerms Of ServiceAbout UsContact UsSitemap
Copyright © 2006 - 2008 Broadband Media, Inc. All rights reserved.