PDA

View Full Version : Select box, onFocus hightlight yellow..how?

BrightNail
08-18-2003, 07:45 PM
Hey,
I have a select box and when I load a layer I call to a function that 'focuses'. Anyways, when I call to the function to 'focus' the select dropdown, it does focus - but I need the background or focus to turn yellow so that the issue also gets a visual of the focus.

for other form elements, I just use...
onfocus="this.style.background='yellow'" --> but on a select box, it doesn't work..

so when a user enters focus, it turns yellow, when they leave (onblur), it resorts back to normal..

thanks
dean
Vincent Puglia
08-18-2003, 08:47 PM
Hi dean,

I'm not sure it's possible (if you mean the highlight blue) You could fool with the commented out code in the following and try to find what you need (I ran out of time).


function doit(selObj, ndx)
{
selObj.options[ndx].style.backgroundColor = 'red';

/*for (i in selObj.options[ndx].style)
if (selObj.options[ndx].style[i] != 'null')
alert(i + ' ' + selObj.options[ndx].style[i])
*/
}
//-->
</script>
</head>
<body>
<form name="a">
<select name="b" onchange=doit(this,this.selectedIndex)>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>


As it stands, the background of the 'text' box in the select turns red, and the box within the scroller does also -- just scroll to a different option and you'll see what I mean.

Vinny
BrightNail
08-18-2003, 09:20 PM
Okay,,

I think I wasn't thorough enough...I think you have the idea of it..

but I just need the default 1st item...to be focused...all it is to do is to let the user know that they are currently on the drop down...just to focus it so they know where they are..I am not using a keyboard for this app, so the user has to visually see that they are highlighted on the dropdown.........
Vincent Puglia
08-18-2003, 11:21 PM
Hi,

I am not using a keyboard for this app
could you elaborate on this a bit?

Did you try the code I posted? And see the results?

Vinny
BrightNail
08-19-2003, 12:52 AM
well,
the idea is that when I load a layer....I also pass a param that tells wich form element to "focus"..well, one of these layers needs to dropdown focused...BUT, I can focus it..but that isn't enough..I need the background of it to turn yellow when the focus is present....when onBlur, it goes white...basically, I have to let the user know he/she is on the dropdown element.

The app is for a non-regular browser, so the user will only be able to 'tab'...thus, the dropdown has to be obvious in its focus, else people won't know that they are currently 'on that element'..

?
Vincent Puglia
08-19-2003, 01:28 AM
Hi,

ok, if I get some time tonight, I'll see what I can do; however, if you post some code -- as in relevant html & javascript -- it will help

Vinny
BrightNail
08-19-2003, 06:47 AM
well, its just a regular dropdown....like so.

<select name="whatever">
<option>Select Decade</option>
<option>1970</option>
<option>1980</option>
<option>1990</option>
</style>

as of right now, I don't have any javascript...I just have a onFocus, and a onBlur within in each form element..so when people enter a field (onFocus)...it does

onfocus="this.style.background='yellow'

then I have an onblur

onblur="this.style.background='white'


so, when I load a layer...I might do something like..

<a href="javascript: loadlayer('form_part_1');document.formname.name.focus()"><img src="someimage.gif"></a>


so, when that layer loads, the name text field is focused...and since that field has an onFocus command on it...it turns yellow...

I just need this to work for a dropdown.....but for some reason, I can't do it....
glenngv
08-19-2003, 11:19 AM
Is this what you want?


<select name="whatever"
onclick="prevIndex=this.selectedIndex"
onfocus="this.options[this.selectedIndex].style.backgroundColor='yellow'"
onchange="this.options[this.selectedIndex].style.backgroundColor='yellow';this.options[prevIndex].style.backgroundColor='white'"
onblur="this.options[this.selectedIndex].style.backgroundColor='white'">
<option>Select Decade</option>
<option>1970</option>
<option>1980</option>
<option>1990</option>
</select>


You may not fully notice the yellow background because dropdowns highlight to blue when focused. That's the default behavior and you cannot override it. It's an OS-specific feature not by browsers. Your purpose is to let the users know that they are currently on that field. That's exactly the purpose of the blue highlight! I think setting the background to yellow is useless. But still I posted the code if you insist.