Databases
StackOverflow2013
Postsdbo
POjQuery Endless Scrolling loop
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Endless Scrolling loop
    text
    copied!<p>I have a project on jsFiddle:</p> <p><a href="http://jsfiddle.net/willisilliw/aPgPk/" rel="nofollow">jsFiddle Link</a></p> <p><strong>JavaScript:</strong></p> <pre><code>var scroller = function() { $('#holder div').animate({ left: ($t.attr('id') == 'prev' ? '-=' : '+=') + 3 }, 10, 'linear', function() { if ($(this).position().left &lt; -$('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); } }); </code></pre> <p><strong>HTML:</strong></p> <pre><code>&lt;div id="marquee"&gt; &lt;div id="prev"&gt;&lt;&lt;/div&gt; &lt;div id="next"&gt;&gt;&lt;/div&gt; &lt;div id="holder"&gt; &lt;div&gt; &lt;ul&gt; &lt;li&gt;Part 1&lt;/li&gt; &lt;li&gt;Part 2&lt;/li&gt; &lt;li&gt;Part 3&lt;/li&gt; &lt;li&gt;Part 4&lt;/li&gt; &lt;li&gt;Part 5&lt;/li&gt; &lt;li&gt;Part 6&lt;/li&gt; &lt;li&gt;Part 7&lt;/li&gt; &lt;li&gt;Part 8&lt;/li&gt; &lt;li&gt;Part 9&lt;/li&gt; &lt;li&gt;Part 10&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p><strong>CSS:</strong></p> <pre><code>* { 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; } </code></pre> <p>what I am trying to achieve is a scrolling loop on mousedown, stopping on mouseup.</p> <p>I have been able to make it scroll, and loop but it 'jumps' on every loop change.</p> <p>Does anyone have any ideas?</p> <hr> <p>I have edited the fiddle to remove the CSS rule, also edited the code slightly.</p> <p>Originally when it scrolled left, it jumped back about 20px and this was made to seem worse by the CSS rule!</p> <p>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.</p> <p>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.</p> <p>I am not using a plugin because I want to learn how to do it myself (stubborn!)</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload