響應文本 - 不使用FitText和FlexSlider進行初始化

我有一個使用FlexSlider的響應滑塊。我也希望每個滑塊下面的文本能夠調整大小。除第一個幻燈片外，FitText不會初始化，或者如果我調整窗口大小。我該如何做這項工作（沒有FOUC）？應該在IE 8中運行，加上現代瀏覽器。響應文本 - 不使用FitText和FlexSlider進行初始化

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}

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

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

來源

2012-12-05 Scott Simpson

希望這將是有益的http://jsfiddle.net/adtVP/40/

路線圖：閱讀短信的CSS技巧約fitText插件

了保羅愛爾蘭的跨瀏覽器實現對固定resize事件

不同的瀏覽器

從0在字體大小到em（如％或任何其他相對值）只在這裏：

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

提出位修改的方式來配合文字的調用方式

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

這基本上將更新父級別元素上的字體大小，這將對em基於兒童的字體生效，這是整個想法。

也會在每次使用Paul的代碼段調整窗口大小時調用合適的文本。

就是這樣，代碼粗糙，需要清理和查看，但工程。

UPD：來自fitText的github源代碼在IE中被不匹配MIME類型阻塞，並且導致問題。作爲一種替代解決方案，您可能只需將js文件中的源代碼包含在正確的類型中即可使用。

老IE無法正常工作例子是在這裏http://jsfiddle.net/adtVP/35/離開這裏備案，新建一個與IE瀏覽器調試工具欄上面的測試，下降到7版本，肯定是不一樣的真正的瀏覽器，但到目前爲止，一切好。

來源

2012-12-13 23:59:42 dmi3y

這很棒，但它在IE中不起作用。我真的需要它在IE 8-9中工作，並在IE7中降級。 IE8不一定非常完美。 –

SEC7112：來自https://raw.github.com/davatron5000/FitText.js/master/jquery.fittext.js的腳本由於MIME類型不匹配而被阻止 SCRIPT438：對象不支持屬性或方法'fitText ' – dmi3y

這就是IE的問題，它會阻止github的fitText – dmi3y

$('.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();

來源

2012-12-09 19:54:17

不，因爲存在非風格內容的閃光。 http://jsfiddle.net/simply_simpy/Duam2/2/ –

以及我在jsfiddle中做了些什麼改變。實際上幻燈片隱藏屬性隱藏了所有p和h1，因此fitText無法添加更改。 –

你可以做一個小提琴嗎？ –

爲Flexslider的CSS隱藏所有li元件，然後由flexslider()所示，所以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事件中調用它，但這對我並不適用。如果任何人都可以填補空白，那會很棒。

來源

2013-07-17 12:09:16 Astrotim

響應文本 - 不使用FitText和FlexSlider進行初始化

回答

相關問題