Databases
StackOverflow2013
Postsdbo
POResponsive text -- Function not Initializing with FitText and FlexSlider
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POResponsive text -- Function not Initializing with FitText and FlexSlider
    text
    copied!<p>I have a responsive slider using FlexSlider. I also want the text under each slider to resize. FitText does not initialize on any slide except for the first, or if I resize the window. How can I make this work (with no FOUC)? Should work in IE 8 up, plus modern browsers.</p> <p><a href="http://jsfiddle.net/simply_simpy/adtVP/11/" rel="nofollow">http://jsfiddle.net/simply_simpy/adtVP/11/</a></p> <p><strong>HTML</strong></p> <pre><code> &lt;div class="flexslider"&gt; &lt;ul class="slides"&gt; &lt;li&gt; &lt;figure&gt; &lt;img src="http://lorempixel.com/400/200/animals/" alt="" /&gt; &lt;figcaption&gt; &lt;h1&gt;Lorem ipsum dolor sit amet&lt;/h1&gt; &lt;p&gt;consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco &lt;/p&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;/li&gt; &lt;li&gt; &lt;figure&gt; &lt;img src="http://lorempixel.com/400/200/sports/" alt="" /&gt; &lt;figcaption&gt; &lt;h1&gt;uis nostrud exercitation ullamco &lt;/h1&gt; &lt;p&gt;Ut enim ad minim veniam, quis nostrud exercitation ullamco &lt;/p&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;/li&gt; &lt;li&gt; &lt;figure&gt; &lt;img src="http://lorempixel.com/400/200/people/" alt="" /&gt; &lt;figcaption&gt; &lt;h1&gt;ncididunt ut labore et dolore magna aliqua.&lt;/h1&gt; &lt;p&gt;abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco &lt;/p&gt; &lt;/figcaption&gt; &lt;/figure&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;​ </code></pre> <p><strong>CSS</strong><br></p> <pre><code> .flex-control-nav, .flex-control-paging { clear: both; } .flexslider { width: 100%; } .flexslider img { min-width: 100%; } h1 { font-size: 23px; width: 100%; } p { font-size: 16px; width: 100%; } .slides li {display: none} </code></pre> <p><strong>JS</strong> </p> <pre><code>$('.flexslider').flexslider(); $(".slides h1, .slides p").fitText(); ​ </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