Solved

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

Posted on 2003-12-11
6
244 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

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…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

776 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