Databases
StackOverflow2013
Postsdbo
PORecreating a simple carousel slider from JSFiddle
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORecreating a simple carousel slider from JSFiddle
    text
    copied!<p>I am recreating this slide found on StackOverflow but with different tags as some of the names are used elsewhere in my site and conflict.</p> <p>The original JS Fiddle can be found here: <a href="http://jsfiddle.net/KSHSX/6/" rel="nofollow">http://jsfiddle.net/KSHSX/6/</a></p> <p>The JS Fiddle that I am trying to change to fit within my site can be found here: <a href="http://jsfiddle.net/owenoneill/KzmTM/1/" rel="nofollow">http://jsfiddle.net/owenoneill/KzmTM/1/</a></p> <p>I would like it to work as the first one but with different div names, and by using a tags instead, basically exactly the same but with different ids/classes - I'm usually okay at customising basic javascript/css attributes, but having a little trouble this time round.</p> <p>Any help is appreciated, I feel like I'm nearly there.</p> <p>Separate MarkUp can be seen below:</p> <p>JAVASCRIPT:</p> <pre><code> &lt;script type="text/javascript"&gt; var sliderWidth = 300; var slider = $('#slidie'); var sliderCount = $('div', slider).length; slider.width(sliderCount * sliderWidth); $('a.date-nav-prev').click(function () { $('#slidie').animate({left: '+='+sliderWidth}, 500); }); $('a.date-nav-next').click(function () { $('#slidie').animate({left: '-='+sliderWidth}, 500); }); &lt;/script&gt; </code></pre> <p>HTML:</p> <pre><code>&lt;a class="date-nav-prev"&gt;&lt; Prev&lt;/a&gt; &lt;a class="date-nav-next"&gt;Next &gt;&lt;/a&gt; &lt;div id="wrapper"&gt; &lt;div id="slidie"&gt; &lt;div id="daysAgo2"&gt;Actions from 2 Days Ago&lt;/div&gt; &lt;div id="yesterday"&gt;Yesterday's Actions&lt;/div&gt; &lt;div id="today"&gt;Today's Actions&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code> &lt;style type="text/css"&gt; #wrapper{ width:300px; height:300px; border:1px solid #333; position:relative; overflow:hidden; } #slidie { width: 1000px !important; height: 100% !important; position: absolute; } #slidie div { width:300px; height:100%; float:left; } #today{background:green;} #yesterday {background:yellow;} #daysAgo2 {background:orange;} &lt;/style&gt; </code></pre> <p>Any thoughts, directions would be greatly appreciated!</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