Mega Code Archive

 
Categories / JavaScript DHTML / GUI Components
 

3D related comboboxes

<HTML> <HEAD> <TITLE>Universal Related Popup Menus / Three Related Menus</TITLE> <BASE HREF="http://www.rntsoft.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.rntsoft.com"> </FORM></TD> </TR> </TABLE></CENTER> </BODY> </HTML>