Have scrollbar adjust itself depending on where current element of focus is located

I have a table that overflows off the screen, which produces the scrollbar to view the remaining portion of the table.  

Problem is that once I start tabing or using the right arrow to go next cell on the right the scrollbar only moves a tad, and I can sometimes not see what I'm focused on and have to move the scrollbar manually.  

Is there something I can use that will move the placement of the scrollbar to the right depending on the offsetWidth of the cell in focus?  Or plain and simply a way that will have the scrollbar monitor whatever element is in focus and adjust accordingly?? seems to get screwy because of the overflow.  

Thanks
LVL 6
dgelinasAsked:
Who is Participating?
 
Tacobell777Commented:
I do something like this

document.onkeydown = fnHandleKeyDown;

function fnHandleKeyDown()
{
      //alert(event.keyCode);
      switch ( event.keyCode )
      {
            // scroll window if tab was pressed
            case 9:
                  if( event.shiftKey )
                        fnScroll( 0, -20);
                  else
                        fnScroll( 0, 20);
                  break;
            // scroll up
            case 38:
                  fnScroll( 0, -40);
                  break;
            // scroll down
            case 40:
                  fnScroll( 0, 40);
                  break;
            // stop [enter] from submitting the form, however do allow it within a textarea
            case 13:
                  if ( event.srcElement.type != 'textarea' )
                  {
                        return false;
                  }
                  else
                  {
                        return true;
                  }
                  break;
      }
}

Which scrolls the window upon tabs being used, it scrolls down if its just a tab, it scrolls up if its a tab plus shift. The other stuff is just disabling the enter key within a form, so the user does not make a mistake, and it allows to scroll the window with the cursor keys, even within a textfield..
0
 
ZontarCommented:
A much better solution is to redesign the page so you don't get horizontal scrolling at a reasonable (800x600) resolution.

Horizontal scrolling usually = bad UI design.
0
 
jaysolomonCommented:
zontar is correct

design the page not just for 800x600 design for ALL resolutions
0
 
dgelinasAuthor Commented:
thx Tacobell, I'll try that tomorrow..  

The application is being made to duplicate the C++ version, so there is no learning curve for users with the online app,  which has the scrollbar working in the same way.  Doing otherwise is not an option.
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:

Split: Tacobell777 {http:#9923930} & Zontar {http:#9925387}

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

jAy
EE Cleanup Volunteer
0
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.

All Courses

From novice to tech pro — start learning today.