Question

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.

http://jsfiddle.net/simply_simpy/adtVP/11/

HTML

    <div class="flexslider">
      <ul class="slides">
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/animals/" alt="" />
              <figcaption>
                <h1>Lorem ipsum dolor sit amet</h1>
                <p>consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/sports/" alt="" />
              <figcaption>
                <h1>uis nostrud exercitation ullamco </h1>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
        <li>
            <figure>
              <img src="http://lorempixel.com/400/200/people/" alt="" />
              <figcaption>
                <h1>ncididunt ut labore et dolore magna aliqua.</h1>
                <p>abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
              </figcaption>
            </figure>
        </li>
      </ul>
    </div>​

CSS

    .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}

JS

$('.flexslider').flexslider();

$(".slides h1, .slides p").fitText();  ​

Answer 1

hope this would be helpful http://jsfiddle.net/adtVP/40/

roadmap:

1. read on short note on css tricks about fitText plugin
2. took Paul Irish’s cross browser implementation for fixing resize event in different browsers

3. switched from px to em (or any other relative values like %) on font sizes only here:

   ...
   h1 {
       font-size: .5em;
       width: 100%;
   }
   p {
      font-size: .2em;
      width: 100%;
   }
   ...
   

   made bit modification to the way how fit text are called

   $(".slides").fitText();
   

this basically will update font size on a parent level element which will make effect for em based font of children, and this is the whole idea.

also call the fit Text every time when window resized using snippet code from Paul.

that’s it, code it rough and needs to be cleaned and glanced but works.

UPD: code from the github source for fitText is blocked in IE by mismatching mime type, and that caused problems.
As a alternative solution you may just include source in your js file with correct type, and that will work.

old IE not working example is here http://jsfiddle.net/adtVP/35/ leave it here for the record, the new one above tested with IE Debug Toolbar down to 7 version, for sure it is not the same as a real browsers but so far so good.