Databases
StackOverflow2013
Postsdbo
POOne set of dynamically generated controls for two sliding lists (jQuery)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOne set of dynamically generated controls for two sliding lists (jQuery)
    text
    copied!<p>I am using the Easy Slider plugin (<a href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding%29" rel="nofollow">http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding)</a> to scroll several lists. The plugin dynamically generates the controls for the lists. So there are two sets of controls showing up. I was wondering if I could bind the controls into a single set. I would like the single controls to slide/scroll both lists at the same time. The reason I am doing this I have 100% width background that I want to scroll the same time as a "feature" div inside my wrapper. The layout/css is working great - just need a hand with the js.</p> <p>FUNCTION</p> <pre><code>&lt;script&gt; $(document).ready(function(){ $("#slides, #slideTop").easySlider({ auto: true, continuous: true, numeric: true }); }); &lt;/script&gt; </code></pre> <p>HTML</p> <pre><code>&lt;div id="slides"&gt; &lt;ul&gt; &lt;li class="slideOne"&gt;&lt;/li&gt; &lt;li class="slideTwo"&gt;&lt;/li&gt; &lt;li class="slideThree"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="container_16"&gt; &lt;div class="grid_16"&gt; &lt;div id="slideTop"&gt; &lt;ul&gt; &lt;li&gt;One&lt;/li&gt; &lt;li&gt;Two&lt;/li&gt; &lt;li&gt;Three&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p> </p> <p>CSS</p> <pre><code>#slideTop{ width:940px; height: 350px; background-color: #ccc; position: absolute; z-index: 9999; overflow: hidden; } #slides{ width:100%; height: 350px; background-color: blue; margin: 0 auto; position: absolute; top:144px; z-index: -9999; overflow: hidden; } #slideTop ul { padding:0; width: 940px; height: 350px; } #slideTop ul li { height:350px; list-style:none; width: 940px; } #slides ul { margin: 0 auto; padding:0; width: 100%; height: 350px; } #slides ul li { margin:0; padding:0; height:350px; list-style:none; width:4000px; float: left; } .slideOne { background: url(images/one.gif) repeat-x; width: 100%; height: 350px; } .slideTwo { background: url(images/two.gif) repeat-x; width: 100%; height: 350px; } .slideThree { background: url(images/three.gif) repeat-x; width: 100%; height: 350px; } ul#controls { height:21px; padding:0; width:100px; position:absolute; z-index:500; top:620px; float:left; margin-left:430px } ul#controls li { float:left; height:21px; list-style-type:none; margin:0; padding:0 3px; width:21px } ul#controls li a { background:url(images/ss.png) no-repeat 0 0; display:block; float:left; height:21px; width:21px; border: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