[jQuery] Re: Thoughts on creating a hoverable alphabetical list

[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


-- 
View this message in context: 
http://www.nabble.com/Thoughts-on-creating-a-hoverable-alphabetical-list-tp23856494s27240p24325150.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

[jQuery] Re: Thoughts on creating a hoverable alphabetical list

[Scott Sauyet]

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:


  Acura
  Alfa Romeo
  


$("#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

[jQuery] Re: Thoughts on creating a hoverable alphabetical list

[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?
  

[jQuery] Re: Thoughts on creating a hoverable alphabetical list

[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


* {
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;
}


 










Dodge


Ford


Geo
GMC




now we focus on the script :)



$(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


On Wed, Jun 3, 2009 at 8:13 PM, 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?
> --
> 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.
>
>