応答テキスト - FitTextおよびFlexSliderで関数が初期化されない

Question

FlexSliderを使用するレスポンシブスライダーがあります。 また、各スライダーの下のテキストのサイズを変更したいと思っています。 FitTextは、最初のスライドを除いて、またはウィンドウのサイズを変更した場合は、いずれのスライドでも初期化されません。 この作業を行うにはどうすればよいですか（FOUCなし）？ IE 8以上で動作し、最新のブラウザで動作するはずです。

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

希望これは参考になるhttp://jsfiddle.net/adtVP/40/

ロードマップ：

2. がでresizeイベントを固定するためのポール・アイリッシュのクロスブラウザの実装を取っfitTextプラグインについては、CSSのトリックに短いメモで読みます異なるブラウザ

3. を0から切り替えるここでしかフォントサイズのemから（％など、または任意の他の相対値）：

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

   フィットテキストが

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

この基本的に更新されますと呼ばれる方法方法に

作られたビットの変更子供のemベースのフォントのために効果を発揮する、親レベル要素のフォントサイズ。これが全体のアイデアです。

また、Paulのスニペットコードを使用してウィンドウのサイズを変更するたびに、フィットテキストを呼び出します。

それは、それは荒く、きれいにして見なければならないが、動作しますが、動作します。

UPD：fitTextのgithubソースからのコードは、MIMEタイプの不一致によってIEでブロックされ、問題が発生しました。 代わりの解決策として、正しいタイプのjsファイルにソースを入れるだけで、それがうまくいくかもしれません。

古いIEに動作していない例はhttp://jsfiddle.net/adtVP/35/が、それは本当のブラウザが、これまでのところと同じでないことを確認するために、レコード、上記7のバージョンにダウンIEデバッグツールバーでテスト新しいもののためにそれをここに残してここにあります良い。

Answer 2

$('.flexslider').flexslider({ 
before: function(slider) { 
    $(".slides h1, .slides p").css("color","#ffffff"); 

    }, 

after: function(slider) { 
    $(".slides h1, .slides p").css("color","#000000"); 
    $(".slides h1, .slides p").fitText(); 

    } 
}); 

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

Answer 3

FlexsliderのCSSは、次いでflexslider()によって示されている全てli要素を隠し、それが最初に、最初に目に見えるスライドでない限りfitText()ターゲティングされたテキストは、評価することができません。私はFlexslider前にこれを実行することによって、これを回避しようとした作業：

var slider = $('.flexslider'), 
    hiddenSlides = slider.find('.slides > li:not(".slides > li.flex-active-slide")'), 
    text = hiddenSlide.find('.text'); 

hiddenSlide.show(); 

text.fitText(); 

hiddenSlide.hide(); 

これはload上の問題を解決しました。私も関数内でこれをラップして、resizeイベントで呼び出すことを試みましたが、これは私のためには機能しませんでした。誰もが空白を記入することができれば、それは素晴らしいだろう。