4

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();

スクリプトは、最初に少なくとも 1 回は "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>

ハックのハックに違いないことはわかっていますが、テキストのサイズが必要に応じて変更されるようになりました。誰かがより良い方法を提案できれば、私はすべて耳にします。

4

3 に答える 3

2

誰かが興味を持っている場合は、次のようにflexsliderコールバックを使用してこの問題を解決できます。

$('.flexslider').flexslider({
  animationLoop: true,
  directionNav: false,
  start: function(){$(".fittext").fitText();},
  after: function(){$(".fittext").fitText();}
});
于 2012-08-03T02:10:47.560 に答える
1

まだ問題が発生している場合、この修正は私にとってはうまくいきます

このコードを内部に置き換えますjquery.fittext.js

// Call once to set.
resizer();

このコードでは、

$(window).load(function(){
    resizer();
});
于 2014-02-10T12:06:20.947 に答える
1

コンテンツのロード後にこの JavaScript を追加することをお勧めします。bodyタグを閉じる前にスクリプトタグを追加してみて、それが機能するかどうかを確認してください

編集:私のために働く簡単な例:

    <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-09T19:14:48.113 に答える