Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How can I use arrows to navigate a web page?

Posted on 2006-04-10
3
Medium Priority
?
520 Views
Last Modified: 2008-03-06
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?
0
Comment
Question by:Gemini532
3 Comments
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 1000 total points
ID: 16419168
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
 
LVL 6

Accepted Solution

by:
nabsol earned 1000 total points
ID: 16420378
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
 

Author Comment

by:Gemini532
ID: 16426064
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

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question