Solved

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

Posted on 2003-11-05
5
404 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
  • 2
5 Comments
 
LVL 2

Accepted Solution

by:
Codescripter earned 50 total points
Comment Utility
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
Comment Utility
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
Comment Utility
Hello again Ting Men,

For more points, I will develop the solution fully.

~Codescripter
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now