Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #18406 > unrolled thread

<select> Drop-Down List not 'dropping'

Back to article view | Back to comp.lang.javascript

Contents

  <select> Drop-Down List not 'dropping' "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-08 13:17 -0700
    Re: <select> Drop-Down List not 'dropping' "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-02-08 22:49 +0100
      Re: <select> Drop-Down List not 'dropping' "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-08 16:18 -0700
        Re: <select> Drop-Down List not 'dropping' "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-09 18:49 -0700
          Re: <select> Drop-Down List not 'dropping' Gregor Kofler <usenet@gregorkofler.com> - 2013-02-10 09:36 +0100
            Re: <select> Drop-Down List not 'dropping' "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-02-10 10:08 +0100
          Re: <select> Drop-Down List not 'dropping' "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-02-10 10:05 +0100
            Re: <select> Drop-Down List not 'dropping' "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-10 08:17 -0700
              Re: <select> Drop-Down List not 'dropping' "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-10 10:06 -0700
                Re: <select> Drop-Down List not 'dropping' SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2013-02-10 18:59 +0100
                  Re: <select> Drop-Down List not 'dropping' "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-02-10 19:40 +0100
                    Re: <select> Drop-Down List not 'dropping' SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2013-02-11 02:59 +0100
                  Re: <select> Drop-Down List not 'dropping' "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-10 12:03 -0700
                    Re: <select> Drop-Down List not 'dropping' SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2013-02-11 02:39 +0100
                Re: <select> Drop-Down List not 'dropping' "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-02-10 19:31 +0100
                  Re: <select> Drop-Down List not 'dropping' "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-10 11:45 -0700
                    Re: <select> Drop-Down List not 'dropping' "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-10 17:50 -0700
                      Drop Down Works ! , But .... "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-12 10:44 -0700
                        Re: Drop Down Works ! , But .... "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2013-02-12 19:46 +0100
                        Re: [CSS] Drop Down Works ! , But .... SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2013-02-13 01:57 +0100
                          Re: [CSS] Drop Down Works ! , But .... "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-12 18:23 -0700
                            Re: [CSS] Drop Down Works ! , But .... SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2013-02-13 15:37 +0100
                              Re: [CSS] Drop Down Works ! , But .... "Mel Smith" <med_cutout_syntel@aol.com> - 2013-02-13 09:35 -0700

Page 1 of 2  [1] 2  Next page →

#18406 — <select> Drop-Down List not 'dropping'

Hi:

    I use JS functions in my client's browser to move thru several <input> 
and <select> fields.

    When I programmatically *set focus* to a <select> field, I wish its 
drop-down list to automagically 'drop down'.

    It does not do this until I 'click' on the <select> element first.

    (btw, I already set the background color of a 'focussed' field to pink, 
then 'onblur' I re-set the background to the default background color)

Question: Is there a programmatic way to 'drop-down' the <select> list as 
soon as it gains focus without clicking first.

Thank you.
-- 
Mel Smith

[toc] | [next] | [standalone]

#18407

Mel Smith wrote on 08 feb 2013 in comp.lang.javascript:

> Hi:
> 
>     I use JS functions in my client's browser to move thru several
>     <input> and <select> fields.
> 
>     When I programmatically *set focus* to a <select> field, I wish
>     its  drop-down list to automagically 'drop down'.

Easy, you just need a magic wand.

>     It does not do this until I 'click' on the <select> element first.
[..]
> 
> Question: Is there a programmatic way to 'drop-down' the <select> list
> as soon as it gains focus without clicking first.

You can expand, but then need some absolute positioning:

<button 
onclick='document.getElementById("mySelect").size=15'>
expand</button>

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#18408

Evertjan said

>
> You can expand, but then need some absolute positioning:
>
> <button
> onclick='document.getElementById("mySelect").size=15'>
> expand</button>

Evertjan:

    I'll try the 'size=' clause this weekend.

Thank you !

-Mel

[toc] | [prev] | [next] | [standalone]

#18423

Evertjan:

    I managed to get the <select> list to drop down on focus. However (as 
the example below shows),  the set of inputs on the same line as the select 
get 'pushed down' and destrop the screen layout.

Can you give further guidance please ??

Thank you.

-Mel Smith

********************************
<!DOCTYPE html>
<head>
<title></title>

<script type="text/javascript">

function setFocusSize(selobj) {
if (selobj.id == "imth") selobj.size = "13" ;
}

function resetFocusSize(selobj) {
if (selobj.id == "imth") selobj.size="1" ;
}
</script>
</head>

<body>

<input type="text" size="4" maxlength="4" value="1234" />

<select id="imth" size="1" onfocus="setFocusSize(this);" 
onblur="resetFocusSize(this);">
   <option value="XXX" disabled="disabled">Pick Month</option>
   <option value="Jan">January</option>
   <option value="Feb">February</option>
   <option value="Mar">March</option>
   <option value="Apr">April</option>
   <option value="May">May</option>
   <option value="Jun">June</option>
   <option value="Jul">July</option>
   <option value="Aug">August</option>
   <option value="Sep">September</option>
   <option value="Oct">October</option>
   <option value="Nov">November</option>
   <option value="Dec">December</option>
</select>

<input type="text" size="10" maxlength="10" value="abcdefghij" />

</body>
</html>
***************************

[toc] | [prev] | [next] | [standalone]

#18424

Am 10.02.2013 02:49, Mel Smith meinte:
> Evertjan:
>
>      I managed to get the <select> list to drop down on focus. However (as
> the example below shows),  the set of inputs on the same line as the select
> get 'pushed down' and destrop the screen layout.
>
> Can you give further guidance please ??
>
Perhaps some "vertical-align"ing in CSS on both the input and select 
element would do the trick. However, once you set the size property on 
the select element it is no longer the "dropdown" variant.

Gregor

[toc] | [prev] | [next] | [standalone]

#18426

Gregor Kofler wrote on 10 feb 2013 in comp.lang.javascript:

>  However, once you set the size property on 
> the select element it is no longer the "dropdown" variant.

See the OQ.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#18425

Mel Smith wrote on 10 feb 2013 in comp.lang.javascript:

> Evertjan:
> 
>     I managed to get the <select> list to drop down on focus. However
>     (as 
> the example below shows),  the set of inputs on the same line as the
> select get 'pushed down' and destrop the screen layout.
> 
> Can you give further guidance please ??

As I wrote,
you will have to do this with a css position command, like:

position:fixed;

or

position:absolute;

It just takes some playing with these css-settings, I trust.

I am not an expert in this, 
I would do the same experimental testing as you could.
 
> function setFocusSize(selobj) {
> if (selobj.id == "imth") selobj.size = "13" ;
>}
> 
> function resetFocusSize(selobj) {
> if (selobj.id == "imth") selobj.size="1" ;
>}

Why test for the specific object?
The eventhandlers in the object link the use to that object.

Methinks, more compact, 
[and the one function can be used for different select objects]:

==========================================
function changeFocusSize(selobj,size) {
    selobj.size = size;
};

<select size='1' 
onfocus='changeFocusSize(this,13);' 
onblur='changeFocusSize(this,1);'
>
===========================================

or even shorter 
[I prefer this, no distant functions necessary,
it shows exactly what you want it to do]:

==========================================
<select size='1' 
onfocus='this.size = 13;' 
onblur='this.size = 1;'
>
===========================================

> <select id="imth" size="1" onfocus="setFocusSize(this);" 
> onblur="resetFocusSize(this);">
>    <option value="XXX" disabled="disabled">Pick Month</option>

No need for a value here,
what is the intended effect of your disabling?

>    <option value="Jan">January</option>
>    <option value="Feb">February</option>
>    <option value="Mar">March</option>
>    <option value="Apr">April</option>
>    <option value="May">May</option>
>    <option value="Jun">June</option>
>    <option value="Jul">July</option>
>    <option value="Aug">August</option>
>    <option value="Sep">September</option>
>    <option value="Oct">October</option>
>    <option value="Nov">November</option>
>    <option value="Dec">December</option>

I would be using serverside code,
perhaps needing the months names elsewhere to,
and perhaps translate the page to another natural language:

<% 
var mnds = ['January','February','March','April','May','June',
  'July','August','September','October','November','December'];

for (var i=0;i<11;i++)
  Response.write "<option value='" +
  m[i].substr(0,3) +
  "'>" +
  m[i] +
  "</option>";
%>

> </select>



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#18428

Evertjan:

    Thanks for all the additional hints.

    When I created this simple example, I took the original JS code and only 
tiny parts of the original markup for the example.

    So, the original registration screen is much more complex than what I 
provided.

    ... and yes, I do a *lot* of serverside work on the input sent back to 
my Apache Server CGI app.

    My original code shows 'Pick a Month' as option 1 and is shown as 
disabled for my users benefit. I also color my fields as I advance thru them 
and show error messages as entries are made, etc. Anyway,  without *any* 
size clauses, the display is not disturbed. My original problem is that the 
user needs an extra 'click' to display the drop-down list. I guess I should 
leave it at that.

    When I programmatically advance thru the whole set of fields (via <tab> 
, <cr> or 'clicking'), I have many other things happening too.

    I guess that's the problem with providing a 'simple' example and not 
taking too much time with it -- much is misconstrued :((

    Thanks again for detailed hints and corrective suggestions !

-Mel Smith 

[toc] | [prev] | [next] | [standalone]

#18429

Hi Evertjan & Gregor:

    Regarding the <select> element's onfocus/onblur actions:

    a.    *Without use* of  the 'size' clause these actions do not destroy 
the layout of the screen, *but* an extra 'click is needed to display the 
dropdown list.

    b.    *Using* the 'size' clause, these actions modify/disrupt the screen 
layout, *but* the drop-down list is automatically shown on focus, and 
onblur, the screen is restored to its original state.

    I guess I'm going to carry on with solution a.  because its easier than 
changing my whole page to accommodate the annoyance in para b. above.

    ... and I'm left wondering *why* these differences even occur ??

Thanks for your assistance.

-Mel
(and, at least I didn't instigate a flame-war this time -- so far)

[toc] | [prev] | [next] | [standalone]

#18430

Le 10/02/13 18:06, Mel Smith a écrit :
> Hi Evertjan & Gregor:
>
>      Regarding the <select> element's onfocus/onblur actions:
>
>      a.    *Without use* of  the 'size' clause these actions do not destroy
> the layout of the screen, *but* an extra 'click is needed to display the
> dropdown list.

Not at all !!!


Hop!  (Firefox on Mac)

zoooo!  theSelect.focus();

down/up arrow key to walk in items
(the item changes in the unique shown field)

or :
	keys Alt + down arrow
to show the list

or :
	keys Alt + up arrow
to hide the list

then up/down arrow keys
and finally return on good item or tab key to blur



re-hop! (with Chrome)

theSelect.focus();


down arrow key to open/show the list
then up/down arrow keys to walk in items
then return on good item to close the list



Invite your users/visitors to learn to use their browsers


b)
     <select onfocus="this.size=8;this.style.position='absolute'"
             onblur="this.size='';this.style.position=''">

-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#18432

SAM wrote on 10 feb 2013 in comp.lang.javascript:

>      <select onfocus="this.size=8;this.style.position='absolute'"
>              onblur="this.size='';this.style.position=''">

Nice idea.

However the lines below move up 
when the element is no longer tasking any space on focus.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#18451

Le 10/02/13 19:40, Evertjan. a écrit :
> SAM wrote on 10 feb 2013 in comp.lang.javascript:
>
>>       <select onfocus="this.size=8;this.style.position='absolute'"
>>               onblur="this.size='';this.style.position=''">
>
> Nice idea.
>
> However the lines below move up

Not
...
if ...
you placed another element (input, text ?) on side of the select
(on same line)

> when the element is no longer tasking any space on focus.

Of course the container of the select (P, DIV, FIELDSET, FORM ???)
is positioned (style css)

-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#18434

Stephane said:
> or :
> keys Alt + down arrow
> to show the list
>
> or :
> keys Alt + up arrow
> to hide the list

Stephane:

    Is there a way to simulate the above key combos  in JS ??  (Then in my 
onfocus/onur function -- where I do a few other things, I could 'push' the 
Key combo to show/hide the drop-down list)

    (But, perhaps it is not allowed ??)

    But, it would be a quick solution to my problem.

Thank you.

-Mel

[toc] | [prev] | [next] | [standalone]

#18450

Le 10/02/13 20:03, Mel Smith a écrit :
> Stephane said:
>> or :
>> keys Alt + down arrow
>> to show the list
>>
>> or :
>> keys Alt + up arrow
>> to hide the list
>
> Stephane:
>
>      Is there a way to simulate the above key combos  in JS ??  (Then in my
> onfocus/onur function -- where I do a few other things, I could 'push' the
> Key combo to show/hide the drop-down list)
>
>      (But, perhaps it is not allowed ??)

With form elements I only know :
	focus()
	select()
and, reserved for buttons (submit and co) :
	click()

>      But, it would be a quick solution to my problem.

As said the solution would have to be in css


-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#18431

Mel Smith wrote on 10 feb 2013 in comp.lang.javascript:

>     b.    *Using* the 'size' clause, these actions modify/disrupt the
>     screen layout,

These actions do not, if you use css-positioning as required.

Please look at this:

<http://hannivoort.org/test/toggleSelect.asp>


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#18433

Stephane & Evertjan:

    Thanks for the additional guidance.  Will examine and change and test 
some more today and tomorrow.

Thank you both.

-Mel

[toc] | [prev] | [next] | [standalone]

#18449

Hi Evertjan and SAM:

    Evertjan:

        I visited your site and tried your test page.  It, of course, works 
nicely, but it also adds a select-specific <div>, etc to my pages.

    Evertjan & Stephane:

    Perhaps with my problem I could just simulate the extra click needed to 
expand the drop-down list with the Click() method inside the onfocus 
function ???

    However I just tried it, and of course (for me) it doesn't work ...

    Oh well.

    Thanks for everything.

-Mel

[toc] | [prev] | [next] | [standalone]

#18470 — Drop Down Works ! , But ....

Hi Evertjan and Stephane:

    I got the Drop-Down to work with CSS, and it drops down nicely onfocus 
and restores properly when onblur occurs.

    However, two problems:

    1.    The line of inputs containing the <select> gets adjusted 
horizontally (the whole input line is under text-align:center) during the 
focus drop-down and the restore operations.

    2.    The drop-down list falls *underneath* an <hr> line beneath the 
line of inputs because I use the CSS z-index to form this boundary with the 
word 'MESSAGES' overlaying the <hr> line.  Thus, some of the options are 
obscured and unclickable by this <hr> boundary line

    But, I use the <hr> Boundary message line to separate my inputs from 
Messages <div>, and I wish to keep this as part of my page. (and also, I use 
this technique on my other sites too).

Summary,    Using CSS for Drop-Down works nicely.  But I can't use it and 
will stick with my solution b. noted in an earlier post  -- unless I can 
find a way to push Alt-Uparrow, Alt-Downarrow in my onfocus/onblur 
functions.

Thanks you both for helping me understand the Drop-Down problem.

    (btw, I wish I understood the reasoning behind the current 
implementation of the <select> element. To me, it stinks !)


-Mel 

[toc] | [prev] | [next] | [standalone]

#18471 — Re: Drop Down Works ! , But ....

Mel Smith wrote on 12 feb 2013 in comp.lang.javascript:

> Hi Evertjan and Stephane:
> 
>     I got the Drop-Down to work with CSS, and it drops down nicely
>     onfocus 
> and restores properly when onblur occurs.
> 
>     However, two problems:
> 
>     1.    The line of inputs containing the <select> gets adjusted 
> horizontally (the whole input line is under text-align:center) during
> the focus drop-down and the restore operations.
> 
>     2.    The drop-down list falls *underneath* an <hr> line beneath
>     the 
> line of inputs because I use the CSS z-index to form this boundary
> with the word 'MESSAGES' overlaying the <hr> line.  Thus, some of the
> options are obscured and unclickable by this <hr> boundary line
> 
>     But, I use the <hr> Boundary message line to separate my inputs
>     from 
> Messages <div>, and I wish to keep this as part of my page. (and also,
> I use this technique on my other sites too).

Your problems are related to and resolvable by static CSS,
which as such is off topic on this NG.

You should look into that on your own, 
our answers are only javascript related.

Hint: z-index, width, height.

Hint: make your own <hr> not the standard stuff. 
 
> (btw, I wish I understood the reasoning behind the current 
> implementation of the <select> element. To me, it stinks !)

Off topic too.


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#18474 — Re: [CSS] Drop Down Works ! , But ....

Le 12/02/13 18:44, Mel Smith a écrit :
> Hi Evertjan and Stephane:
>
>      I got the Drop-Down to work with CSS, and it drops down nicely onfocus
> and restores properly when onblur occurs.
>
>      However, two problems:
>
>      1.    The line of inputs containing the <select> gets adjusted
> horizontally (the whole input line is under text-align:center) during the
> focus drop-down and the restore operations.

<span style="display:inline-block;width:6em;position:relative">
	<select style="position:absolute" onfocus="blah">
	<option>
	<option>
	</select>
</span>
<input ...


>      2.    The drop-down list falls *underneath* an <hr> line beneath the
> line of inputs because I use the CSS z-index

It is extremely rare that z-index is needed !!!

> to form this boundary with the
> word 'MESSAGES' overlaying the <hr> line.  Thus, some of the options are
> obscured and unclickable by this <hr> boundary line
>
>      But, I use the <hr> Boundary message line to separate my inputs from
> Messages <div>, and I wish to keep this as part of my page. (and also, I use
> this technique on my other sites too).

As I understand nothing of what you mean ...

> Summary,    Using CSS for Drop-Down works nicely.  But I can't use it and
> will stick with my solution b. noted in an earlier post  -- unless I can
> find a way to push Alt-Uparrow, Alt-Downarrow in my onfocus/onblur
> functions.
>
> Thanks you both for helping me understand the Drop-Down problem.
>
>      (btw, I wish I understood the reasoning behind the current
> implementation of the <select> element. To me, it stinks !)

With basic(*) html all works fine using the mouse !!!

(*) without JavaScript nor styles


-- 
Stéphane Moriaux avec/with iMac-intel

  * Anglais - détecté
  * Anglais
  * Français
  * Espagnol

  * Anglais
  * Français
  * Espagnol

  <javascript:void(0);> <#>

  * Anglais
  * Français
  * Espagnol

[toc] | [prev] | [next] | [standalone]

Page 1 of 2  [1] 2  Next page →

Back to top | Article view | comp.lang.javascript

csiph-web