CODEWITHSUNDEEP
jqueryhtml
nowayyy
nowayyy

Reputation: 917

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.

alt text

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

Upvotes: 2

Views: 471

Answers (3)

satrun77
satrun77

Reputation: 3220

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

Change:

items = $("#menu a");

to:

items = $("#menu dt");

and it should work with

Upvotes: 0

Tom Tu
Tom Tu

Reputation: 9593

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

Upvotes: 2

Walf
Walf

Reputation: 9298

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.

Upvotes: 0

Related Questions