RobG wrote:
> Roy Schestowitz wrote:
>> Yeah wrote:
>>
>>
>>>I wish to use a drop box where each Option will not take the user to a
>>>web page - but a certain location on the same page the drop box exists.
>>>For example, Option 1 would take the user to "Chapter 1", Option 2 would
>>>be "Chapter 2", and so on. All destinations are on the same page.
>>>
>>>I already have <A NAME="#ChapterX"> tags placed in the appropriate places
>>>in the document. (A no-GO button drop box is preferred.)
>>>
>>>How do I achieve this?
>>
>>
>> Try this...
>>
>> In <head>:
>>
>> <script type="text/javascript">
>>
>>
>> function formHandler(form){
>> var URL =
>> document.form.site.options[document.form.site.selectedIndex].value;
>> window.location.href = URL;
>> }
>>
>> </script>
>>
>>
>>
>> In <body>:
>>
>> <form name="form">
>> <select name="site" onChange="javascript:formHandler()">
>> <option value="index.html#chaper1">Chapter 1
>> <option value="index.html#chaper2">Chapter 2
>> </select>
>> </form>
>>
>
> Using 'onchange' with select elements has serious usability issues
> with keyboard navigation in IE, particularly if the options cause URLs
> to be followed.
>
> Try the following by tabbing to the select, then using the down arrow key:
>
>
> <select onchange="alert(this[this.selectedIndex].text);">
> <option>Option 1</option>
> <option>Option 2</option>
> <option>Option 3</option>
> </select>
>
>
> In IE the alert is fired every time the down arrow is pressed. If each
> option is a link, then users will never get beyond the first step
> downward before being whisked away to the new URL.
I never actually had it tested to account for keyboard behaviour. I can see
your point and I wonder how other browsers handle it.
With older versions of Netscape, the selection and request to move to a new
URL was not obeyed IIRC. I used to remember some more issues with the
implementation above. That's why I added a JS-free version wherever I had
such a menu placed.
Roy
|
|
