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 <davidjo...@exit42design.com>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.
>
>
