Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
<select> Drop-Down List not 'dropping'
5 views
Skip to first unread message
Mel Smith
Feb 8, 2013, 3:17:53 PM2/8/13
to
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
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
Evertjan.
Feb 8, 2013, 4:49:16 PM2/8/13
to
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.
> 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.
>
> 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:
> Question: Is there a programmatic way to 'drop-down' the <select> list
> as soon as it gains focus without clicking first.
<button
onclick='document.getElementById("mySelect").size=15'>
expand</button>
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Mel Smith
Feb 8, 2013, 6:18:23 PM2/8/13
to
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
>
> You can expand, but then need some absolute positioning:
>
> <button
> onclick='document.getElementById("mySelect").size=15'>
> expand</button>
I'll try the 'size=' clause this weekend.
Thank you !
-Mel
Mel Smith
Feb 9, 2013, 8:49:32 PM2/9/13
to
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>
***************************
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>
***************************
Gregor Kofler
Feb 10, 2013, 3:36:59 AM2/10/13
to
Am 10.02.2013 02:49, Mel Smith meinte:
element would do the trick. However, once you set the size property on
the select element it is no longer the "dropdown" variant.
Gregor
> 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
>
> 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 ??
>
element would do the trick. However, once you set the size property on
the select element it is no longer the "dropdown" variant.
Gregor
Evertjan.
Feb 10, 2013, 4:05:18 AM2/10/13
to
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,
> 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 ??
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" ;
>}
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>
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>
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.
Feb 10, 2013, 4:08:50 AM2/10/13
to
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.
> However, once you set the size property on
> the select element it is no longer the "dropdown" variant.
Mel Smith
Feb 10, 2013, 10:17:24 AM2/10/13
to
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
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
Mel Smith
Feb 10, 2013, 12:06:23 PM2/10/13
to
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)
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)
SAM
Feb 10, 2013, 12:59:00 PM2/10/13
to
Le 10/02/13 18:06, Mel Smith a �crit :
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
> 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 !!!
>
> 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.
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
Evertjan.
Feb 10, 2013, 1:31:34 PM2/10/13
to
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.
> screen layout,
Please look at this:
<http://hannivoort.org/test/toggleSelect.asp>
Evertjan.
Feb 10, 2013, 1:40:39 PM2/10/13
to
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.
> <select onfocus="this.size=8;this.style.position='absolute'"
> onblur="this.size='';this.style.position=''">
However the lines below move up
when the element is no longer tasking any space on focus.
Mel Smith
Feb 10, 2013, 1:45:51 PM2/10/13
to
Stephane & Evertjan:
Thanks for the additional guidance. Will examine and change and test
some more today and tomorrow.
Thank you both.
-Mel
Thanks for the additional guidance. Will examine and change and test
some more today and tomorrow.
Thank you both.
-Mel
Mel Smith
Feb 10, 2013, 2:03:58 PM2/10/13
to
Stephane said:
> or :
> keys Alt + down arrow
> to show the list
>
> or :
> keys Alt + up arrow
> to hide the list
Stephane:
> or :
> keys Alt + down arrow
> to show the list
>
> or :
> keys Alt + up arrow
> to hide the list
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
Mel Smith
Feb 10, 2013, 7:50:15 PM2/10/13
to
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
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
SAM
Feb 10, 2013, 8:39:07 PM2/10/13
to
Le 10/02/13 20:03, Mel Smith a �crit :
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
> 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 :
>> 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 ??)
focus()
select()
and, reserved for buttons (submit and co) :
click()
> But, it would be a quick solution to my problem.
SAM
Feb 10, 2013, 8:59:44 PM2/10/13
to
Le 10/02/13 19:40, Evertjan. a �crit :
...
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)
> 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
>
>> <select onfocus="this.size=8;this.style.position='absolute'"
>> onblur="this.size='';this.style.position=''">
>
> Nice idea.
>
> However the lines below move up
...
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.
is positioned (style css)
Mel Smith
Feb 12, 2013, 12:44:59 PM2/12/13
to
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
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
Evertjan.
Feb 12, 2013, 1:46:35 PM2/12/13
to
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,
> 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).
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 !)
SAM
Feb 12, 2013, 7:57:48 PM2/12/13
to
Le 12/02/13 18:44, Mel Smith a �crit :
<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
> 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">
>
> 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.
<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
> 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 !)
(*) without JavaScript nor styles
--
St�phane Moriaux avec/with iMac-intel
* Anglais
* Fran�ais
* Espagnol
* Anglais
* Fran�ais
* Espagnol
<javascript:void(0);> <#>
* Anglais
* Fran�ais
* Espagnol
Mel Smith
Feb 12, 2013, 8:23:32 PM2/12/13
to
SAM:
Here is what I'm doing (bit its HTML and CSS ands OT)
-Mel
<style ...>
.header {
position:relative;
z-index: 2;
margin: 0.75em;
text-align:center;
}
.header hr {
position:absolute;
z-index: -1;
width:100%;
left: 0em;
top: 50%;
margin: 0em;
}
.header span {
padding: 0.15em;
font-family:arial,verdana,helvetica,sans-serif;
font-size: 1.0em;
font-weight: 100;
background-color:yellow;
}
</style>
... and then below this puts the 'Messages' in the middle of the <hr> line
*but* the drop-down displays 'underneath' the hr line and is partly obscured
by it.
<body>
<div class="header">
<span> Messages </span>
<hr />
</div>
</body>
Here is what I'm doing (bit its HTML and CSS ands OT)
-Mel
<style ...>
.header {
position:relative;
z-index: 2;
margin: 0.75em;
text-align:center;
}
.header hr {
position:absolute;
z-index: -1;
width:100%;
left: 0em;
top: 50%;
margin: 0em;
}
.header span {
padding: 0.15em;
font-family:arial,verdana,helvetica,sans-serif;
font-size: 1.0em;
font-weight: 100;
background-color:yellow;
}
</style>
... and then below this puts the 'Messages' in the middle of the <hr> line
*but* the drop-down displays 'underneath' the hr line and is partly obscured
by it.
<body>
<div class="header">
<span> Messages </span>
<hr />
</div>
</body>
SAM
Feb 13, 2013, 9:37:32 AM2/13/13
to
Le 13/02/13 02:23, Mel Smith a �crit :
<http://stephane.moriaux.pagesperso-orange.fr/truc/dropdwn>
> SAM:
>
> Here is what I'm doing (bit its HTML and CSS ands OT)
see :
>
> Here is what I'm doing (bit its HTML and CSS ands OT)
<http://stephane.moriaux.pagesperso-orange.fr/truc/dropdwn>
Mel Smith
Feb 13, 2013, 11:35:35 AM2/13/13
to
Stephane said:
> see :
> <http://stephane.moriaux.pagesperso-orange.fr/truc/dropdwn>
Hi Stephane:
It works *great* and the drop-down list is NOT obscured.
I'll examine your source and try it on my development system.
Thank you for your persistence and help !
-Mel Smith
> see :
> <http://stephane.moriaux.pagesperso-orange.fr/truc/dropdwn>
Hi Stephane:
It works *great* and the drop-down list is NOT obscured.
I'll examine your source and try it on my development system.
Thank you for your persistence and help !
-Mel Smith
0 new messages