Note that there are some explanatory texts on larger screens.

plurals
  1. POoverflow:hidden breaks jQuery slider
    primarykey
    data
    text
    <p>I have a slider that bounces back and forth between divs when you click on a link. It works all the way up until you add <code>overflow: hidden</code>, and then everything breaks!</p> <p>I created a <a href="http://jsfiddle.net/z67tZ/" rel="nofollow">demo</a> for anyone to look at. You'll notice it works, but try to add <code>overflow: hidden</code> to the <code>.clickWrapper</code> div to hide the divs sliding in and it breaks. It will scroll past other divs when you click on the one you want.</p> <p><a href="http://jsfiddle.net/z67tZ/" rel="nofollow">http://jsfiddle.net/z67tZ/</a></p> <pre><code>$(function() { $(".clickIt a").click(function() { var linked = $(this).attr("href"); var pos = $(linked).position(); $(".clickSlider").stop().animate({ left: -pos.left, }, 500); }); }); </code></pre> <pre><code>&lt;div id="wrapper"&gt; &lt;div class="clickIt"&gt; &lt;a href="#one"&gt;one&lt;/a&gt; &lt;a href="#two"&gt;two&lt;/a&gt; &lt;a href="#three"&gt;three&lt;/a&gt; &lt;/div&gt; &lt;div class="clickWrapper"&gt; &lt;div class="clickSlider"&gt; &lt;div id="one"&gt;one&lt;/div&gt; &lt;div id="two"&gt;two&lt;/div&gt; &lt;div id="three"&gt;three&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <pre class="lang-css prettyprint-override"><code>#wrapper {margin: 0 auto; width: 200px; } .clickWrapper {background:red; position:relative; overflow:hidden; background-color: #CCC; height: 200px; } .clickSlider { position: relative; width: 600px; } #one, #two, #three { float: left; width: 200px; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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