StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You need to make a couple of changes to ensure the size of the inner container is fixed to the size of the images within, and then check the left and right position of the inner container.</p> <p>You are also better to animate to a specific coordinate rather than adding or subtracting from the previous one, as it will handle fast clicks much better.</p> <p>Working example: <a href="http://jsfiddle.net/4HSLb/13/" rel="nofollow">http://jsfiddle.net/4HSLb/13/</a></p> <p><strong>Markup:</strong></p> <pre><code><div id="content"> <div class="inner"> <img src="http://lorempixum.com/300/300" /> <img src="http://lorempixum.com/300/300" /> <img src="http://lorempixum.com/300/300" /> <img src="http://lorempixum.com/300/300" /> <img src="http://lorempixum.com/300/300" /> <img src="http://lorempixum.com/300/300" /> </div> </div> <div style=""> <a class="left" href="#">LEEEEFT</a> <a class="right" href="#">RIGHHHT</a> </div> </code></pre> <p><strong>CSS:</strong></p> <pre><code>#content { float: left; width: 610px; overflow: hidden; white-space: nowrap; max-width: 3000px; } .inner { background:#444; height:300px; } .inner img { float:left; margin-right:10px; } </code></pre> <p><strong>Script:</strong></p> <pre><code>var left = 0; var contentWidth = 0; var innerWidth = 0; var imgCount = 0; var imgWidth = 310; $(function () { contentWidth = parseInt($('#content').innerWidth()); left = parseInt($('.inner').css('margin-left')); imgCount = $('.inner img').size() innerWidth = parseInt(imgCount * imgWidth); $('.inner').width(innerWidth + "px"); $('.left').click(function (e) { e.preventDefault(); updatePos(imgWidth); if (left <= 0) { $('.inner').animate({ marginLeft: left + "px" }, 'fast'); } }); $('.right').click(function (e) { e.preventDefault(); updatePos(0 - imgWidth); if (left >= 0 - innerWidth + (imgWidth * 2)) { $('.inner').animate({ marginLeft: left + "px" }, 'fast'); } }); }); function updatePos(distance) { console.log("NewPos: " + (left + distance)); console.log(0 - innerWidth); if (left + distance <= 0 && left + distance >= 0 - innerWidth + (imgWidth * 2)) { left = left + distance; } //console.log(left); } </code></pre> <p><strong>Edit:</strong> Updated to prevent over scrolling when fast clicking.</p> <p><strong>Edit 2:</strong> Updated code to allow the number of images in view to be easily changed. Rather than editing the example code above, here is an example on jsFiddle: <a href="http://jsfiddle.net/4HSLb/14/" rel="nofollow">http://jsfiddle.net/4HSLb/14/</a></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