Solved

try { objFocus[0].focus(); } catch (e) { } does not work in Netscape 7.1

Posted on 2003-11-05
5
417 Views
Last Modified: 2012-05-04
Hi Experts,

I have a page that contains six rows of input boxes, where row #3 and row #6 are hidden with <tr style="display:none;">

I use JavaScript to try to manipulate the up and down arrow keys to move the focus to the input box above and below the current input box in focus.  See my complete code below.  

It works fine with Internet Explorer, but with Netscape 7.1, the code failed when it hits the hidden row.

Please note that the entire row #3 and row #6 are hidden with <tr style="display:none;">, however, the individual input boxes in row #3 and row #6 are not hidden individually.  So, suggestion to check if the input box itself is hidden is not acceptable.

Any help or suggestion you can render all greatly appreciated!


Thank you,
Ting Men

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<html>
  <head>
    <script languange="javascript">
      var IE4 = (document.all && !document.getElementById) ? true : false;
      var NS4 = (document.layers) ? true : false;
      var IE5 = (document.all && document.getElementById) ? true : false;
      var NS6 = (document.getElementById && !document.all) ? true : false;
      var IE = (IE4 || IE5) ? true : false;
      var NS = (NS4 || NS6) ? true : false;
      var g_astrNavigation = new Array();
      if (NS)
      {
        var g_strKeyCode;
        function onDocumentKeyDown(e)
        {
          g_strKeyCode = e.which;
        }
        document.onkeydown = onDocumentKeyDown
        document.captureEvents(Event.KEYDOWN);
      }
      function SetNavigationArray(nRow, nCol, strData)
      {
        if (nRow >= g_astrNavigation.length)
          g_astrNavigation[nRow] = new Array();
        g_astrNavigation[nRow][nCol] = strData;
      }
      function onKeyDown(nRow, nCol)
      {
            var strKeyCode, strFocus, objFocus;
        var fReturn;
        // get key code
        if (NS)
          strKeyCode = g_strKeyCode;
        if (IE)
          strKeyCode = window.event.keyCode;
        // if up arrow is pressed
        if (strKeyCode == 38)
        {
          while(nRow - 1 > 0)
          {
            fReturn = true;
            strFocus = g_astrNavigation[nRow - 1][nCol];
            objFocus = document.getElementsByName(strFocus);
            if (objFocus[0])
            {
              try { objFocus[0].focus(); } catch (e) { fReturn = false; }
              if (fReturn) return;
            }
            nRow = nRow - 1;
          }
        }
        // if down arrow is pressed
        if (strKeyCode == 40)
        {
          while (nRow + 1 < g_astrNavigation.length)
          {
            fReturn = true;
            strFocus = g_astrNavigation[nRow + 1][nCol];
            objFocus = document.getElementsByName(strFocus);
            if (objFocus[0])
            {
              try { objFocus[0].focus(); } catch (e) { fReturn = false; }
              if (fReturn) return;
            }
            nRow = nRow + 1;
          }
        }
      }
    </script>
  </head>
  <body>
    <table>
      <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
      <tr>
        <td><input name="Sun1ndx1" id="Sun1ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(1, 1);"></td>
        <td><input name="Mon1ndx1" id="Mon1ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(1, 2);"></td>
        <td><input name="Tue1ndx1" id="Tue1ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(1, 3);"></td>
        <td><input name="Wed1ndx1" id="Wed1ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(1, 4);"></td>
        <td><input name="Thu1ndx1" id="Thu1ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(1, 5);"></td>
        <td><input name="Fri1ndx1" id="Fri1ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(1, 6);"></td>
        <td><input name="Sat1ndx1" id="Sat1ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(1, 7);"></td>
      </tr>
      <script languange="javascript">
        SetNavigationArray(1, 1, "Sun1ndx1");
        SetNavigationArray(1, 2, "Mon1ndx1");
        SetNavigationArray(1, 3, "Tue1ndx1");
        SetNavigationArray(1, 4, "Wed1ndx1");
        SetNavigationArray(1, 5, "Thu1ndx1");
        SetNavigationArray(1, 6, "Fri1ndx1");
        SetNavigationArray(1, 7, "Sat1ndx1");
      </script>
      <tr>
        <td><input name="Sun1ndx2" id="Sun1ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(2, 1);"></td>
        <td><input name="Mon1ndx2" id="Mon1ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(2, 2);"></td>
        <td><input name="Tue1ndx2" id="Tue1ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(2, 3);"></td>
        <td><input name="Wed1ndx2" id="Wed1ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(2, 4);"></td>
        <td><input name="Thu1ndx2" id="Thu1ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(2, 5);"></td>
        <td><input name="Fri1ndx2" id="Fri1ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(2, 6);"></td>
        <td><input name="Sat1ndx2" id="Sat1ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(2, 7);"></td>
      </tr>
      <script languange="javascript">
        SetNavigationArray(2, 1, "Sun1ndx2");
        SetNavigationArray(2, 2, "Mon1ndx2");
        SetNavigationArray(2, 3, "Tue1ndx2");
        SetNavigationArray(2, 4, "Wed1ndx2");
        SetNavigationArray(2, 5, "Thu1ndx2");
        SetNavigationArray(2, 6, "Fri1ndx2");
        SetNavigationArray(2, 7, "Sat1ndx2");
      </script>
      <tr style="display:none;">
        <td><input name="Sun1ndx3" id="Sun1ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(3, 1);"></td>
        <td><input name="Mon1ndx3" id="Mon1ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(3, 2);"></td>
        <td><input name="Tue1ndx3" id="Tue1ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(3, 3);"></td>
        <td><input name="Wed1ndx3" id="Wed1ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(3, 4);"></td>
        <td><input name="Thu1ndx3" id="Thu1ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(3, 5);"></td>
        <td><input name="Fri1ndx3" id="Fri1ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(3, 6);"></td>
        <td><input name="Sat1ndx3" id="Sat1ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(3, 7);"></td>
      </tr>
      <script languange="javascript">
        SetNavigationArray(3, 1, "Sun1ndx3");
        SetNavigationArray(3, 2, "Mon1ndx3");
        SetNavigationArray(3, 3, "Tue1ndx3");
        SetNavigationArray(3, 4, "Wed1ndx3");
        SetNavigationArray(3, 5, "Thu1ndx3");
        SetNavigationArray(3, 6, "Fri1ndx3");
        SetNavigationArray(3, 7, "Sat1ndx3");
      </script>
      <tr><td>&nbsp;</td></tr>
      <tr>
        <td><input name="Sun2ndx1" id="Sun2ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(4, 1);"></td>
        <td><input name="Mon2ndx1" id="Mon2ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(4, 2);"></td>
        <td><input name="Tue2ndx1" id="Tue2ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(4, 3);"></td>
        <td><input name="Wed2ndx1" id="Wed2ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(4, 4);"></td>
        <td><input name="Thu2ndx1" id="Thu2ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(4, 5);"></td>
        <td><input name="Fri2ndx1" id="Fri2ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(4, 6);"></td>
        <td><input name="Sat2ndx1" id="Sat2ndx1" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(4, 7);"></td>
      </tr>
      <script languange="javascript">
        SetNavigationArray(4, 1, "Sun2ndx1");
        SetNavigationArray(4, 2, "Mon2ndx1");
        SetNavigationArray(4, 3, "Tue2ndx1");
        SetNavigationArray(4, 4, "Wed2ndx1");
        SetNavigationArray(4, 5, "Thu2ndx1");
        SetNavigationArray(4, 6, "Fri2ndx1");
        SetNavigationArray(4, 7, "Sat2ndx1");
      </script>
      <tr>
        <td><input name="Sun2ndx2" id="Sun2ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(5, 1);"></td>
        <td><input name="Mon2ndx2" id="Mon2ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(5, 2);"></td>
        <td><input name="Tue2ndx2" id="Tue2ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(5, 3);"></td>
        <td><input name="Wed2ndx2" id="Wed2ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(5, 4);"></td>
        <td><input name="Thu2ndx2" id="Thu2ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(5, 5);"></td>
        <td><input name="Fri2ndx2" id="Fri2ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(5, 6);"></td>
        <td><input name="Sat2ndx2" id="Sat2ndx2" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(5, 7);"></td>
      </tr>
      <script languange="javascript">
        SetNavigationArray(5, 1, "Sun2ndx2");
        SetNavigationArray(5, 2, "Mon2ndx2");
        SetNavigationArray(5, 3, "Tue2ndx2");
        SetNavigationArray(5, 4, "Wed2ndx2");
        SetNavigationArray(5, 5, "Thu2ndx2");
        SetNavigationArray(5, 6, "Fri2ndx2");
        SetNavigationArray(5, 7, "Sat2ndx2");
      </script>
      <tr style="display:none;">
        <td><input name="Sun2ndx3" id="Sun2ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(6, 1);"></td>
        <td><input name="Mon2ndx3" id="Mon2ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(6, 2);"></td>
        <td><input name="Tue2ndx3" id="Tue2ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(6, 3);"></td>
        <td><input name="Wed2ndx3" id="Wed2ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(6, 4);"></td>
        <td><input name="Thu2ndx3" id="Thu2ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(6, 5);"></td>
        <td><input name="Fri2ndx3" id="Fri2ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(6, 6);"></td>
        <td><input name="Sat2ndx3" id="Sat2ndx3" size="5" autocomplete="off" onkeydown="javascript:onKeyDown(6, 7);"></td>
      </tr>
      <script languange="javascript">
        SetNavigationArray(6, 1, "Sun2ndx3");
        SetNavigationArray(6, 2, "Mon2ndx3");
        SetNavigationArray(6, 3, "Tue2ndx3");
        SetNavigationArray(6, 4, "Wed2ndx3");
        SetNavigationArray(6, 5, "Thu2ndx3");
        SetNavigationArray(6, 6, "Fri2ndx3");
        SetNavigationArray(6, 7, "Sat2ndx3");
      </script>
    </table>
  </body>
</html>
0
Comment
Question by:tingmen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
5 Comments
 
LVL 2

Accepted Solution

by:
Codescripter earned 50 total points
ID: 9691006
Hello Ting Men,

I personally think this question is worth 150 points, but here is the solution anyway:

at the top of your javascript, include the following variables:

<script language="JavaScript">

var offrow = 2;
var nGlobalRow = 0;
var nGlobalCol = 0;


...and at the top of your onKeyDown function, include the following modifications:

function onKeyDown(nRow, nCol)
      {
        nGlobalRow = nRow;
        nGlobalCol = nCol;


...and include the following javascript function:

      function CheckRow() {
        if (nGlobalRow == offrow) {
          onKeyDown(nGlobalRow+1, nGlobalCol);
        }
      }


...and in your body tag, include the following event:

<body onfocus="CheckRow()">

0
 

Author Comment

by:tingmen
ID: 9695578
Hello Codescripter,

Thanks for your comment.  

Your solution does not fully solve the problem that I have.  Your solution assumes that offrow is 2, but that is not always the case.

More than one row of input boxes can be hidden and un-hidden by user interaction (Although my code above does not provide that functionality) The JavaScript must determine its visibility dynamically.

Please note that rows are hidden with <tr style="display:none;">, however, the individual input boxes are not hidden individually.  So, suggestion to check if the input box itself is hidden is not acceptable.

Thank you,
Ting Men
0
 
LVL 2

Expert Comment

by:Codescripter
ID: 9703069
Hello again Ting Men,

For more points, I will develop the solution fully.

~Codescripter
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10352900
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Accept: Codescripter {http:#9691006}

Please leave any comments here within the next four days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer
0

Featured Post

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses how to create an extensible mechanism for linked drop downs.
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

622 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