Testo reattivo - Funzione non inizializzata con FitText e FlexSlider

Question

Ho un cursore reattivo che utilizza FlexSlider. Voglio anche ridimensionare il testo sotto ciascun cursore. FitText non si inizializza su nessuna diapositiva tranne per la prima, o se ridimensiono la finestra. Come posso fare questo lavoro (senza FOUC)? Dovrebbe funzionare in IE 8 su, oltre a browser moderni.

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

speranza che questo sarebbe utile http://jsfiddle.net/adtVP/40/

tabella di marcia:

1. leggere sul breve nota su trucchi css circa fitText plug
2. preso implementazione cross browser di Paul Irish per il fissaggio resize evento diversi browser

3. passati da px a em (o qualsiasi altro valore relativi come%) su dimensioni dei caratteri solo qui:

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

   fatta modifica bit al modo in cui il testo è adatto è chiamato

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

questo fondamentalmente aggiornerà dimensione del carattere su un elemento del livello genitore che avrà effetto per il carattere basato su em di bambini, e questa è l'intera idea.

chiama anche il testo di adattamento ogni volta che la finestra viene ridimensionata utilizzando il codice snippet di Paul.

è tutto, lo codifica approssimativo e deve essere pulito e controllato ma funziona.

UPD: il codice dal sorgente github per fitText è bloccato in IE dalla mancata corrispondenza del tipo mime e questo ha causato problemi. Come soluzione alternativa potresti semplicemente includere l'origine nel tuo file js con il tipo corretto, e questo funzionerà.

vecchio IE non funziona esempio è qui http://jsfiddle.net/adtVP/35/ lasciarlo qui per la cronaca, quello nuovo sopra testato con IE Debug Toolbar fino a 7 versione, di sicuro non è la stessa di un vero e proprio browser, ma finora tutto bene.

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

Il CSS per Flexslider nasconde tutti gli li elementi che vengono poi visualizzati da flexslider(), quindi il testo del fitText() si rivolge non può essere valutata, a meno che non è nella prima diapositiva, inizialmente visibile.Ho provato a lavorare intorno a questo eseguendo questo prima 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(); 

Questo risolto il problema su load. Ho anche provato a inserire questo in una funzione e chiamandolo sull'evento resize, tuttavia questo non ha funzionato per me. Se qualcuno può riempire gli spazi vuoti, sarebbe fantastico.