?
Solved

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

Posted on 2003-11-05
5
Medium Priority
?
424 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 200 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…

719 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