473,320 Members | 1,794 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

How to use <A NAME> with drop box

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?


Jul 30 '05 #1
8 3527
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>

Also:

<A NAME="#chapter1">Chapter 1</A>

....

<A NAME="#Chapter2">Chapter 2</A>

....


I can confirm that it works properly in all major modern browsers.

Roy

--
Roy S. Schestowitz
http://Schestowitz.com
Jul 30 '05 #2
Gazing into my crystal ball I observed Roy Schestowitz
<ne********@schestowitz.com> writing in
news:dc***********@godfrey.mcc.ac.uk:
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>:

<snip>
I can confirm that it works properly in all major modern browsers.


For users with javascript enabled. One should always provide another means
of navigation for users without, eg. Google.
--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Jul 30 '05 #3
Adrienne wrote:
Gazing into my crystal ball I observed Roy Schestowitz
<ne********@schestowitz.com> writing in
news:dc***********@godfrey.mcc.ac.uk:
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>:

<snip>
I can confirm that it works properly in all major modern browsers.


For users with javascript enabled. One should always provide another
means of navigation for users without, eg. Google.


Places where I embed such code have an alternative version that is
JavaScript-free. The OP can include another version which has a simple
expanded menu rather than a drop-down, but it's a poor choice from an
SEO-centric point-of-view.

Roy

--
Roy S. Schestowitz
http://Schestowitz.com
Jul 30 '05 #4
On Fri, 29 Jul 2005 19:55:06 -0500, "Yeah" <ye**@positive.net> wrote:
I already have <A NAME="#ChapterX"> tags

Try <A NAME="ChapterX"> instead

"#" is a fragment _separator_, not part fo the fragment's name itself.
You use it in the URL that refers to it, but not in the target's name.

<a href="#ChapterX" >Click Here</a>

Jul 30 '05 #5
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.
--
Rob
Jul 31 '05 #6
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
Jul 31 '05 #7
Roy Schestowitz wrote:
RobG wrote:

Roy Schestowitz wrote:
[...]

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


According to the HTML specification, onchange should fire if the
control has changed when it looses focus. In that respect, Mozilla et
al do it by the book for select elements.

On the other hand, Mozilla will fire an onchange for a radio button
the moment it is clicked (effectively making it an onclick event) and
doesn't wait for the loss of focus. IE waits for the button to lose
focus, which has the unfortunate side-effect that when you click one,
nothing happens. If you click another, the onchange from the previous
one fires.

There are a number of such gotchas - but that's just part of the fun
of web development!

--
Rob
Jul 31 '05 #8
RobG wrote:
Roy Schestowitz wrote:
RobG wrote:

Roy Schestowitz wrote:
[...]
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


According to the HTML specification, onchange should fire if the
control has changed when it looses focus. In that respect, Mozilla et
al do it by the book for select elements.

On the other hand, Mozilla will fire an onchange for a radio button
the moment it is clicked (effectively making it an onclick event) and
doesn't wait for the loss of focus. IE waits for the button to lose
focus, which has the unfortunate side-effect that when you click one,
nothing happens. If you click another, the onchange from the previous
one fires.

There are a number of such gotchas - but that's just part of the fun
of web development!


I wouldn't label it all "fun". It makes Web development more laborious. At
some stage I gave up on testing pages under different browsers and just
ensured that new pages validated. If the browser cannot dipslay valid pages
properly, the browser should be blamed. Alternatively, the formal
specifications should take the blame. For example, a user who cannot use
the mouse might suffer from focus-related decisions. Then again, Windows
has a poor notion of focus (only click window or widget to focus) so not
wonder IE fails.

Roy

--
Roy S. Schestowitz
http://Schestowitz.com
Jul 31 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Eshrath | last post by:
Hi, What I am trying to do: ======================= I need to form a table in html using the xsl but the table that is formed is quite long and cannot be viewed in our application. So we are...
2
by: Donald Firesmith | last post by:
I am having trouble having Google Adsense code stored in XSL converted properly into HTML. The <> unfortunately become &lt; and &gt; and then no longer work. XSL code is: <script...
4
by: Don Wash | last post by:
Hi All! I'm getting the following Error: No DLLs has been compiled yet and nothing in the \bin directory. So it is not the versioning problem or anything like that. And here are the...
5
by: D | last post by:
Hi, I have created a contact form in php for contact information and have amde the e-mail a required field (requires you to input at least the "@") It works fine, but every once in a while I...
11
by: raylopez99 | last post by:
Keep in mind this is my first compiled SQL program Stored Procedure (SP), copied from a book by Frasier Visual C++.NET in Visual Studio 2005 (Chap12). So far, so theory, except for one bug...
3
by: ajay2552 | last post by:
Hi, I have a query. All html tags start with < and end with >. Suppose i want to display either '<' or '>' or say some text like '<Company>' in html how do i do it? One method is to use &lt,...
2
by: -Karl | last post by:
Couls someone please advise me on this error. What I am trying to do is be able to convert an XML document into arrays. I read that the subs & functions have to be in <scripttags. Thanks! ...
0
by: Andrzej Lipski | last post by:
Hello I am developing a Windows Ce 5.0 mobile application. I followed the example shown at : Creating Self-Updating Applications With the .NET Compact Framework...
1
by: Nilam2477 | last post by:
I have application developed in VC/COM/DCOM At some point of time i got the following error message and application closed. Faulting application <application name>, version <version number>,...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.