We help IT Professionals succeed at work.

Scroll <DIV> rows using up and down arrows

b2dac
b2dac asked
on
10,665 Views
Last Modified: 2008-07-18
Is there a way to scroll a list of rows comprised of DIV tags, using the keyboards up and down arrows? The rows are contained within another DIV tag, which limits the size of the contained DIVs, so the amount of rows usually exceeds the size, so when using the up and down arows the active selection would also need to make sure it is visible. Thanks
Comment
Watch Question

Principal Software Engineer
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
This is perfect. Thank you!
Devario JohnsonPrincipal Software Engineer
CERTIFIED EXPERT

Commented:
N.p :)

Author

Commented:
That's strange I'm getting a 'ScrollTop' is null or not an object error?

Author

Commented:
I FOUND THE PROBLEM....(actually 2)

First, there is a variable that is referenced before it is even set. So we must move part of the code up.
FROM:
            // Get the current scroll offset.
            var currentScroll = innerEl.scrollTop;
            var latestScroll = currentScroll;
   
            // Get a handle to the element inside the scrolled element that is our current
            // scrolling target
            var innerEl = document.getElementById(innerElementPrefix + scrollLocation);

TO:
            // Get a handle to the element inside the scrolled element that is our current
            // scrolling target
            var innerEl = document.getElementById(innerElementPrefix + scrollLocation);
                  
            // Get the current scroll offset.
            var currentScroll = innerEl.scrollTop;
            var latestScroll = currentScroll;

Second, I'm using IE7 and the up arrow/down arrow keys were not being detected. To fix this I switched this code:  
FROM: event.which == 63233     (FOR DOWN ARROW)
TO: unicode=event.keyCode? event.keyCode : event.charCode == 40
...and...
FROM: event.which == 63232     (FOR UP ARROW)
TO: unicode=event.keyCode? event.keyCode : event.charCode == 38

Author

Commented:
CORRECTION - on the second part of my last post:

THIS: unicode=event.keyCode? event.keyCode : event.charCode

SHOULD BE: event.keyCode
Devario JohnsonPrincipal Software Engineer
CERTIFIED EXPERT

Commented:
cool nice job man
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.