Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onKeyPress Quick Navigation in IE and Netscape

Event Handling

onKeyPress Quick Navigation in IE and Netscape

by  jsLove  Posted    (Edited  )
Ever have one of those really long alphabetical lists that neither you (or your user) wants to have to scroll thru but didnt want to put an obnoxious clickable alphabet at the top of the page?

I have. And with a bit of research and experimentation I came up with what I believe is an eloquent solution, using onKeyPress where the user simply types the first letter to quickly navigate to that part of the page (if they type "a" they are taken to anchor "A"):

-----------------------------------------------------------
<HTML><HEAD>
<TITLE>jsLove's Alpha Finder --- 08-21-2001</TITLE>
[color red]<SCRIPT language="JavaScript">
<!--
function handler(e) {
if (document.all) {e = window.event;}[/red] // IE
[color red]var key;
if (document.layers) key = e.which;[/red] // Netscape
[color red]if (document.all)key = e.keyCode;[/red] // IE
// converts key to lowercase since my anchors are all lowercase:
[color red]var chr = String.fromCharCode(key).toLowerCase();[/red]
// activates the anchor-- change the url to your page, but leave the #"+chr; :
[color red]window.location="http://www.yourpage.htm#"+chr;
}[/red]
// grabs the key and sends it to the handler function above:
[color red]document.onkeypress = handler;
//-->
</SCRIPT>[/red]
</HEAD>

<BODY bgcolor="#FFFFFF">
<A name="top"></A><!--- Typical Anchor --->
<TABLE border="0" cellspacing="0" cellpadding="4" width="100">
<TR><TD>á</TD></TR>
<TR><TD><B>A</B><A name="a"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>B</B><A name="b"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>C<B><A name="c"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>D<B><A name="d"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>E<B><A name="e"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>F<B><A name="f"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>G<B><A name="g"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>H<B><A name="h"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>I<B><A name="i"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>J<B><A name="j"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>K<B><A name="k"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>L<B><A name="l"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>M<B><A name="m"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>N<B><A name="n"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>O<B><A name="o"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>P<B><A name="p"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>Q<B><A name="q"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>R<B><A name="r"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>S<B><A name="s"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>T<B><A name="t"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>U<B><A name="u"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>V<B><A name="v"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>W<B><A name="w"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B><B>X<B><A name="x"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>Y<B><A name="y"></A></TD></TR>
<TR><TD>á</TD></TR>
<TR><TD>á</TD></TR>
<TR><TD><B><A href="#top">Top</A></B></TD></TR>
<TR><TD><B>Z<B><A name="z"></A></TD></TR>
</TABLE>
</BODY></HTML>
----------------------------------------------------------

Notes:

It is unknown and doubtfull if this works on a page containing a form, since filling in blanks would be keypresses.

If the Anchor is Uppercase, then remove the ".toLowerCase()" from the JavaScript above. Netscape is case sensitive on Anchors.

This has been tested in IE and Netscape 4.




enjoy!
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top