How to ScrollTo next & next & next....... element

Question

    <div class="wrap">
        <div class="layer">
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
    <div class="post"></div>
        </div>
    </div>
<span class="next" style="cursor:pointer;"> (next div) </span>

jQuery with ScrollTo Plugin (http://demos.flesler.com/jquery/scrollTo/)

$('.next').click(function() {
    $(".wrap").scrollTo( $('.post').next(), 800, {margin:true} );
});

Demo : http://jsfiddle.net/UaGjs/8/

It doesnt work :( It work only 1st time

Because you always re-obtain a handle to the DOM elements with `$('.post')`, rather than re-using the object and calling `.next()` on it iteratively. — Lightness Races in Orbit, May 04 '11 at 12:24

Nicky Waites · Accepted Answer · 2011-05-04T20:01:17.167

9

Working on Tomalak's answer you need to update the reference obj points to to the next element

http://jsfiddle.net/UaGjs/7/

var next;
$('.next').click(function() {
   if ( next === undefined ) {
     next = $('.post').next();
   } else {
      next = next.next();   
   }
   $(".wrap").scrollTo(next , 800, {margin:true} );
});

I've updated it with Prev but it can be improved to remove the duplication

http://jsfiddle.net/UaGjs/10/

I've noticed there is an occompanying plugin called Serial Scroll

Final edit

http://jsfiddle.net/nickywaites/UaGjs/13/

edited May 04 '11 at 20:01

answered May 04 '11 at 12:40

Nicky Waites

2,428
18
19

1

Alright well Prev will need to be the previous of next and not the starting point... so you'll need to check if next is undefined too. I think we might be able to tidy that up a bit. – Nicky Waites May 04 '11 at 12:47
1

I just mean there is a lot of duplicated code. Unfortunately lunch break is over here :) I've updated my answer to show you what I mean. – Nicky Waites May 04 '11 at 12:52
One more thing.... Any way to hide ARROWs when :first-child or :last-child is left0 or right0 ? – l2aelba May 04 '11 at 13:51
@l2aelba Are you able to include Id's with these post divs? – Nicky Waites May 04 '11 at 15:15
One more thing a little thing... 4 DIVs will show but arrow-next will not hide ( i must click more 3-4 clicks that will arrow hide) – l2aelba May 05 '11 at 07:33
Done , with if (position === posts.length - 4) { next.hide(); } – l2aelba May 05 '11 at 07:36
1

Yeah I think that is a sizing issue with the css. I'm not really sure how to fix that. Maybe play around with the widths. – Nicky Waites May 05 '11 at 07:41
Anyway to run same HTML codes as multiple sliders ? http://jsfiddle.net/UaGjs/16/ – l2aelba May 13 '11 at 09:33
1

@l2aelba I'm sure it is possible but I don't have much time to help out at the moment. – Nicky Waites May 15 '11 at 15:18
Its ok now, i finished about this :D – l2aelba May 16 '11 at 08:47

score 1 · Answer 2 · answered May 04 '11 at 12:30

1

Because you always re-obtain a handle to the DOM elements with $('.post'), rather than re-using the object and calling .next() on it iteratively.

Try the following. It's untested and rough/ready, but should demonstrate how you can get around the scoping issue.

$(function() {
    var $obj = $('post');
    $('.next').click(function() {
        $('.wrap').scrollTo($obj.next(), 800, { margin:true });
    });
});

answered May 04 '11 at 12:30

Lightness Races in Orbit

378,754
76
643
1,055

@l2aelba: It's a starting point. Some effort is required to mould it into a full solution that works for you. – Lightness Races in Orbit May 04 '11 at 12:34

score 1 · Answer 3 · edited Mar 04 '12 at 21:18

1

Because you always re-obtain a handle to the DOM elements with $('.post'), rather than re-using the object and calling .next() on it iteratively.

Try the following. It's untested and rough/ready, but should demonstrate how you can get around the scoping issue.

edited Mar 04 '12 at 21:18

Mark Ursino

31,209
11
51
83

answered Mar 04 '12 at 10:15

Mayank Jindal

25
3

add this $(function() { var $obj = $('post'); $('.next').click(function() { $('.wrap').scrollTo($obj.next(), 800, { margin:true }); }); }); – Mayank Jindal Mar 04 '12 at 10:15

score 0 · Answer 4 · answered Dec 18 '13 at 16:05

I didn't have much luck working with next(). What I did was load all my elements of the same class into an array:

 myArray = $('.post');

Then initialize an index:

 index = 1;

Then iterate through the array:

$('.next').click(function() {
 $(".wrap").scrollTo( myArray[index], 800, {margin:true} );
 index++;
});

Hope this is helpful!

How to ScrollTo next & next & next....... element

4 Answers4