E
evilmousse
my app has some particularly long dropdownlist items. rather than
taking up such wide realestate, i'm looking to have the dropdown's
width grow upon focus and shrink back on lose focus. however i'm
meeting all kinds of other odd occurrances and i'm not sure what's
going on.
here's a simple example:
<html>
<script language="javascript">
function ChangeListBoxWidth(obj)
{
//alert(obj.style.width);
obj.style.width = "500px";
//alert(obj.style.width);
}
function ResetListBoxWidth(obj,width)
{
obj.style.width = width;
}
</script>
<select id="ddltest" style="width:200px;
"OnFocus="javascript:ChangeListBoxWidth(this);"
OnBlur="javascript:ResetListBoxWidth(this,200);">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</html>
As written above, the correct behavior will be had while tabbing
through the controls, but when using mouseclicks, though the select
will resize, it somehow loses the selectedindex entirely and ends up
pointing to none of its' contents.
if you uncomment just the FIRST alert, prior to the resize, it again
seems to work tabbing through. clicking will work once, and then not
again; in fact, the second time onward, one can't keep focus on the
control, after confirming the alert, focus always goes back to the
addressbar.
if you uncomment BOTH alerts, they display the correct values, 200 and
500px respectively, but the resize never happens, tabbing OR mouse. in
fact, any code after the resize command seems to negate it's effect.
what the hell's going on here??
taking up such wide realestate, i'm looking to have the dropdown's
width grow upon focus and shrink back on lose focus. however i'm
meeting all kinds of other odd occurrances and i'm not sure what's
going on.
here's a simple example:
<html>
<script language="javascript">
function ChangeListBoxWidth(obj)
{
//alert(obj.style.width);
obj.style.width = "500px";
//alert(obj.style.width);
}
function ResetListBoxWidth(obj,width)
{
obj.style.width = width;
}
</script>
<select id="ddltest" style="width:200px;
"OnFocus="javascript:ChangeListBoxWidth(this);"
OnBlur="javascript:ResetListBoxWidth(this,200);">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</html>
As written above, the correct behavior will be had while tabbing
through the controls, but when using mouseclicks, though the select
will resize, it somehow loses the selectedindex entirely and ends up
pointing to none of its' contents.
if you uncomment just the FIRST alert, prior to the resize, it again
seems to work tabbing through. clicking will work once, and then not
again; in fact, the second time onward, one can't keep focus on the
control, after confirming the alert, focus always goes back to the
addressbar.
if you uncomment BOTH alerts, they display the correct values, 200 and
500px respectively, but the resize never happens, tabbing OR mouse. in
fact, any code after the resize command seems to negate it's effect.
what the hell's going on here??