hi all,
i've built this widget to simulate the look of a <select size="1" multiple>, but without the multiple capability. reason being i wanted a <select> list with up & down arrows, but of size 1.
the problem is i can't get the buttons to be stacked on top of each other...i've tried setting their container <span> to a width of 0px or 1px, but no luck.
there's two versions: one with <input type="button"> for the buttons, another with <span> for the buttons...both with their own alignment problem.
any ideas on how i can solve this? i've been trying everything i know!
here's version 1:
for version two, simply replace function NumberWidget() with this:
=========================================================
if (!succeed) try();
-jeff
i've built this widget to simulate the look of a <select size="1" multiple>, but without the multiple capability. reason being i wanted a <select> list with up & down arrows, but of size 1.
the problem is i can't get the buttons to be stacked on top of each other...i've tried setting their container <span> to a width of 0px or 1px, but no luck.
there's two versions: one with <input type="button"> for the buttons, another with <span> for the buttons...both with their own alignment problem.
any ideas on how i can solve this? i've been trying everything i know!
here's version 1:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 FINAL//EN">
<html>
<head>
<title>NumberWidget</title>
<meta name="author" content="?">
<meta name="keywords" content="?">
<meta name="description" content="?">
<script language="javascript">
function NumberWidget(name, min, max, value) {
min = min?min:0;
max = max?max:100;
value = (!isNaN(value)?value:"");
// store the object's props
this.name = name;
this.min = min;
this.max = max;
this.html = '<span>' +
'<span>' +
'<input type="text" name="'+name+'" value="'+value+'" class="nw_text" size="'+max.toString().length+'"/>' +
'</span>' +
'<span>' +
'<input type="button" class="nw_btn" value="5" onclick="nwIncr(\''+name+'\');"/>' +
'<input type="button" class="nw_btn" value="6" onclick="nwDecr(\''+name+'\');"/>' +
'</span>' +
'</span>';
return this;
}
function writeNW(name) {
NW = getNW(name);
document.writeln(NW.html);
}
function getNW(name) {
for (x = 0; x < arNW.length; x++) {
if (arNW[x].name == name)
return arNW[x];
}
}
function getFormEl(name) {
var e = document.forms[0].elements;
for (x = 0; x < e.length; x++) {
if (e[x].name && e[x].name.toLowerCase() == name.toLowerCase())
return e[x];
}
}
function nwIncr(name) {
var el = getFormEl(name);
NW = getNW(name);
if (el.value < NW.max) el.value = ++el.value;
}
function nwDecr(name) {
var el = getFormEl(name);
NW = getNW(name);
if (el.value > NW.min) el.value = --el.value;
}
var arNW = [
new NumberWidget("hh",1,12,1),
new NumberWidget("mm",0,59,0),
new NumberWidget("ss",0,59,0)
];
</script>
<style type="text/css">
.nw_text {
border:1px solid threedface;
margin:0;
}
.nw_btn {
width:15px;
height:10px;
border:1px outset threedface;
background-color:threedface;
font:normal 8px webdings;
line-height:6px;
text-align:center;
cursor:default;
}
</style>
</head>
<body>
<form action="" method="post">
<script language="javascript">writeNW("hh");
document.write(":");
writeNW("mm");
document.write(":");
writeNW("ss");</script>
</form>
</body>
</html>for version two, simply replace function NumberWidget() with this:
Code:
function NumberWidget(name, min, max, value) {
min = min?min:0;
max = max?max:100;
value = (!isNaN(value)?value:"");
// store the object's props
this.name = name;
this.min = min;
this.max = max;
this.html = '<span>' +
'<span>' +
'<input type="text" name="'+name+'" value="'+value+'" class="nw_text" size="'+max.toString().length+'"/>' +
'</span>' +
'<span>' +
'<span class="nw_btn" style="clear:right;" onclick="nwIncr(\''+name+'\');">5</span>' +
'<span class="nw_btn" onclick="nwDecr(\''+name+'\');">6</span>' +
'</span>' +
'</span>';
return this;
}if (!succeed) try();
-jeff