FitText.js makes text bigger, smaller

I am using fixText jquery plugin. It must scale the text so that the title matches the available width without wrapping it in 2 lines. http://fittextjs.com/

On my site, the plugin resizes the text, however it makes it larger when it should make it smaller!

http://smartpeopletalkfast.co.uk/text-fit/

The code that initializes it is in script.js , and the line is jQuery('.view-display-id-page p').fitText();

The instructions say that the element must be a display block and have a width (but it can be % ) with CSS, which I did. I do not know where to start this problem! Thanks.

+4
source share
2 answers

The Firebug console gives the following:

 TypeError: $(...).on is not a function 

means jQuery on() not an accessible function. . on () was added in version 1.7, but in your source you are using jQuery v1.4.4. If you are allowed, try upgrading to a newer version> = 1.7 and see if this resolves the problem. The error is generated by calling on() in jquery.fittext.js .

If you cannot update jQuery, perhaps you can modify jquery.fittext.js to use a different way of attaching event handlers to elements instead of on (), like bind() .

- UPDATE

You can also try to configure / disable the configuration of the FitText.js compressor. By setting its value to 3.0 , fixed the problem for me locally, experiment. Now scripts.js looks like this:

 ... other js code ... //jQuery('.view-display-id-page p').fitText(); jQuery('.view-display-id-page p').fitText(3.0); ... other js code ... 

The font size also changes when the browser window is resized. Finer tuning should be possible with the minFontSize and maxFontSize settings .

+3
source

It is very unstable with multi-line. You should use this: https://github.com/STRML/textFit

0
source

Source: https://habr.com/ru/post/1496916/


All Articles