How can I use arrows to navigate a web page?

Hello Everyone,
I would like to user the arrows to navigate a webpage.  I would like to be able to go up with the arrows pointing up.
Down with the arrow pointing down.
Left with the arrow pointing left.
and Right with the arrow pointing right.
Is this possible using JavaScript?  Can you guys help me with this?
Gemini532Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ZvonkoSystems architectCommented:
That is the default bahavior or browser, so what is the question?
Or what do you mean with "go up"?  What does go up by up key press? The page content or the URL? Then what URL?
0
nabsolCommented:
Hi

This is exactly what you want, Gemini532. Follow this link and read instruction to copy code.

http://www.dynamicdrive.com/dynamicindex2/pagescroller.htm

Check other things as well. May be those helps:
http://www.dynamicdrive.com/dynamicindex2/


By Nab
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Gemini532Author Commented:
What I meant was instead of the "tab" key to use the arrow keys to navigate the elements of a form, like radio buttons, drop down menus, textboxes.
I am well aware that if you use the arrows on radio buttons, it will check them and there's no way to uncheck them, so there are some limitations, but it would be very helpful for my purposes.
If you want I will include what I have so far.  This code is not working.... I got from the Internet, and I don't think it's using the left and right arrows either...
Maybe you can help...

Here it is:
<html>
<head>

<script type="text/javascript">
var usedArrow = false;

function checkArrow(evt) {

      if (typeof window.event != "undefined") evt = window.event; //if not others then IE
      var keycode = evt.keyCode;


      if (keycode == 38 || keycode == 40) { //Do stuff only if arrow key

           /* Find the input field that triggered or contains the element that triggered the event */

          var obj = (typeof evt.target != "undefined") ? evt.target : evt.srcElement;

          while(obj.nodeType != 1 && obj.tagName.toLowerCase() !="input" && obj.tagName.toLowerCase() !="form"){
                obj= (typeof obj.parentNode != "undefined") ? obj.parentNode : obj.parentElement;
          }

          /* If an input field process */
          if (typeof obj.tagName != "undefined" && obj.tagName.toLowerCase() == "input") {

               /* Get current fields id */
               var currentField = (typeof evt.target != "undefined") ? evt.target : evt.srcElement; //other or IE
               var currentID = currentField.id;
               var newID = null;

               /* Determine next field */
                switch (currentID) {
                case "Text1":
                     if (keycode == 40) newID = "OptionButton1";
                     break;
                case "OptionButton1":
                     if (keycode == 38) newID = "Text1";
                     else newID= "OptionButton2";
                     break;
                case "OptionButton2":
                     if (keycode == 38) newID = "OptionButton1";
                     else newID = "DropDown1";
                     break;
                case "DropDown1":
                     if (keycode == 38) newID = "OptionButton2";
                     else newID = "CheckBox1";
                     break;
                case "CheckBox1":
                     if (keycode == 38) newID = "DropDown1";
                     else newID = "Text2";
                     break;
                case "Text2":
                     if (keycode == 38) newID = "CheckBox1";
                     else newID = "OptionButton3";
                     break;
                case "OptionButton3":
                     if (keycode == 38) newID = "Text2";
                     else newID= "OptionButton4";
                     break;
                case "OptionButton4":
                     if (keycode == 38) newID = "OptionButton3";
                     else newID = "DropDown2";
                     break;
                case "DropDown2":
                     if (keycode == 38) newID = "OptionButton4";
                     else newID = "CheckBox2";
                     break;
                case "CheckBox2":
                     if (keycode == 38) newID = "DropDown2";
                     break;
                }

               /* Move to new field */
               if (newID) {
                   document.getElementById(newID).focus();
               }
                usedArrow = true;
        }
    }
}

</script>
</head>

<body>
<form name="myform1" onkeydown="checkArrow(event);">
  <table>
    <tr>
      <td>
          Form #1</td>
    </tr>
    <tr>
      <td>
          <input type="text" name="Text" id="Text1" size="20" tabindex="1"></td>
    </tr>
    <tr>
      <td><input type="radio" value="A" name="OptionButton" id="OptionButton1" tabindex="2">A or B<input type="radio" value="B" checked name="OptionButton" id="OptionButton2"  tabindex="3"></td>
    </tr>
    <tr>
      <td><select size="1" name="DropDown" id="DropDown1" tabindex="4">
          <option selected value="1">Choice 1</option>
          <option value="2">Choice 2</option>
          <option value="3">Choice 3</option>
          </select></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="CheckBox" id="CheckBox1" value="T" tabindex="5">True</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
<br>
<form name="myform2" onkeydown="checkArrow(event);">
  <table>
    <tr>
      <td>
          Form #2</td>
    </tr>
    <tr>
      <td>
          <input type="text" name="Text" id="Text2" size="20" tabindex="6"></td>
    </tr>
    <tr>
      <td><input type="radio" value="A" name="OptionButton" id="OptionButton3" tabindex="7">A or B<input type="radio" value="B" checked name="OptionButton" id="OptionButton4" tabindex="8"></td>
    </tr>
    <tr>
      <td><select size="1" name="DropDown" id="DropDown2" tabindex="9">
          <option selected value="1">Choice 1</option>
          <option value="2">Choice 2</option>
          <option value="3">Choice 3</option>
          </select></td>
    </tr>
    <tr>
      <td><input type="checkbox" name="CheckBox" id="CheckBox2" value="T" tabindex="10">True</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.