Databases
StackOverflow2013
Postsdbo
POjQuery "Cycle" plugin causing content to not center, how can I fix this?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery "Cycle" plugin causing content to not center, how can I fix this?
    text
    copied!<p>I'm trying to use the jQuery "Cycle" plugin (http://jquery.malsup.com/cycle/) to rotate testimonials located within <code>&lt;span&gt;</code>s ... however the plugin is causing my content to not be centered. Yesterday morning someone here pointed out the <code>&lt;span&gt;</code> elements are being absolutely positioned by the plugin: <code>$slides.css({position: 'absolute', top:0, left:0}).hide()</code></p> <p>I don't know JS and I'm still working on my HTML/CSS, so I was hoping someone here knew a fix for this and could help me. If not oh well :/</p> <p>I've tried adding <code>left:50%</code> and although it centers, the slide is broken and all my <code>&lt;span&gt;</code>s appear at once.</p> <p>[Edit]</p> <p>Here's the HTML &amp; CSS:</p> <pre><code>&lt;div class="slideshow"&gt; &lt;span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;"&gt;Hi&lt;/span&gt; &lt;span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;"&gt;Goodbye&lt;/span&gt; &lt;/div&gt;&lt;br /&gt; .slideshow { width:940px; height:64px; text-align:center; background-image:url(../images/quotes.png); } </code></pre> <p>Alone, everything works as planned. Then I add the jQuery/Cycle plugin:</p> <pre><code>// set position and zIndex on all the slides $slides.css({position: 'absolute', top:0, left:0}).hide().each(function(i) { var z; if (opts.backwards) z = first ? i &lt;= first ? els.length + (i-first) : first-i : els.length-i; else z = first ? i &gt;= first ? els.length - (i-first) : first-i : els.length-i; $(this).css('z-index', z) }); </code></pre> <p>This is what screws it all up. As is, the <code>&lt;span&gt;</code> s are shown one at a time and fade in and out like they're supposed to, except the text isn't centered anymore due to the absolute positioning. So I changed <code>left:0</code> to <code>left:50%</code> - wha la! Problem solved text is centered, except NOW the spans are all shown at the same time and there's no fading in/out.</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