Databases
StackOverflow2013
Postsdbo
POSliding Horizontal divs in JQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSliding Horizontal divs in JQuery
    text
    copied!<p>I'm trying to make a sliding div module which is controlled by 'left' and 'right' buttons on either side of the wrapper div, but I'm having some trouble with figuring out the best way to do so.</p> <p>The HTML structure of this module is like so:</p> <pre><code>&lt;div class="wrapper"&gt; &lt;div class="scrollLeft"&gt; &lt;span&gt;Left&lt;/span&gt; &lt;/div&gt; &lt;div class="scrollingDivs"&gt; &lt;div class="scrollThis"&gt;Some content&lt;/div&gt; &lt;div class="scrollThis"&gt;different content&lt;/div&gt; &lt;div class="scrollThis"&gt;more content&lt;/div&gt; &lt;div class="scrollThis"&gt;even more content&lt;/div&gt; &lt;div class="scrollThis"&gt;and more content&lt;/div&gt; &lt;/div&gt; &lt;div class="scrollRight"&gt; &lt;span&gt;Right&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The corresponding CSS looks like this:</p> <pre><code>.wrapper{ width: 720px; float: left; height: 146px; position: relative; } .scrollLeft, .scrollRight{ display: inline-block; width: 20px; height: 130px; text-indent: -99999px; cursor: pointer; } .scrollLeft{ background: url('../img/left.png') no-repeat; float: left; margin-right: 16px; } .scrollRight{ background: url('../img/right.png') no-repeat; float: right; } .scrollLeft:hover{ background: url('../img/left-hl.png') no-repeat; } .scrollRight:hover{ background: url('../img/right-hl.png') no-repeat; } .scrollingDivs{ width: 672px; margin-left: 28px; position: absolute; margin-top: 5px; overflow: hidden; height: 146px; } .scrollThis{ display: inline-block; background: #fff; border: 1px solid rgba(65,65,66,0.3); border-top: 0; border-bottom: 0; width: 160px; height: 140px; padding-left: 5px; padding-right: 5px; padding-top: 3px; padding-bottom: 3px; margin-right: 0; margin-left: -8px; line-height: 16px; left: 0; } </code></pre> <p>There's a bit more to it, but that's the basic gist of it.</p> <p>So when scrollLeft is clicked, the scrollThis divs should go slightly transparent and move to the left - the first ones should go out of sight, and the ones more to the right should pop into sight. Ideally, I would also check to be sure that if the scrolled divs are at either end that another effect happens instead (maybe the scrollLeft arrow glows or something).</p> <p>So I began on the JQuery for this but ran into an early issue of how to actually get them to move. Because of the way that this is all set up, doing an animate with left-=50 doesn't seem to work. Here's what I have for that so far, though it's rudimentary right now at best. This is just testing on the 'click left' portion'.</p> <pre><code> &lt;script&gt; $(document).ready(function(){ $('.scrollLeft').click(function(){ $('.scrollThis').animate({ opacity: '0.25', left: '-=50' }, 500, 'linear', function(){}); }); }); &lt;/script&gt; </code></pre> <p>What happens in my testing is that the opacity will fade, yes, and the divs will all receive -=50 to the left property, but they don't move. How should I better structure the JS or CSS to get the desired effect?</p> <p>Thanks</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