Databases
StackOverflow2013
Postsdbo
POMove position of smooth-scrolling jquery arrows
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMove position of smooth-scrolling jquery arrows
    text
    copied!<p>I am using the jQuery Smooth Scrolling plugin on my site and would simply like to move the arrows which are displayed next to the container of the scrolling elements, rather them being inside it. If you hover over the carousel mid way through the page it will let you scroll left and right. I intend to have the arrows permanently viewable to the left and right. How can I move the arrows outside of the scroller container and show them on the left and right?</p> <p>Here is a live url link - <a href="http://bit.ly/1dIDzFJ" rel="nofollow">http://bit.ly/1dIDzFJ</a> The plugins homepage - <a href="http://smoothdivscroll.com/" rel="nofollow">http://smoothdivscroll.com/</a></p> <p>The arrows are dynamically created/displayed with the jQuery. But here is some of the HTML/CSS for the smooth-scrolling jQuery as implemented right now.</p> <p>HTML</p> <pre><code>&lt;div class="box-product" id="makeMeScrollable"&gt; &lt;div id="carousel-product"&gt; &lt;div class="span2"&gt; &lt;img src="img/ted.jpg" /&gt; &lt;p class="product-carousel-title"&gt;Angry Birds Adult Costume&lt;/p&gt; &lt;h5&gt;ONLY &amp;#163;46.99&lt;/h5&gt; &lt;a href="#"&gt;&lt;img src="img/addtocart.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="carousel-product"&gt; &lt;div class="span2"&gt; &lt;img src="img/ted.jpg" /&gt; &lt;p class="product-carousel-title"&gt;Angry Birds Adult Costume&lt;/p&gt; &lt;h5&gt;ONLY &amp;#163;46.99&lt;/h5&gt; &lt;a href="#"&gt;&lt;img src="img/addtocart.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="carousel-product"&gt; &lt;div class="span2"&gt; &lt;img src="img/ted.jpg" /&gt; &lt;p class="product-carousel-title"&gt;Angry Birds Adult Costume&lt;/p&gt; &lt;h5&gt;ONLY &amp;#163;46.99&lt;/h5&gt; &lt;a href="#"&gt;&lt;img src="img/addtocart.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="carousel-product"&gt; &lt;div class="span2"&gt; &lt;img src="img/ted.jpg" /&gt; &lt;p class="product-carousel-title"&gt;Angry Birds Adult Costume&lt;/p&gt; &lt;h5&gt;ONLY &amp;#163;46.99&lt;/h5&gt; &lt;a href="#"&gt;&lt;img src="img/addtocart.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="carousel-product"&gt; &lt;div class="span2"&gt; &lt;img src="img/ted.jpg" /&gt; &lt;p class="product-carousel-title"&gt;Angry Birds Adult Costume&lt;/p&gt; &lt;h5&gt;ONLY &amp;#163;46.99&lt;/h5&gt; &lt;a href="#"&gt;&lt;img src="img/addtocart.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="carousel-product"&gt; &lt;div class="span2"&gt; &lt;img src="img/ted.jpg" /&gt; &lt;p class="product-carousel-title"&gt;Angry Birds Adult Costume&lt;/p&gt; &lt;h5&gt;ONLY &amp;#163;46.99&lt;/h5&gt; &lt;a href="#"&gt;&lt;img src="img/addtocart.jpg" /&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- end makemescrollable --&gt; </code></pre> <p>CSS</p> <pre><code>div.scrollingHotSpotLeft { left: 5%; } #makeMeScrollable div.scrollableArea img { position: relative; float: left; margin: 0; padding: 0; /* If you don't want the images in the scroller to be selectable, try the following block of code. It's just a nice feature that prevent the images from accidentally becoming selected/inverted when the user interacts with the scroller. */ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none; } </code></pre>
 

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