By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,729 Members | 1,398 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,729 IT Pros & Developers. It's quick & easy.

resize dropdown width while focused

P: n/a
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??

Nov 16 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
evilmousse wrote:
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
>
<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??
Nov 16 '06 #2

P: n/a
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.

Nov 16 '06 #3

P: n/a
evilmousse wrote:
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);"
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

<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.
Nov 16 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.