Connecting Tech Pros Worldwide Forums | Help | Site Map

resize dropdown width while focused

evilmousse
Guest
 
Posts: n/a
#1: Nov 16 '06
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??


mick white
Guest
 
Posts: n/a
#2: Nov 16 '06

re: resize dropdown width while focused


evilmousse wrote:
Quote:
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>
You need the "units", ITC "px".

function ResetListBoxWidth(obj,width){
obj.style.width = width +"px";
}

Personally, I wouldn't use "width" as a parameter

function ResetListBoxWidth(obj,wideness){
obj.style.width = wideness +"px";
}

<select id="ddltest" style="width:200px;"
onfocus="ChangeListBoxWidth(this);"
onchange="ResetListBoxWidth(this,200);">

I would use lower case for the event handlers, onchange makes more sense
ITC.

Mick
Quote:
>
<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??
>
evilmousse
Guest
 
Posts: n/a
#3: Nov 16 '06

re: resize dropdown width while focused


thanks for the response. first off, onchange can't be the
width-resetting option because the user may not change the selecteditem
after reading the full contents. i want the width to reset when they
move on to any other control, regardless of change, so onblur.

i've tried your suggestions and i'm getting different results.. still
not 100% tho. here's my amended code:

<html>
<script language="javascript">
function ChangeListBoxWidth(obj)
{
alert(obj.style.width);
obj.style.width = "500px";
alert(obj.style.width);
}
function ResetListBoxWidth(obj,wideness)
{
obj.style.width = wideness +"px";
}
</script>

<select id="ddltest" style="width:200px;"

onfocus="javascript:ChangeListBoxWidth(this);"

onblur="javascript:ResetListBoxWidth(this,200);">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
</select>
</html>


now with the alerts commented out, firefox behaves correctly with both
mouse and tabbing (unfortunately my app's viewed in IE...) but ie,
while resizing the dropdown correctly now, still loses track of the
selectedindex and points to none in the list.

uncommenting both alerts still breaks everything in both ie and
firefox: i can see the list gets momentarily wider only to reset
itself.

the alerts still display the appropriate info, and even before i coded
in the +"px", they displayed such, so i knew the unit was being taken
implicity already.

mick white
Guest
 
Posts: n/a
#4: Nov 16 '06

re: resize dropdown width while focused


evilmousse wrote:
Quote:
thanks for the response. first off, onchange can't be the
width-resetting option because the user may not change the selecteditem
after reading the full contents. i want the width to reset when they
move on to any other control, regardless of change, so onblur.
>
i've tried your suggestions and i'm getting different results.. still
not 100% tho. here's my amended code:
>
<html>
<script language="javascript">
function ChangeListBoxWidth(obj)
{
alert(obj.style.width);
obj.style.width = "500px";
alert(obj.style.width);
}
function ResetListBoxWidth(obj,wideness)
{
obj.style.width = wideness +"px";
}
</script>
>
<select id="ddltest" style="width:200px;"
>
onfocus="javascript:ChangeListBoxWidth(this);"
onfocus="ChangeListBoxWidth(this);"
Quote:
onblur="javascript:ResetListBoxWidth(this,200);">
onblur="ResetListBoxWidth(this,200);"

Works for me in FF2 & Safari 1.3 (both MAC);

Note no "javascript' protocol needed.

Mick

Quote:
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
</select>
</html>
>
>
now with the alerts commented out, firefox behaves correctly with both
mouse and tabbing (unfortunately my app's viewed in IE...) but ie,
while resizing the dropdown correctly now, still loses track of the
selectedindex and points to none in the list.
>
uncommenting both alerts still breaks everything in both ie and
firefox: i can see the list gets momentarily wider only to reset
itself.
>
the alerts still display the appropriate info, and even before i coded
in the +"px", they displayed such, so i knew the unit was being taken
implicity already.
>
Closed Thread