2D Related Comboboxes : ComboBox : GUI Components JAVASCRIPT DHTML TUTORIALS


JAVASCRIPT DHTML TUTORIALS » GUI Components » ComboBox »

 

2D Related Comboboxes



<HTML>
<HEAD><TITLE>Universal Related Popup Menus / Another Way</TITLE>
<BASE HREF="http://www.navioo.com">

<STYLE>
     .saveHistory {behavior:url(#default#savehistory);}
</STYLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
v=false;
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1">
<!--
if (typeof(Option)+"" != "undefined"v=true;
//-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--

// Universal Related Select Menus - cascading popdown menus
// by Andrew King. v1.34 19990720
// Copyright (c) 1999 internet.com LLC. All Rights Reserved.
//
// This program is free software; you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation; either version 2 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA
//
// Originally published and documented at http://www.webreference.com
// Contact aking@internet.com for all other uses.
//
// Change History
// 3-3-96 code optimized, modularized, and made universal-abk
// 3-8-97 jumpPage1 and 2 consolidated into generalized func
// 3-10-97 changeMenu added jumpPage(0,0), for non-ns3 browsers
// make popup act like a live popup when no related functionality
// 8-5-97 browser detect script changed to check for option functionality
// 9-11-97 aln changed to options.length, as IE 4 does not support
// nulling out options
// 12-22-98 added SIZE att to make select lists, used named forms/elements
// 1-1-99 added getFormNum to fix netscape 2 bug (doesn't support named fms)
//  pass formName, elementNum to relate and jmp as workaround
//  pass this.form,0 and increment instead of decrement in relate to get 
//   next form
//  assumes menu2 follows menu1 in HTML
// tested in mac ie3.01/ns2.02 (live), ns 3.01,4.05,4.5 and ie4.01 related
// 990204 - adopted a more modular/oo approach using two D arrays, thanks
//   to Jacob Berner <leo7278@hotmail.com> for his input
// 990701 - fixed back button bug in ie4+ by resetting all forms onload-abk
//    thanks to peter belesis (pbel@internet.com) for this fix
// 990714 - added IE5 persistence - abk pb
// 990715 - went open source, created stripped down example files - abk
// 990720 - jmp() fix getFormNum(formName);->
//     var formNum = getFormNum(formName);
//  if (v) {..} added around newCat array creation for old browsers
// 990721 - getFormNum/relate tweaks, unnec code removed, 
//     ns2.0 mac fix - getFormNum returns -1 in nested tables
//     new jmp bypasses prob - thx to thanks to Michael Guitton
//     saramaca@mail.dotcom.fr
// 990722 - var for scope added, jmp chgd to named form for ns2.02 bug-abk

if(v){a=new Array(22);}

function getFormNum (formName) {
  var formNum =-1;
  for (i=0;i<document.forms.length;i++){
    tempForm = document.forms[i];
    if (formName == tempForm) {
      formNum = i;
      break;
    }
  }
  return formNum;
}

function jmp(form, elt)
// The first parameter is a reference to the form.
{
  if (form != null) {
    with (form.elements[elt]) {
      if (<= selectedIndex)
        location = options[selectedIndex].value;
    }
  }
}

var catsIndex = -1;
var itemsIndex;

if (v) { // ns 2 fix
function newCat(){
  catsIndex++;
  a[catsIndexnew Array();
  itemsIndex = 0;
}

function O(txt,url) {
  a[catsIndex][itemsIndex]=new myOptions(txt,url);
  itemsIndex++;
}

function myOptions(text,value){
  this.text = text;
  this.value = value;
}

// fill array

newCat();
O("3-D Animation","/3d/");
O("Design","/dlab/");
O("DHTML","/dhtml/");
O("E-Commerce","/ecommerce/mm/");
O("Graphics","/graphics/");
O("HTML","/html/");
O("JavaScript","/js/");

newCat();
O("Authoring","/authoring/");
O("E-Commerce","/ecommerce/");
O("Internet","/internet/");
O("Multimedia","/multimedia/");
O("Programming","/programming/");
O("Promotion","/promotion/");

newCat();
O("Domains","/services/dns/");
O("Graphics","/services/graphics/");
O("News Harvester","/headlines/nh/");
O("Reference","/services/reference/");
O("Search","/search.cgi");
O("Validation","/services/validation/");

newCat();
O("Awards","/awards.html");
O("In the News","/inthenews.html");
O("New Features","/features.html");
O("Linking Info","/link.html");
O("Lore","/lore.html");
O("Media Kit","http://www.navioo.com/");
O("Press Releases","/press/");
O("Suggest","/cgi-bin/suggest.cgi");
// if (v)

function relate(formName,elementNum,j) {
if(v){
var formNum = getFormNum(formName);
 if (formNum>=0) {
  formNum++; // reference next form, assume it follows in HTML
  with (document.forms[formNum].elements[elementNum]) {
    for(i=options.length-1;i>0;i--options[inull// null out in reverse order (bug workarnd)
    for(i=0;i<a[j].length;i++){
      options[inew Option(a[j][i].text,a[j][i].value)
    }
    options[0].selected = true;
  }
 }
else {
jmp(formName,elementNum);
}
}

// BACK BUTTON FIX for ie4+- or
// MEMORY-CACHE-STORING-ONLY-INDEX-AND-NOT-CONTENT
//
// from peter belesis:
// IE4+ remembers the index of each SELECT but NOT the CONTENTS of each
// SELECT, so it gets it wrong.
//
// it has to do with MEMORY CACHE (where form input is stored) and how
// IE stores information about SELECT menus.
//
// IE stores the selectedINDEX ONLY of the SELECT menu, not the
// CONTENTS-AT-THE-TIME-OF-SELECTION
//
// when we return to a page, it displays the default contents of each
// SELECT, grabs the stored index from cache and aligns the default
// contents to that index.
// 
// Netscape, on the other hand, seems to remember both INDEX and CONTENTS
// added ie5 persistence 990714

function IEsetup(){
  if(!document.allreturn;
  IE5 = navigator.appVersion.indexOf("5.")!=-1;
  if(!IE5) {
    for (i=0;i<document.forms.length;i++) {
      document.forms[i].reset();
    }
  }
}

window.onload = IEsetup;

//-->
</SCRIPT></HEAD>
<BODY BGCOLOR="#ffffff">

<CENTER>
<TABLE BGCOLOR="#DDCCFF" BORDER="0" CELLPADDING="8" CELLSPACING="0">
<TR VALIGN="TOP"><TD>Choose a subject:<BR><FORM NAME="f1" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m1" ID="m1" CLASS=saveHistory onChange="relate(this.form,0,this.selectedIndex)"><OPTION VALUE="/experts/">Experts<OPTION VALUE="/index2.html">Contents<OPTION VALUE="/services/">Services<OPTION VALUE="/about.html">About</SELECT><INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
</FORM></TD>
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>---&gt;</B></TD>

<TD>Choose a topic:<BR><FORM NAME="f2" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m2" ID="m2" CLASS=saveHistory onChange="jmp(this.form,0)">
<OPTION VALUE="/3d/">3-D Animation
<OPTION VALUE="/dlab/">Design
<OPTION VALUE="/dhtml/">Dynamic HTML
<OPTION VALUE="/ecommerce/mm/">E-Commerce
<OPTION VALUE="/graphics/">Graphics
<OPTION VALUE="/html/">HTML
<OPTION VALUE="/js/">JavaScript</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="http://www.navioo.com">
</FORM></TD>
</TR>
</TABLE></CENTER>

</BODY>
</HTML>


           
       



-

Leave a Comment / Note


 
Verification is used to prevent unwanted posts (spam). .

Follow Navioo On Twitter

JAVASCRIPT DHTML TUTORIALS

 Navioo GUI Components
» ComboBox