Scrolling to an item in a list

Question

I have a list of elements I would like to be able to have brought into focus when the user is selecting items. I've tried calling .focus() with Jquery on these objects to no avail. Is there anything I'm missing? :)

EDIT: I have a list (ul) of elements. I shift click on a starting item and and press the arrow keys to continue selecting. Up and down. I would really like for the shift selection to function as if it was in Finder or Windows Explorer. Scrolling up when an item is selected that's not visible (and down for the same case).

Are there any handy jQuery plugins to handle this for me?

EDIT2: Figured out some things and determined a larger problem.

Right now I am using the jQuery plugin called scrollTo. I can scroll to an element of my list using this plugin. However, "scrolling" to an item means it is now the first item in the list, which is NOT desirable behavior. Select any number of items in Finder or Explorer and see that when you shift-arrow select an item that's offscreen, it only scrolls down one item's worth of space and does NOT make it the top element.

Easy to fix of course. ;) I am currently keeping track of the current element just off screen on the top and the current element in the list that's just offscreen on the bottom. However, when the user selects an item out of the list after they have done some scrolling, I currently have no way to tell what elements are just out of sight, creating an impasse.

Any ideas? :P

Answer 1

It's not clear from your question, but if you're talking about automatically scrolling the page (or element) so that a particular element is in the viewport, you might try the scrollTo plugin.

$.scrollTo('#something'); // scrolls the whole page so #something is in view
$('#mydiv').scrollTo('#somethingelse'); // scrolls the (scrollable) div

Edit: Your question update provides a little more insight into what you're looking for. I'm not clear on what method you're using to achieve the shift-selection (or if you're actually expanding the question to ask how to do that). But assuming you're still just asking about the scrolling piece, I would add the scrolling call in a function attached to whichever event (custom?) is fired when you add another list item to your selection.

For example, assuming you're triggering a custom event called list_expanded each time an <li> is selected, you could try something like this:

$(document).ready( function(){
  $('ul#mylist').delegate('li','list_expanded', function(){
    $(this).scrollTo();
  });
});

Obviously you can also use a "regular" event like click, depending on how your multiple-select solution works.