Thoughts on creating a hoverable alphabetical list

[Dave Joyce]

I'm trying to figure out a good way to approach this.

Basically here's a shot of what's needed. 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.

I was thinking of creating the letters with anchors to the list as you would see on a normal html page. The question is, how can I tell the content within the div to move up or down? How do I know how far to have it move?

[waseem sabjee]

first lets take a look at the HTML
also for the round corners i would suggest the jquery.corner plugin which helps me a lot

<style type="text/css">
* {
margin:0;
padding:0;
}
#list {
background-color:#999;
}
#list div {
display:inline-block;
}
#alphabets li {
list-style-type:none;
margin: 2px 0;
padding:2px;
}
.contents {
padding:2px;
}
</style>

<div id="list"> <!-- wrapper -->

<div>
<ul id="alphabets">
<li><a href="A"></li>
<li><a href="B"></li>
<li><a href="C"></li>
</ul>
</div>
<div>
<div class="contents">
Dodge<br />
</div>
<div class="contents">
Ford<br />
</div>
<div class="contents">
Geo<br />
GMC<br />
</div>

</div>

now we focus on the script :)

<script type="text/javascript">

$(function() {
// create a reference point
var obj = $("#list");
// create reference to your click-able options
var headings = $("#alphabets li", obj);
// create reference points for content for each options
var contents = $("div.contents", obj);
// declare the initial state
var index = 0;
// hide all contents
contents.hide();
// show initial content
contents.eq(index).show();
// add active class
headings.eq(index).addClass("active");
// click event
headings.click(function(e) {
// prevent default hyperlink behavior
e.preventDefault();
// get the current list item clicked
var current = headings.index($(this));
//  do transition only if the selected list item is not clicked
if(index != current) {
// hide old
contents.eq(index).hide();
// remove old active
headings.eq(index).removeClass("active");
// add new active
headings.eq(current).addClass("active");
// show new
contents.eq(current).show();
// reset index
index = current;
}
});
});

sorry if i have syntax errors i scripted this in like 5 minutes. kinda in a hurry

</script>

On Wed, Jun 3, 2009 at 8:13 PM, Dave Joyce <davidjoyce@...> wrote:

I'm trying to figure out a good way to approach this.

Basically here's a shot of what's needed.
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.

I was thinking of creating the letters with anchors to the list as you would
see on a normal html page. The question is, how can I tell the content
within the div to move up or down? How do I know how far to have it move?
--
View this message in context: http://www.nabble.com/Thoughts-on-creating-a-hoverable-alphabetical-list-tp23856494s27240p23856494.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

[Jack Killpatrick]

Neat idea. I think you could use this and give each LI a letter class (
class="d" ), then use it to scroll to that LI:

http://demos.flesler.com/jquery/scrollTo/

- Jack

Dave Joyce wrote:

> I'm trying to figure out a good way to approach this.
>
> Basically here's a shot of what's needed.
> 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.
>
> I was thinking of creating the letters with anchors to the list as you would
> see on a normal html page. The question is, how can I tell the content
> within the div to move up or down? How do I know how far to have it move?
>  

[Scott Sauyet-3]

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

[Dave Joyce]

Thanks everyone and thanks Scott for the help. I'm just getting into this project and your help has been *invaluable*!

I'll let you know how it goes. I think your plugin Scott should work really well! =)

-Dave