Prowler wrote:
Well, these aren't links. This is kind of a Frankenapp; we are converting an
AS/400 5250 "green screen" application to a Web app. These selects usually
contain what would be "line options" in the 5250 version, such as "View
Errors," "Edit Details," etc. These commands are then sent back to the 400,
which generates the result page on the fly. Because the application has been
extant for a dozen or so years, and must continue to serve our customer base
(it's a large, 1500 screen IBM-hosted AS/400 EDI application), all of the
backend EDI stuff has to remain identical, while we wrestle with putting a
functioning Web interface on the app. With upwards of 1500 of the 5250
screens in the app to gen properly for the Web, this is a tad daunting.
Interesting, though...
The convention here is not to top post and to trim quoted text.
The only way you will get this is via DHTML. Below is a simple
example, it is intolerant of older browsers but works fine with
recent versions of Firefox or IE - it only requires basic DOM
compliance.
As Lee said, attempting to make controls do things they aren't
intended to will result in either disappointment or a maintenance
nightmare - likely both.
Below is some code that you may be able to use as a substitute
for some option lists, use styles modify the UI and add your
'down arrow' if required.
I've made it so you can have multiple selections, if you like,
replace the textarea with a text input and just replace the
value rather than (conditionally) append to it.
One consequence of having the drop-down open is that any text or
UI item underneath it is obscured until a selection is made.
You may also want to browse Matt Kruze's site for some things
you can do with option lists and text areas.
<URL:http://www.mattkruse.com/javascript/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title> Date Stuff </title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
..optOut, .optOver {
font-family: sans-serif; color: #333366;
background-color: white; padding: 1px 0 0 3px;}
..optOver {background-color: #ccccff;}
..box {border:2px inset #999999; z-index: 100;
position: absolute; top: 0em; width: 10em;}
..cell {width: 10em;}
</style>
<script type="text/javascript">
// Array of options. This format is easier to use
/* var opt = [];
opt[0] = 'option 0';
opt[1] = 'option 1';
opt[2] = 'option 2';
opt[3] = 'option 3';
opt[4] = 'option 4';
*/
// But this format is more concise and likely faster
// to initialise
var opt = [
'Option 0','Option 1','Edit details','View errors','Option 4',
'Option 5','Option 6','Option 7','Option 8'
];
function buildOptList(x) {
// Build the option list
var d = document.getElementById(x);
var i = opt.length;
while (i--) {
var oDiv = document.createElement('div');
oDiv.id = 'opt-' + i;
oDiv.className = 'optOut';
oDiv.onmouseover = function () {
this.className = 'optOver' };
oDiv.onmouseout = function () {
this.className = 'optOut' };
oDiv.onclick = function () {
addOption(this,'optionsSelected')};
oDiv.appendChild(document.createTextNode(opt[i]));
d.insertBefore(oDiv, d.firstChild);
}
}
function addOption(x,s){
// If this is the only visible option, show rest of list
// Otherwise, add this value to list
// and hide all other options
var xP = x.parentNode;
while (!/div/i.test(xP.nodeName)) {
xP = xP.parentNode;
}
// If just opening list, do nothing
if (toggleOpts(xP,x)) {
return;
}
/*
// If replacing the value, use this:
document.forms['Selections'].elements[s].value =
x.firstChild.data;
// And close function here
}
*/
// Otherwise, add selected option to textarea
var sel = x.firstChild.data;
var tgt = document.forms['Selections'].elements[s];
// Only add if not there already
if (!tgt.value.match(sel)) {
// Prepend newline if textarea value is empty
(tgt.value)? tgt.value += '\n' + sel : tgt.value += sel;
}
}
function toggleOpts(p,c){
// Shows/hides all the child divs of 'p'
// Does not hide current div 'c'
var x = p.getElementsByTagName('div');
var open = false;
var i = x.length;
var n;
while (i--) {
n = x[i];
if (n != c) {
if (n.style.display == 'none') {
// If 'dropping down' options, open is true
open = true;
n.style.display = '';
} else {
n.style.display = 'none';
}
}
}
// If closing up options, open stays false
return open;
}
</script>
</head>
<body>
<table border="0">
<tr><td class="cell" valign="top">
<p>Select an option</p><div style="position: relative;">
<div id="optList_01" class="box"></div>
</div>
</td><td valign="top">
<div style="padding-top: 6em;">-->></div>
</td><td valign="top">
<form action="" name="Selections">
<p>Selected options</p><div>
<textarea name="optionsSelected"
id="selectedOptions"
cols="20" rows="5"></textarea><br>
<input type="reset"></div>
</form>
</td></tr></table>
<p>Here is some more text that is hidden when
the options are open</p>
<script type="text/javascript">
buildOptList('optList_01');
</script>
</body>
</html>
--
Rob
