3D related comboboxes : ComboBox « GUI Components « JavaScript DHTML






3D related comboboxes

<HTML>
<HEAD>
<TITLE>Universal Related Popup Menus / Three Related Menus</TITLE>
<BASE HREF="http://www.java2s.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 3-D - cascading popdown menus
// (Dynamically-sized related menus using JS 1.1's new Option cmd)
// 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 "Cyanide _7" <leo7278@hotmail.com> for his help
// 990211 relate2 works! no text - value for second dim array
//    works! relate calls relate2 (using fromRelate kludge) for 3 related menus
// 990701 - bug fix in related select lists - click on second menu's list,
//  get an error as there's no selected option in first menu in a list, 
//  one fix is default to selected first menu's option - abk
// 990701 - fixed back button bug in ie4+ by resetting all forms onload
//      fromRelate var kludge eliminated, added to relate2 as param
//    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);aln=22;}

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


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

var catsIndex = -1;
var itemsIndex;
var subItemsIndex;

function newCat(){
  catsIndex++;
  a[catsIndex] = new Array();
  itemsIndex = -1;
}

function O(txt,url) {
  itemsIndex++;
  a[catsIndex][itemsIndex] = new Array();
  a[catsIndex][itemsIndex].text = txt;
  a[catsIndex][itemsIndex].value = url;
  subItemsIndex = 0;
}

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

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

// fill array

if (v) { // ns 2 fix
newCat();

O("3-D Animation","/3d/");
  OO("Glossary","/3d/glossary/");
  OO("Lesson56","/3d/lesson56/");
  OO("Lesson57","/3d/lesson57/");
  OO("Lesson58","/3d/lesson58/");
  OO("Lesson59","/3d/lesson59/");
O("Design","/dlab/");
  OO("About","/dlab/about.html");
  OO("Books","/dlab/books/");
  OO("Dessert Links","/dlab/dessert.html");
  OO("People Say","/dlab/peoplesay.html");
O("DHTML","/dhtml/");
  OO("Dynomat","/dhtml/dynomat/");
  OO("Diner","/dhtml/diner/");
  OO("Hiermenus","/dhtml/hiermenus/");
  OO("About","/dhtml/about.html");
O("E-Commerce","/ecommerce/mm/");
  OO("About","/ecommerce/mm/about.html");
  OO("Archive","/ecommerce/mm/archives.html");
  OO("Links","/ecommerce/mm/linkidx.html");
O("Graphics","/graphics/");
  OO("Bio","/graphics/bio.html");
  OO("Column1","/graphics/column1/");
  OO("Column2","/graphics/column2/");
  OO("Column3","/graphics/column3/");
O("HTML","/html/");
  OO("About","/html/about/");
  OO("What's New","/html/new/");
  OO("Tutorials","/html/tutorials/");
  OO("Style Watch","/html/watch/");
O("JavaScript","/js/");
  OO("About","/js/about.html");
  OO("Jx Pharmacy","/js/pharmacy/");
  OO("Column1","/js/column1/");
  OO("Column2","/js/column2/");
  OO("Column3","/js/column3/");

newCat();
O("Authoring","/authoring/");
  OO("Collections","/authoring/collections.html");
  OO("Design","/authoring/design/");
  OO("FAQs","/authoring/faqs.html");
  OO("Graphics","/authoring/graphics/");
  OO("Languages","/authoring/languages/");
  OO("Organizations","/authoring/organizations.html");
  OO("Programming","/programming/");
  OO("Site Management","/authoring/languages/html/site.html");
  OO("Style","/authoring/style/");
  OO("Tutorials","/authoring/tutorials.html");
O("Internet","/internet/");
  OO("Collections","/internet/collections.html");
  OO("Conferences","/internet/conferences.html");
  OO("Discussion","/internet/discussion.html");
  OO("FAQs","/internet/faqs.html");
  OO("Formats","/internet/formats.html");
  OO("Glossaries","/internet/glossaries.html");
  OO("History","/internet/history.html");
  OO("Intranet","/internet/intranet/");
  OO("Jobs","/internet/jobs/");
} // if (v)

function relate(formName,elementNum,j) {
// relate first to second (and third) menus
// ie change first menu, changes second, then change third
//
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[i] = null; // null out in reverse order (bug workarnd)
    for(i=0;i<a[j].length;i++){
      options[i] = new Option(a[j][i].text,a[j][i].value); 
    }
    options[0].selected = true;
  }
// change third menu
relate2(formName,elementNum,0,1);
 }
} else {
jmp(formName,elementNum);
}
}

function relate2(formName,elementNum,j,fromRelate) {
if(v){
var formNum = getFormNum(formName);
 if (formNum>=0) {
  // find first menu's selection
  // fromRelate means "coming from relate function?" 
  //   then increment formNum so k refers to first form, 
  //   not the nonexistent one before it (-1)
  if (fromRelate) formNum++; // assumes forms follow each other 
  k = document.forms[formNum-1].elements[elementNum].selectedIndex;
  if(k<0)k=0; // precaution against missing selected in first menu list - abk
  formNum++; // reference next form, assume it follows in HTML
  with (document.forms[formNum].elements[elementNum]) {
    for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
    for(i=0;i<a[k][j].length;i++){
      options[i] = new Option(a[k][j][i].text,a[k][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.all) return;
  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</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="relate2(this.form,0,this.selectedIndex,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.webreference.com">
</FORM></TD>
<TD BGCOLOR="#FFFFFF" VALIGN=MIDDLE><B>---&gt;</B></TD>

<TD>Choose a subtopic:<BR><FORM NAME="f3" METHOD="POST" ACTION="/cgi-bin/redirect.cgi" onSubmit="return false;">
<SELECT NAME="m3" ID="m3" CLASS=saveHistory onChange="jmp(this.form,0)">
<OPTION VALUE="/3d/glossary/">Glossary
<OPTION VALUE="/3d/lesson56/">Lesson56
<OPTION VALUE="/3d/lesson57/">Lesson57
<OPTION VALUE="/3d/lesson58/">Lesson58
<OPTION VALUE="/3d/lesson59/">Lesson59
</SELECT>
<INPUT TYPE=SUBMIT VALUE="Go" onClick="jmp(this.form,0);">
<INPUT TYPE="hidden" NAME="baseurl" VALUE="http://www.java2s.com">
</FORM></TD>

</TR>
</TABLE></CENTER>

</BODY>
</HTML>

           
       








Related examples in the same category

1.2D Related Comboboxes
2.Linked comboboxes
3.Combobox with cell renderer