Solved

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

Posted on 2003-12-11
6
242 Views
Last Modified: 2012-06-21
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
Comment
Question by:dgelinas
6 Comments
 
LVL 17

Accepted Solution

by:
Tacobell777 earned 150 total points
ID: 9923930
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
 
LVL 11

Assisted Solution

by:Zontar
Zontar earned 150 total points
ID: 9925387
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
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9925694
zontar is correct

design the page not just for 800x600 design for ALL resolutions
0
 
LVL 6

Author Comment

by:dgelinas
ID: 9925780
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
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10395673
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
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…

762 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

25 Experts available now in Live!

Get 1:1 Help Now