Moveup List with Definition list items

Recently Chris posted an awesome jQuery code on his Css-Tricks blog that allows a list to scroll up and down by mouse movement. He used it for unordered list items though.

I would love to use this on my current client project, but I can't figure out how to use this on <dt> items

The HTML is this:

<dl>

            <dt><a href="#">Example.net</a></dt>
            <dd>
              1 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
            </dd>

            <dt><a href="#">Example2.net</a></dt>
            <dd>
              2 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
            </dd>

            <dt><a href="#">Example3.net</a></dt>
            <dd>
              3 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
            </dd>

            <dt><a href="#">Example4.net</a></dt>
            <dd>
              4 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
            </dd>
</dl>

<dd> is not below the <dt> items, its in another div placed by jQuery, so the <dt> of items is just lined up as links.

Also I am using the jQuery Plugin TinyScroll for the scrollbar, that sets the overflow: autoflow; or whatever. So that might be a reason that its not 开发者_如何学Pythonworking for me.

But here is Chris Code from the blog post:

$("#menu").css("overflow", "hidden").wrapInner("<div id='mover' />");

var $el,
    speed = 13.5,    // needs to be manually tinkered with
    items = $("#menu a");

items
.each(function(i) {
        $(this).attr("data-pos", i);
})
.hover(function() {

        $el = $(this);
        $el.addClass("hover");  

        $("#mover").css("top", -($el.data("pos") * speed - 40));
        // 40 is the top padding for the fadeout

}, function() {
        $(this).removeClass("hover");
});

What would I have to change to get it working for me?

http://jsfiddle.net/9uySK/ check this implementation.

you might have missed few things - position absolute on #mover element is one thing... but oh well - check the jsFiddle solution and if you have any questions just let me know and put them in the comments.

hope it helps,

Tom

ps. check the additions to the CSS as well

hide your <dd>s and use another container to hold their content

<div class="fancy-dl">
  <dl>
    ...
  </dl>
  <div class="displayer"></div>
</div>

and

$(function() {
  $('dd').hide();
  $('dt').hover(function() {
    var ddHtml = $(this).next('dd').html();
    $(this).parent().siblings('.displayer').hide().html(ddHtml).show();
  });
});

you may want to fade/animate the displayer rather than hide and show.

From the blog post http://css-tricks.com/the-moveup-menu/

Change:

items = $("#menu a");

to:

items = $("#menu dt");

and it should work with