使用FitText jquery插件來調整文本的大小

我想使用FitText jQuery插件來調整一些文本的大小。問題在於，窗口大小調整事件後文本只會被炸燬。使用FitText jquery插件來調整文本的大小

// Resizer() resizes items based on the object width divided by the compressor * 10 
      var resizer = function() { 
       $this.css('font-size', Math.max(Math.min($this.width() /(compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 
      }; 

      // Call once to set. 
      resizer();

它看起來像腳本最初調用「resizer」函數至少一次。我在這裏錯過了什麼嗎？

這是我如何使用腳本：

<script src="/js/jquery.fittext.js"></script> 
<script type="text/javascript"> 

    $("h1").fitText(.6); 

</script> 
</body>

我在這個東西很新，真的只是想扔東西在一起，所以任何幫助將非常感激。

編輯
我應該一直在我的問題的描述更具體。我試圖在FlexSlider的標題框中使用FitText。我能夠在下面得到Ankit的例子，但FlexSlider標題文本仍然不正確。我相信FitText生效時不會及時加載必要的滑塊元素。我工作圍繞這與下面的代碼可怕：

<script type="text/javascript"> 
$(document).ready(function() { 
     $('#spinner').hide(); 
    setTimeout(function() { $("h1").fitText(.6); }, 200); 
    setTimeout(function() { $("h1").fitText(.6); }, 300); 
    setTimeout(function() { $("h1").fitText(.6); }, 500); 
    setTimeout(function() { $("h1").fitText(.6); }, 700); 
    setTimeout(function() { $("h1").fitText(.6); }, 1500); 
}); 
</script>

我知道，一定是黑客的入侵，但可根據需要我的文字現在調整大小。如果有人可以提出一個更好的方法，我全都耳熟能詳。

來源

2012-04-09 drinkofwater

我有同樣的問題。你解決了嗎？我需要一些幫助。 – 2012-07-26 19:12:23

我剛剛使用$ document.ready和setTimeout解決了上述問題。 – drinkofwater 2012-07-27 21:52:49

如果任何人的興趣，就可以解決這個問題：一個簡單的例子，對我的作品回調像這樣：

$('.flexslider').flexslider({ 
    animationLoop: true, 
    directionNav: false, 
    start: function(){$(".fittext").fitText();}, 
    after: function(){$(".fittext").fitText();} 
});

來源

2012-08-03 02:10:47 Rob

這對我不起作用 - 元素在頁面上可見後仍會調整大小。 – 2012-12-04 15:40:43

您可能希望在加載內容後添加此JavaScript。結束標記之前嘗試添加腳本標籤，看看它是否工作

編輯：現在用的是flexslider

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="https://raw.github.com/davatron5000/FitText.js/master/jquery.fittext.js"></script> 
    </head> 
    <body> 
    <h1>This is test</h1> 
    <script type="text/javascript"> 
      $("h1").fitText(0.6); 
    </script> 
    </body> 
</html>

來源

2012-04-09 19:14:48 Ankit

感謝您的提示，但腳本已經放在關閉的身體標記之前。我將編輯上面的代碼片段以反映這一點。 – drinkofwater 2012-04-09 19:28:24

我已經用最少的代碼更新了這個答案。你有沒有包含正確版本的jquery和fittext js文件？ – Ankit 2012-04-09 19:38:47

感謝您的協助;它讓我思考着正確的方向。我已經更新了上面的第一篇文章並附加了一些信息 – drinkofwater 2012-04-10 05:01:21

對於那些誰仍然有問題，此修復程序適用於我

替換此代碼插件IDE jquery.fittext.js

// Call once to set. 
resizer();

有了這個代碼，

$(window).load(function(){ 
    resizer(); 
});

來源

2014-02-10 12:06:20

使用FitText jquery插件來調整文本的大小

回答

相關問題