jQuery Endless Scrolling loop

Question

I have a project on jsFiddle:

JavaScript:

var scroller = function() {
    $('#holder div').animate({
        left: ($t.attr('id') == 'prev' ? '-=' : '+=') + 3
    }, 10, 'linear', function() {
        if ($(this).position().left < -$('li:first-child', this).width()) {
            w = $('li:first-child', this).totalWidth();
            $('li:first-child', this).appendTo('ul', this);
            $(this).css('left', $(this).position().left + w);
        }
    });
};

$.fn.extend({
    totalWidth: function() {
        return this.outerWidth() + parseInt(this.css('margin-left'), 10) + parseInt(this.css('margin-right'), 10);
    }
});
wdth = 0;
$('#marquee ul li').each(function() {
    wdth += $(this).totalWidth();
});
$('#holder div').width(wdth);
var to;
$('#prev, #next').css('top', ($('#marquee').outerHeight() - $('#prev').outerHeight()) / 2).live('mousedown mouseup', function(e) {
    $t = $(this);
    if (e.type == 'mousedown') {
        to = setInterval(scroller, 15);
    }
    else {
        clearInterval(to);
    }
});

HTML:

<div id="marquee">
    <div id="prev"><</div>
    <div id="next">></div>
    <div id="holder">
        <div>
        <ul>
            <li>Part 1</li>
            <li>Part 2</li>
            <li>Part 3</li>
            <li>Part 4</li>
            <li>Part 5</li>
            <li>Part 6</li>
            <li>Part 7</li>
            <li>Part 8</li>
            <li>Part 9</li>
            <li>Part 10</li>
        </ul>
    </div>
    </div>
</div>

CSS:

* {
    font-family: verdana;
    font-size: 12px;
}
#marquee {
    top: 50px;
    position: relative;
    width: 80%;
    height: 34px;
    background-color: #CCC;
    margin: 0 auto;
    padding: 0;
}
#holder {
    overflow: hidden;
position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
}
#holder div {
    position: absolute;
}
#marquee ul li {
    display: inline-block;
    float: left;
    margin-left: 5px;
    padding: 5px 7px;
    background-color: #555;
}
#marquee ul li:nth-child(2n+1) {
background-color: #888;
}
#marquee ul li:first-child {
    margin-left: 0;
}
#prev, #next {
    position: absolute;
    top: 10px;
    background-color: #66F;
    padding: 2px;
    cursor: pointer;
    z-index: 9002;
}
#prev {
    left: -13px;
    border-radius: 5px 0 0 5px;
}
#next {
    right : -13px;
    border-radius: 0 5px 5px 0;
}

what I am trying to achieve is a scrolling loop on mousedown, stopping on mouseup.

I have been able to make it scroll, and loop but it 'jumps' on every loop change.

Does anyone have any ideas?

I have edited the fiddle to remove the CSS rule, also edited the code slightly.

Originally when it scrolled left, it jumped back about 20px and this was made to seem worse by the CSS rule!

Also the animation goes on in 10ms but it loops every 15ms due to the fact that on mouseup the loop would continue for a bit.

The right does not loop because since I did not know how to do the left, I would not waste time making it scroll right erroneously when i could simply make it scroll correctly when it was ready.

I am not using a plugin because I want to learn how to do it myself (stubborn!)

Out of curiosity, is there a reason you're not using one of the many plugins that does this already? Also, the right scrolling arrow does not loop at all. — Matt Ball
– Matt Ball, Commented Dec 11, 2011 at 20:34
The animation goes on in 10 miliseconds, but the loop reset every 15th millisecond. Wouldn't it make it look rather odd? — Robin Castlin
– Robin Castlin, Commented Dec 11, 2011 at 20:35
Just so you know, I went ahead and added the JSFiddle code into the question. This is because we want the question to have value even if that site goes down. — Andrew Whitaker
– Andrew Whitaker, Commented Dec 11, 2011 at 20:35
Can you explain the 'jumps' part a bit more? Do you mean the color assigned to each "Part #" box? — nsanders
– nsanders, Commented Dec 11, 2011 at 20:37
The reason it looks jumpy is because of the nth-child(2n+1) css rule. When you add/remove elements from your scroller, the position of child elements is going to change — Andrew Whitaker
– Andrew Whitaker, Commented Dec 11, 2011 at 20:41

techfoobar · Accepted Answer · 2011-12-17 06:21:21Z

1

Forked your fiddle and added code a) that eliminates jumpiness while scrolling and b) that checks and adds the first <li> to the end of the list (if there's space) while scrolling right (next)

Check this fiddle: http://jsfiddle.net/CRy4Q/15/

answered Dec 17, 2011 at 6:21

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery Endless Scrolling loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related