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>---></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>---></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
