| HTML |
Lotech Solutions (
 www.lotechsolutions.com)
|
Pop-up menu example using JS
Topic status automatically displays here - do not remove.
Bookmark
this topic
Print this
topicThe following is an example of a dynamic pop-up menu created using JavaScript.
<HTML><HEAD>
<style>
H1
{
COLOR: #000066;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 18px;
FONT-WEIGHT: bold
}
H2
{
COLOR: #000066;
FONT-FAMILY: Arial,Verdana, Helvetica;
FONT-SIZE: 14px;
FONT-WEIGHT: bold
}
H3
{
COLOR: #000066;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 18px;
FONT-WEIGHT: bold
}
H4
{
COLOR: #000066;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 16px;
FONT-WEIGHT: bold
}
H5
{
COLOR: #000066;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 13px;
FONT-WEIGHT: bold
}
H6
{
COLOR: #000066;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 10px;
FONT-WEIGHT: bold
}
H7
{
COLOR: #000066;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 10px;
FONT-WEIGHT: bold
}
A:link
{
COLOR: #3366cc;
FONT-FAMILY: Verdana, Arial;
FONT-SIZE: 12px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
A:visited
{
COLOR: #3366cc;
FONT-FAMILY: Verdana, Arial;
FONT-SIZE: 12px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
A:hover
{
COLOR: #000066;
FONT-FAMILY: Verdana, Arial;
FONT-SIZE: 12px;
FONT-WEIGHT: bold;
TEXT-DECORATION: none
}
P
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
P.header
{
COLOR: #006400px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 14px
}
P.AuthorNotes
{
COLOR: #0000ff;
FONT-FAMILY: Times New Roman,verdana, Arial;
FONT-STYLE: italic;
FONT-SIZE: 14px
}
DL
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
OL
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
UL
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
LI
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
BLOCKQUOTE
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
SPAN
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
TD
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 11px
}
TD.cType
{
COLOR: #0000f0px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 11px
}
TD.Text
{
COLOR: maroon;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 13px
}
THEAD
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
TFOOT
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
TH
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
TABLE
{
COLOR: #000000px;
FONT-FAMILY: Verdana, Helvetica, Arial;
FONT-SIZE: 12px
}
BODY
{
BACKGROUND-COLOR: #faf0e6
}
</style>
<TITLE>Editable Menu - Subrata Chakrabarty</TITLE>
<SCRIPT LANGUAGE="JavaScript">
/************* FIXED WIDTH, Left to Right Flow *****************
Editable Dropdown in the format:
Left Aligned,
Fixed Width,
Left To Right Flow
* use .innerText instead of .Text
*****************************************/
/*
—-Variables required for
fnChangeHandler() & fnKeyPressHandler()
for Editable Dropdowns—
Subrata Chakrabarty 3.Jan.2003
*/
var PreviousSelectIndex = 0px;
/* Contains the Previously Selected Index */
var SelectIndex = 0px;
/* Contains the Currently Selected Index */
var SelectChange = 'MANUAL_CLICK';
/* Indicates whether Change in dropdown selected value */
/* was due to a Manual Click */
/* or due to System properties of dropdown */
/*
——-Functions required for Editable Dropdowns
— Subrata Chakrabarty 3.Jan.2003
*/
function fnChangeHandler()
{
PreviousSelectIndex = SelectIndex;
/* Contains the Previously Selected Index */
SelectIndex = document.frmName.lstDropDown.options.selectedIndex;
/* Contains the Currently Selected Index */
if ((PreviousSelectIndex == (document.frmName.lstDropDown.options.length - 1)) && (SelectIndex != (document.frmName.lstDropDown.options.length - 1))&&(SelectChange != 'MANUAL_CLICK'))
/* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */
{
document.frmName.lstDropDown[(document.frmName.lstDropDown.options.length - 1)].selected=true;
PreviousSelectIndex = SelectIndex;
SelectIndex = document.frmName.lstDropDown.options.selectedIndex;
SelectChange = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown selected value was due to a Manual Click */
}
}
function fnKeyPressHandler()
{
if(document.frmName.lstDropDown.options.length != 0)
/*if dropdown is not empty*/
if (document.frmName.lstDropDown.options.selectedIndex == (document.frmName.lstDropDown.options.length - 1))
/*if option the Editable field i.e. the last option */
{
var EditString = EditMe.innerText;
/* Contents of Editable Option */
if (EditString == "—?—")
/* On backspace on default value of Editable option make Editable option Null */
EditString = "";
if ((window.event.keyCode==8 || window.event.keyCode==127))
/* To handle backspace - Subrata Chakrabarty 3.Jan.2003 */
{
EditString = EditString.substring(0,EditString.length-1);
/* Decrease length of string by one from right */
SelectChange = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown
selected value was due to a Manual Click */
}
/* Check for allowable Characters */
/*
The various characters allowable for entry into Editable option..
may be customized by minor modifications in the code (if condition below)
(you need to know the keycode/ASCII value of the character to be allowed/disallowed.
- Subrata Chakrabarty 3.Jan.2003
*/
if ((window.event.keyCode==46) || (window.event.keyCode>47 && window.event.keyCode<59)||(window.event.keyCode>62 && window.event.keyCode<127) ||(window.event.keyCode==32))
/* To handle addition of a character - Subrata Chakrabarty 3.Jan.2003 */
{
EditString+=String.fromCharCode(window.event.keyCode);
/*Concatenate Enter character to Editable string*/
/* The following portion handles the "automatic Jump" bug*/
/*
The "automatic Jump" bug (Description):
If a alphabet is entered (while editing)
...which is contained as a first character in one of the read-only options
..the focus automatically "jumps" to the read-only option
(— this is a common property of normal dropdowns
..but..is undesirable while editing).
*/
var i=0px;
var EnteredChar = String.fromCharCode(window.event.keyCode);
var UpperCaseEnteredChar = EnteredChar;
var LowerCaseEnteredChar = EnteredChar;
if(((window.event.keyCode)>=97)&&((window.event.keyCode)<=122))
/*if EnteredChar lowercase*/
UpperCaseEnteredChar = String.fromCharCode(window.event.keyCode - 32);
/*This is UpperCase*/
if(((window.event.keyCode)>=65)&&((window.event.keyCode)<=90))
/*if EnteredChar is UpperCase*/
LowerCaseEnteredChar = String.fromCharCode(window.event.keyCode + 32);
/*This is lowercase*/
for (i=0px;i<(document.frmName.lstDropDown.options.length-1);i++)
{ var ReadOnlyString = document.frmName.lstDropDown[i].innerText;
var FirstChar = ReadOnlyString.substring(0,1);
if((FirstChar == UpperCaseEnteredChar)||(FirstChar == LowerCaseEnteredChar))
{
SelectChange = 'AUTO_SYSTEM';
/* Indicates that the Change in dropdown
selected value was due to System properties of dropdown */
break;
}
else
{
SelectChange = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown
selected value was due to a Manual Click */
}
}
}
/*Set new value of edited string into the Editable field */
EditMe.innerText = EditString;
EditMe.value = EditString;
return false;
}
return true;
}
/*—————————————————————————————————————————————— Subrata Chakrabarty 3.Jan.2003 */
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
/*************** RIGHT TO LEFT FLOW , Fixed Width *************
Editable Dropdown in the format:
RIGHT Aligned,
Fixed Width,
RIGHT TO LEFT FLOW
(Content flows right to left)
* use .innerText instead of .Text
add / include
style="direction:rtl;"
into the SELECT option
(in the BODY of your HTML document), i.e.,
<SELECT style="direction:rtl;"
... leaving the rest of the parameters as they are.
*****************************************/
/*
—-Variables required for
fnChangeHandler_rtl() & fnKeyPressHandler_rtl()
for Editable Dropdowns—
Subrata Chakrabarty 3.Jan.2003
*/
var PreviousSelectIndex_rtl = 0px;
/* Contains the Previously Selected Index */
var SelectIndex_rtl = 0px;
/* Contains the Currently Selected Index */
var SelectChange_rtl = 'MANUAL_CLICK';
/* Indicates whether Change in dropdown selected value */
/* was due to a Manual Click */
/* or due to System properties of dropdown */
/*
——-Functions required for Editable Dropdowns
— Subrata Chakrabarty 3.Jan.2003
*/
function fnChangeHandler_rtl()
{
PreviousSelectIndex_rtl = SelectIndex_rtl;
/* Contains the Previously Selected Index */
SelectIndex_rtl = document.frmName.lstDropDown_rtl.options.selectedIndex;
/* Contains the Currently Selected Index */
if ((PreviousSelectIndex_rtl == (document.frmName.lstDropDown_rtl.options.length - 1)) && (SelectIndex_rtl != (document.frmName.lstDropDown_rtl.options.length - 1))&&(SelectChange_rtl != 'MANUAL_CLICK'))
/* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */
{
document.frmName.lstDropDown_rtl[(document.frmName.lstDropDown_rtl.options.length - 1)].selected=true;
PreviousSelectIndex_rtl = SelectIndex_rtl;
SelectIndex_rtl = document.frmName.lstDropDown_rtl.options.selectedIndex;
SelectChange_rtl = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown selected value was due to a Manual Click */
}
}
function fnKeyPressHandler_rtl()
{
if(document.frmName.lstDropDown_rtl.options.length != 0)
/*if dropdown is not empty*/
if (document.frmName.lstDropDown_rtl.options.selectedIndex == (document.frmName.lstDropDown_rtl.options.length - 1))
/*if option the Editable field i.e. the last option */
{
var EditString = EditMe_rtl.innerText;
/* Contents of Editable Option */
if (EditString == "—?—")
/* On backspace on default value of Editable option make Editable option Null */
EditString = "";
if ((window.event.keyCode==8 || window.event.keyCode==127))
/* To handle backspace - Subrata Chakrabarty 3.Jan.2003 */
{
EditString = EditString.substring(0,EditString.length-1);
/* Decrease length of string by one from right */
SelectChange_rtl = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown
selected value was due to a Manual Click */
}
/* Check for allowable Characters */
/*
The various characters allowable for entry into Editable option..
may be customized by minor modifications in the code (if condition below)
(you need to know the keycode/ASCII value of the character to be allowed/disallowed.
- Subrata Chakrabarty 3.Jan.2003
*/
if ((window.event.keyCode==46) || (window.event.keyCode>47 && window.event.keyCode<59)||(window.event.keyCode>62 && window.event.keyCode<127) ||(window.event.keyCode==32))
/* To handle addition of a character - Subrata Chakrabarty 3.Jan.2003 */
{
EditString+=String.fromCharCode(window.event.keyCode);
/*Concatenate Enter character to Editable string*/
/* The following portion handles the "automatic Jump" bug*/
/*
The "automatic Jump" bug (Description):
If a alphabet is entered (while editing)
...which is contained as a first character in one of the read-only options
..the focus automatically "jumps" to the read-only option
(— this is a common property of normal dropdowns
..but..is undesirable while editing).
*/
var i=0px;
var EnteredChar = String.fromCharCode(window.event.keyCode);
var UpperCaseEnteredChar = EnteredChar;
var LowerCaseEnteredChar = EnteredChar;
if(((window.event.keyCode)>=97)&&((window.event.keyCode)<=122))
/*if EnteredChar lowercase*/
UpperCaseEnteredChar = String.fromCharCode(window.event.keyCode - 32);
/*This is UpperCase*/
if(((window.event.keyCode)>=65)&&((window.event.keyCode)<=90))
/*if EnteredChar is UpperCase*/
LowerCaseEnteredChar = String.fromCharCode(window.event.keyCode + 32);
/*This is lowercase*/
for (i=0px;i<(document.frmName.lstDropDown_rtl.options.length-1);i++)
{ var ReadOnlyString = document.frmName.lstDropDown_rtl[i].innerText;
var FirstChar = ReadOnlyString.substring(0,1);
if((FirstChar == UpperCaseEnteredChar)||(FirstChar == LowerCaseEnteredChar))
{
SelectChange_rtl = 'AUTO_SYSTEM';
/* Indicates that the Change in dropdown
selected value was due to System properties of dropdown */
break;
}
else
{
SelectChange_rtl = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown
selected value was due to a Manual Click */
}
}
}
/*Set new value of edited string into the Editable field */
EditMe_rtl.innerText = EditString;
EditMe_rtl.value = EditString;
return false;
}
return true;
}
/*—————————————————————————————————————————————— Subrata Chakrabarty 3.Jan.2003 */
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
/*********** VARIABLE WIDTH *************
Editable Dropdown in the format:
Left Aligned,
VARIABLE WIDTH,
Left To Right Flow
* USE the ".text" with ".text"
(in the HEAD (SCRIPT) of your HTML document)
each & every occurence of .text should
be replaced with .text
*****************************************/
/*
—-Variables required for
fnChangeHandler_vw() & fnKeyPressHandler_vw()
for Editable Dropdowns—
Subrata Chakrabarty 3.Jan.2003
*/
var PreviousSelectIndex_vw = 0px;
/* Contains the Previously Selected Index */
var SelectIndex_vw = 0px;
/* Contains the Currently Selected Index */
var SelectChange_vw = 'MANUAL_CLICK';
/* Indicates whether Change in dropdown selected value */
/* was due to a Manual Click */
/* or due to System properties of dropdown */
/*
——-Functions required for Editable Dropdowns
— Subrata Chakrabarty 3.Jan.2003
*/
function fnChangeHandler_vw()
{
PreviousSelectIndex_vw = SelectIndex_vw;
/* Contains the Previously Selected Index */
SelectIndex_vw = document.frmName.lstDropDown_vw.options.selectedIndex;
/* Contains the Currently Selected Index */
if ((PreviousSelectIndex_vw == (document.frmName.lstDropDown_vw.options.length - 1)) && (SelectIndex_vw != (document.frmName.lstDropDown_vw.options.length - 1))&&(SelectChange_vw != 'MANUAL_CLICK'))
/* To Set value of Index variables - Subrata Chakrabarty 3.Jan.2003 */
{
document.frmName.lstDropDown_vw[(document.frmName.lstDropDown_vw.options.length - 1)].selected=true;
PreviousSelectIndex_vw = SelectIndex_vw;
SelectIndex_vw = document.frmName.lstDropDown_vw.options.selectedIndex;
SelectChange_vw = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown selected value was due to a Manual Click */
}
}
function fnKeyPressHandler_vw()
{
if(document.frmName.lstDropDown_vw.options.length != 0)
/*if dropdown is not empty*/
if (document.frmName.lstDropDown_vw.options.selectedIndex == (document.frmName.lstDropDown_vw.options.length - 1))
/*if option the Editable field i.e. the last option */
{
var EditString = EditMe_vw.text;
/* Contents of Editable Option */
if (EditString == "—?—")
/* On backspace on default value of Editable option make Editable option Null */
EditString = "";
if ((window.event.keyCode==8 || window.event.keyCode==127))
/* To handle backspace - Subrata Chakrabarty 3.Jan.2003 */
{
EditString = EditString.substring(0,EditString.length-1);
/* Decrease length of string by one from right */
SelectChange_vw = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown
selected value was due to a Manual Click */
}
/* Check for allowable Characters */
/*
The various characters allowable for entry into Editable option..
may be customized by minor modifications in the code (if condition below)
(you need to know the keycode/ASCII value of the character to be allowed/disallowed.
- Subrata Chakrabarty 3.Jan.2003
*/
if ((window.event.keyCode==46) || (window.event.keyCode>47 && window.event.keyCode<59)||(window.event.keyCode>62 && window.event.keyCode<127) ||(window.event.keyCode==32))
/* To handle addition of a character - Subrata Chakrabarty 3.Jan.2003 */
{
EditString+=String.fromCharCode(window.event.keyCode);
/*Concatenate Enter character to Editable string*/
/* The following portion handles the "automatic Jump" bug*/
/*
The "automatic Jump" bug (Description):
If a alphabet is entered (while editing)
...which is contained as a first character in one of the read-only options
..the focus automatically "jumps" to the read-only option
(— this is a common property of normal dropdowns
..but..is undesirable while editing).
*/
var i=0px;
var EnteredChar = String.fromCharCode(window.event.keyCode);
var UpperCaseEnteredChar = EnteredChar;
var LowerCaseEnteredChar = EnteredChar;
if(((window.event.keyCode)>=97)&&((window.event.keyCode)<=122))
/*if EnteredChar lowercase*/
UpperCaseEnteredChar = String.fromCharCode(window.event.keyCode - 32);
/*This is UpperCase*/
if(((window.event.keyCode)>=65)&&((window.event.keyCode)<=90))
/*if EnteredChar is UpperCase*/
LowerCaseEnteredChar = String.fromCharCode(window.event.keyCode + 32);
/*This is lowercase*/
for (i=0px;i<(document.frmName.lstDropDown_vw.options.length-1);i++)
{ var ReadOnlyString = document.frmName.lstDropDown_vw[i].text;
var FirstChar = ReadOnlyString.substring(0,1);
if((FirstChar == UpperCaseEnteredChar)||(FirstChar == LowerCaseEnteredChar))
{
SelectChange_vw = 'AUTO_SYSTEM';
/* Indicates that the Change in dropdown
selected value was due to System properties of dropdown */
break;
}
else
{
SelectChange_vw = 'MANUAL_CLICK';
/* Indicates that the Change in dropdown
selected value was due to a Manual Click */
}
}
}
/*Set new value of edited string into the Editable field */
EditMe_vw.text = EditString;
EditMe_vw.value = EditString;
return false;
}
return true;
}
/*—————————————————————————————————————————————— Subrata Chakrabarty 3.Jan.2003 */
</SCRIPT>
</HEAD>
<BODY>
<HR>
<BR>
<center><H1><font SIZE="5" COLOR = "#ff0000" FACE="monospace,sans-serif,serif,fantasy,helvetica,arial,geneva"><B><U>EDITABLE DROPDOWN</U></B></font></H1></center>
<center><H1><font SIZE="2" COLOR = "#008b8b" FACE="helvetica,arial,geneva"><B><i>( DropDown with last option as Editable & the rest as readonly )</i></B></font></H1></center>
<HR>
<BR>
<H2>Author: <font COLOR = "#ff0000" FACE="helvetica,arial,geneva"><B>Subrata Chakrabarty</B></font> </H2>
<HR>
<BR>
<H2>Date written(DD/MMM/YYYY): 03/Jan/2003 (First Version)<BR>
01/May/2003 (Modified)</H2>
<H2>Declaration</H2>
<P> Please test the Code thoroughly before implementation as it may be browser dependent. This code on Editable Dropdowns has been tested thoroughly on Internet Explorer 5.5 & 6.0.</P>
<P>Subrata Chakrabarty</P>
<H2>Target readers : Developers</H2>
<H2>Keywords : Editable,Dropdown,Edit</H2>
<P class=AuthorNotes>Technologies used: Javascript,HTML</P>
<BR>
<HR>
<BR>
<H2><u>EDITABLE DROPDOWN:</u></H2>
<BR>
<p>
<P>
<table BORDER=1 bordercolor="#99cccc" ALIGN="center" WIDTH="90%" CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR="#ccffff"><font color = "#000000" FACE="helvetica,arial,geneva" size=5><b><u>Editable Drop down</u></b> -<i>by Subrata Chakrabarty.</i></font>
<p><font size ="4" COLOR = "#ff0000" FACE="helvetica,arial,geneva"><b>FEATURES:</b></font>
<br><br></FONT></p></td></tr>
<tr><td BGCOLOR="#ccffff" ALIGN=middle><textarea id=txt rows=15 readOnly wrap=VIRTUAL cols=110>Dear Reader,
I have written a set of javascript functions for "Editable Dropdowns"...
FEATURES:
1. Only the last option is Editable.
2. Rest of the options are read-only (as in a normal dropdown).
3. The Editable Dropdown can be customized to the following formats:
a) Editable Dropdown in the format:
Left Aligned,
Fixed Width,
Left To Right Flow
b) Editable Dropdown in the format:
RIGHT Aligned,
Fixed Width,
RIGHT TO LEFT FLOW
(Content flows right to left)
c) Editable Dropdown in the format:
Left Aligned,
VARIABLE WIDTH,
Left To Right Flow
4. Does not tolerate the famous "Backspace" bug or "automatic Jump" bug.
5. The characters to be allowed/disallowed in Editable Option can be customized.
6. Overcomes all the bugs I have come across in other logic/codes for Editable dropdowns.
It works beautifully !!!
These set of functions do NOT have the following bugs
commonly associated with "Editable Drop-downs" :
1. "Backspace" bug :
A "Backspace" keypress in the dropdown
works like a BACK button on Internet Explorer !!
(...hence editing is hampered )
2. The "automatic Jump" bug:
If a alphabet is entered (while editing)
... which is contained as a first character
... in one of the read-only options
... the focus automatically "jumps" to the read-only option
(* this is a common property of normal dropdowns
..but..is undesirable while editing).
3. CAPS bug :
Values Entered are always displayed in CAPS ....lower case not possible.
4. Gives Javascript error when dropdown is empty & key is pressed.
5. Doesn't allow the certain special characters..
(this can be customized in my code)
The new set of functions I have written do not have any of these bugs,also the various characters allowable for entry into Editable option..may be customized by minor modifications in the code (you need to know the keycode/ASCII value of the character to be allowed/disallowed).
Hope you will find this code useful.
You can contact me anytime for clarifications/suggestions.
THANKING YOU,
WITH REGARDS,
Subrata Chakrabarty.
chakrabartys@yahoo.com
Jan.2003,Bangalore, India.
See Also
Lotech Solutions' Tips, Tricks, and Procedures
email webmasterCopyright Lotech Solutions. All rights reserved.