jQuery: The Write Less, Do More JavaScript Library

Re: Thoughts on creating a hoverable alphabetical list

by Scott Sauyet-3 :: Rate this Message:

Reply to Author | View in Thread


Dave Joyce wrote:
> http://stuff.exit42design.com/grabup/475e4d0e25eaf92eefcecdd23af0b0c6.png
>
> It's an alphabetical list of letters down the left column. When you hover
> over those letters, a list in a block on the right side (with overflow
> hidden) moves up or down to the letter that's being hovered over. It's sort
> of reminiscent of the iPhone alphabetical list on the right side of the
> screen.

This question inspired me to a very rough draft of a plug-in that takes
an alphabetized list, extracts the initial letters and creates a
navigation list much like you described.  It is very rough, but might be
workable for you:

     http://scott.sauyet.com/Javascript/Demo/2009-06-06a/

This depends on Ariel Flesler's ScrollTo plug-in and Brian Cherne's
hoverIntent plug-in.

The nice thing is that the markup and the JS are very simple:

     <ul id="make">
       <li>Acura</li>
       <li>Alfa Romeo</li>
       <!-- ... -->
     </ul>

     $("#make").alphaList();

As a generic plug-in this would take much more work, but I think the
skeleton is there.  There is only one option right now, which lets you
choose whether a scrollbar show up.  By default it's false.

     $("#make").alphaList({scrollbar: true});


   -- Scott

 « Return to Thread: Thoughts on creating a hoverable alphabetical list