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

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>
tingmenAsked:
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.

CodescripterCommented:
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

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
tingmenAuthor Commented:
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
CodescripterCommented:
Hello again Ting Men,

For more points, I will develop the solution fully.

~Codescripter
0
jaysolomonCommented:
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
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.