I asked this question over in the Bootstrap sub, but I’m realizing now that there may simply not be a standard widget that accomplishes this; I’m not a front-end guy, and I don’t even know what these elements are called.
Basically, I want to have a sidebar navigation list with the “current” entry centered and highlighted in the surrounding group with ten items above and below. Each item is a link. On the top and bottom of this area, there are arrows to scroll the entire list by the entire amount of it, i.e. to show the next entries.
This is a screenshot showing the desired functionality from the Oxford English Dictionary; it’s a subscription item so I can’t provide an actual link, but if you click on the OED site, you can select the Word of the Day from a right-side nav, and this navigation item will work (though won’t be clickable).
OED sidebar nav
Is there a straightforward way to implement this in jQuery? I can load the next list by AJAX, or I can have the entire list in a variable, as necessary.
If I’m understanding this right, put all of your items in a div with whatever height/width you want and set overflow to hidden. Then set a margin-top on the first element in the list of items and then add/subtract from that value with each arrow click. Add a CSS transition to changes to that margin value to give it a smooth animation instead of being jerky. You’ll only need to use jQuery to handle the arrow click changing the top margin value, everything else will be CSS.
Members
Online