Databases
StackOverflow2013
Postsdbo
POResponsive Design: Scrolling JS/JQuery Rotating Banner Using Percentages (not px)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive Design: Scrolling JS/JQuery Rotating Banner Using Percentages (not px)
    text
    copied!<p>I'm almost there. However, there is a bug which I can't work out. I think the problem is to do with using percentages rather than pixels (as I want the banner to resize for different screen widths).</p> <p>The banner scrolls every 5 seconds, but only gets to the 3rd image before heading back to the beginning. Also - when I resize the window very small, the banner only rotates between the first two images (and sometimes scrolls to a non-existent 5th image, displaying white space).</p> <p>I've played about with the Javascript. Changing the IF statement to be &lt; -400% (still rotates across 3 images). When I set it to &lt; -800% it goes to 2 images, and &lt; -1000% it never returns to the beginning! I'm very confused, but maybe I'm missing something obvious.</p> <p>HTML:</p> <pre><code>&lt;div id="wrapper"&gt; &lt;div id="subwrapper3"&gt; &lt;div class="bannerwrapmain"&gt; &lt;img src="/images/banner-image-1.jpg" /&gt; &lt;/div&gt; &lt;div class="bannerwrapmain"&gt; &lt;img src="/images/banner-image-2.jpg" /&gt; &lt;/div&gt; &lt;div class="bannerwrapmain"&gt; &lt;img src="/images/banner-image-3.jpg" /&gt; &lt;/div&gt; &lt;div class="bannerwrapmain"&gt; &lt;img src="/images/banner-image-4.jpg" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#wrapper { width:100%; overflow:hidden; margin:0px 0px 0px 0px; padding:0px; } #subwrapper3 { width:400%; overflow:hidden; margin: 0px; padding:0px; } .bannerwrapmain { display: block; width:25%; margin:0px; padding:0px; float:left; } .bannerwrapmain img { width:100%; margin:0px; padding:0px; height:auto; border:none; } </code></pre> <p>JAVASCRIPT:</p> <pre><code>window.setInterval(function(){ if ($("#subwrapper3").css("marginLeft") &lt; "-300%") { $("#subwrapper3").animate({ marginLeft: '0%' }); } else { $("#subwrapper3").animate({ marginLeft: '-=100%' }); } }, 5000); </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