Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 255
  • Last Modified:

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
0
dgelinas
Asked:
dgelinas
2 Solutions
 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now