Question

I’m trying to use the FitText jquery plugin to get resize some text. The problem is that the text only gets blown up after a window resize event.

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

It looks like the script calls the “resizer” function at least once initially. Am I missing something here?

This is how I’m using the script:

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

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

</script>
</body>

I’m pretty new at this stuff and really just trying to throw things together so any help will be much appreciated.

EDIT
I should have been more specific in my description of the issue. I am attempting to utilize FitText within the caption box of a FlexSlider. I was able to get Ankit’s example below to work, but the FlexSlider caption text remained incorrect. I believe that a necessary slider element is not loaded in time for FitText to take effect. I worked around this with the following awful code:

<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>

I know that must be a hack of hacks, but my text now resizes as desired. If anyone could suggest a better way, I’m all ears.

Answer 1

In case anyone’s interested, you can solve this problem now using a flexslider callback like so:

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