INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Event Handling

onKeyPress Quick Navigation in IE and Netscape by jsLove
Posted: 29 Aug 01

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>
<SCRIPT language="JavaScript">
<!--
function handler(e) {
    if (document.all) {e = window.event;}
// IE
    var key;
    if (document.layers) key = e.which;
// Netscape
    if (document.all)key = e.keyCode; // IE
    // converts key to lowercase since my anchors are all lowercase:
    var chr = String.fromCharCode(key).toLowerCase();
    // activates the anchor-- change the url to your page, but leave the #"+chr;  :
    window.location="http://www.yourpage.htm#";+chr;
}

// grabs the key and sends it to the handler function above:
document.onkeypress = handler;
//-->
</SCRIPT>

</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!

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close