bower invalid-meta  fittext is missing "main" entry in bower.json
bower invalid-meta  fittext is missing "ignore" entry in bower.son

Hi,

It would be useful to be able to apply FitText to multiple elements (of the same style), and have all of them use the maximum size of any one. If applied to 3 elements, whatever the smallest size is for any of them once resized, should apply to all 3 so the size is consistent across the elements.

Good work though, enjoying this.

I have a very simple set up with an link that has a default font size of 46px (calculated from REM).

Hello there!

I wanted to be able to destroy fitText.js in certain case but instead of asking you to do it, I created another code and I think it might be useful for you or other people

(function($) {
  var resizer = function (el) {
    var $this = el.data.this
    var settings = el.data.settings
    $this.css('font-size', Math.max(Math.min($this.width() / (settings.compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
  };

  var methods = {
    init: function(options) {
      return this.each(function() {
        var $this = $(this);
        var settings = $this.data('fitText');

        if(typeof(settings) == 'undefined') {

          var defaults = { 
            'compressor'  : 1,
            'minFontSize' : Number.NEGATIVE_INFINITY,
            'maxFontSize' : Number.POSITIVE_INFINITY
          }

          settings = $.extend({}, defaults, options);

          $this.data('fitText', settings);
        } else {
          settings = $.extend({}, settings, options);
        }

        var identifier = 'fittext-'+Date.now()
        $(this).addClass(identifier).data('fittextId', "."+identifier)

        $(window).on('resize.'+identifier ,  function(){
          $this.css('font-size', Math.max(Math.min($this.width() / (settings.compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
        }).resize();

      });
    },
    destroy: function(options) {
      return $(this).each(function() {
        var $this = $(this);
        $(window).off( $this.data('fittextId') );
        $this.removeData('fitText').css({fontSize: ""});
      });
    },

  };

  $.fn.fitText = function() {
    var method = arguments[0];

    if(methods[method]) {
      method = methods[method];
      arguments = Array.prototype.slice.call(arguments, 1);
    } else if( typeof(method) == 'object' || !method ) {
      method = methods.init;
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.fitText' );
      return this;
    }

    return method.apply(this, arguments);

  }

})(jQuery);

Then in the html It work that way:

$("#element").fitTextt({ 
      'compressor'  : 1.6,
       'minFontSize' : "18px",
      'maxFontSize' : "48px",
})

$("#element").fitTextt("destroy")

cheers, Catherine

I'm new in this people, so please don't shoot me. I'm working on a responsive website. The problem is that when I resize my window everything is allright. But then when I switch to another page in a resized window the font-size is in default. When I just move the resized window a tiny bit it switches back to the font-size it supossed to be.

Anyone???

Hello. I've been trying to apply FitText to a div that I've positioned (prependTo) with jQ.

Hacky, sure— but I can't see why the final result wouldn't be working. ( Site: https://eventsadmin.sqsp.com pass: events )

I've made a video of a problem I keep havng with fittext. Not sure how to describe it other than text infinitely shrinks into a singularity when resizing and I have the preset set to default (1.2)

$('.call-header span').fitText();

video - > http://d.pr/v/tpQk

I found out that only the first 2 slides in a onepager with fullPage.js (https://github.com/alvarotrigo/fullPage.js) working with FitText.js. Is there a workaround or a fix? I can provide a live website if you want.

Hi,

Chrome is throwing Uncaught TypeError: undefined is not a function all the time. I initialized just like described and used jquery v.2.1.1. I even tried the vanilla js plugin, but I got the same error.

I´m using it together with Foundation & Modernizer if that matters.

Here´s the code:

<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/fittext.js"></script>
<script>
        $('#headline_main').fitText(1.2);
        $('#headline_second').fitText(1.2); 
</script>

To me it seems like it downsizes titles too much, especially on short words, see this example: http://duotones.ch/article/spring.html

While it works perfectly on this example: http://duotones.ch/article/naturkostbar.html

Settings are the following:

jQuery(".fittext").fitText(0.87, { minFontSize: '30px', maxFontSize: '119px' });

or am I missing something?

Through the use of native features js good performance is proven;

Compare performance (style):

fontSize: http://jsperf.com/resizers **(new) > width: http://jsperf.com/jquery-css-vs-width-vs-native-width/2

Issue: When resizing the viewport in chrome using the device toolbar, if you click the icon to disable the device toolbar when your viewport goes back to full size, text does not resize back up to the native/max size.

Env: Chrome: Version 67.0.3396.99 (Official Build) (64-bit) OS: OSX 10.13.6

Duplicate: Open developer tools in chrome, click the button for device toolbar (bottom left next to the element select arrow), resize the viewport, click the button to disable the device toolbar, text does not resize necessitating a page refresh.

Hi, I tried to implement fit text in bootstrap navbar links so the font size is different on xl, lg, and even on sm screens when it collapses so i will not have to add media queries but it does not work it always keeps the max size. Any help ? Thanks

In Bootstrap, it seems to only scale the font size if the menu is opened. If it's closed, there's no font scaling happening. (This is probably intended functionality -- because the items aren't visible).

I'd like to note two things:

1. On initial page load, it isn't setting a font size to these list items in the dropdown. (Probably because it's closed and they're not visible).

2. If a dropdown menu is "opened", the font is continuously enlarged on screen resize.

I haven't tested yet, but I would assume this true for all dynamically hidden/visible items on a page.

I love this script, but I also love using Bootstrap. It would be nice if it integrated well with Bootstrap's concepts.