1

I'm struggling with a jquery problem.

I think I am close to a solution but I keep stumbling at the moment.

So my markup (simplyfied) looks like this:

<div class="col">
    Content
   <div class="scroll-container">
      <ul>
        <li>Content</li>
        <li>Content</li>
        <li>Content</li>
      </ul>
   </div>
<a href="#" class="scroll">scroll down</a>
</div>

Basically a .col that holds a container and a button.


The Plan:

1) After a click on the button container should scroll down to the next <li>.

2) When the last <li> is reached it scrolls to the first <li> again. So I need a loop.

3) The numbers and size of <li> may change from case to case. So basically the button should just scroll the next <li> to the top of the container.

4) The scrolled <li> needs to have a little margin to the top edge of the container.


Where I am:

I had a similar problem which got brilliantly solved by ronalchn and since the problem is somewhat similar I have created a fiddle based with his code.

Fiddle with the solved problem (To see the code in action)

Fiddle with the this problem (Obviously doesn't work with the same jquery)

I think the code basically only needs a little rearranging to work with the new situation.

I have tried for a couple of hours but it seems like this is still beyond my current level of understanding jquery.

I am very greatfull for any push in the right direction. Thank you.

3
  • Maybe fix your fiddle so that the scrollable content is visible. Sep 15, 2012 at 3:17
  • Unfortunately I can only post 2 links at the moment, so here it is: Fiddle with scrollable elements visible I hope it helps.
    – Arrowcatch
    Sep 15, 2012 at 3:40
  • I edited your post to swap the links, in order to better help future questers. ;) Sep 15, 2012 at 4:42

1 Answer 1

1

Here you go: http://jsfiddle.net/UQsv9/7/

CSS changes: added position: relative to your ul

I'm using $.fn.data to store the current child, from there it's just using the difference between the two offsets to calculate the new top.

3
  • Wow, amazing work! I didnt expect to get a solution so quick! Thank you @Royce ! I havent worked with "$.fn.data" yet, so I guess I have much to learn. :-) Thank you for the //comments. Helps me a lot with the understanding! All the best to you.
    – Arrowcatch
    Sep 15, 2012 at 3:46
  • Hi @Royce Feng, unfortunately I got an "Uncaught TypeError" while implementing the code. I had to update the class-names, but left everything else untouched. fiddle - updated classnames. Here is a live example from my site: Live example Any idea what I am doing wrong?
    – Arrowcatch
    Sep 15, 2012 at 4:37
  • You moved your scroll button within a <p>, you'll need to change var container = $(this).siblings('.scroll-container').find('ul'); to var container = $(this).parent().siblings('.scroll-container').find('ul');
    – Royce Feng
    Sep 15, 2012 at 4:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.