davatron5000 / fittext.js Goto Github PK

HTML:

<form>
<label for='address'>Search by address</label>
<input name='address' id='search-address' autocomplete='off'>
</form>

JS:
$('#search label').fitText(1);

If i call fittext on a container whose dimensions are 1000px x 500px with the fittext value of 2 i get 25px font size. From the other hand if I enable fittext on a container whose dimensions are 500px x 500px width the fittext value of 1, I would expect to get the same value for the font-size (25px), but I don't , I get 23px!
So what is the logic in this? How to keep the same font size for different size of containers?

NOTE: These values are all made up, but generaly that's what is happening...

Hi!
Thanks for great plugin. I'm new with jQuery and I'm not so sure does it have to work this way. I used this plugin for the headings and it shrinks well long titles, but now all my titles on different pages, have the same size. I tried to use post class (which is different for all pages in Wordpress) but it is still the same. Is this how plugin should work or maybe I'm doing something wrong?
Here is my code:

jQuery(document).ready(function(){ 
    jQuery('.postid-id .headings h2').fitText(1.9, { minFontSize: '31px', maxFontSize: '45px' }); 
});

When a DOM Element is removed it remains in memory due to $(window).on('resize',resizer) function still referencing the element.

I noticed that every time I scroll in an iOS browser the resize event is triggered. When using the plugin in a responsive project this affects the performance quitte a lot, especially on mobile devices.

When the page loads, the font-size is smaller than expected (80 px, instead of 120px). As soon as the browser's viewport is resized, the font-size corrects itself.

http://beta.insofar.org

Please add this to the documentation:

If your text element is a child of an absolute positioned element, it does NOT have dimension. This is alluded to in the documentation. However, it would save someone like me a lot of time if a sub-note is made that in order for FitText to work on a child element of an absolute positioned element (and possibly on an element that is positioned absolute), a width % must be applied to to the element to calculate it's initial font-size.

Would be great to have a minimum font size cut off.

It could safeguard primary headings getting smaller than secondary ones—keeping typographic hierarchy intact.

Hey there.

Using the plugin on a wordpress theme that I'm building.

See it here: http://allaboutchris.org/blog/2012/bye-bye-blender/ - you can see the title hasn't resized.

My code is:

<script language="javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/jquery.fittext.js" type="text/javascript"></script>
<script>
       jQuery("#resizeheadline").fitText();
</script>

What am I doing wrong?

Bless,
Chris

I'm using this plugin in a complex layout that needs a fixed height container. The height of the container changes needs to change as the text iside resizes (via this plugin). It would be awesome if there was a callback that passed the height of the text container to it, so I can set a new height to my other container each time the text is resized.

Hello,

My problem is very likely caused by something I've overlooked, or my general lack of jquery expertise... but I just can't seem to get fittext.js to work in my Thesis + Wordpress site.

Granted, this is the first responsive site I've built, so I'm still working on things... but I think I've got everything in place for this work.

The site is zeehivecreative.com and the text I want to resize is on the homepage 'create buzz. make honey.'

I've got my script in my (thanks to Thesis' easy script implementation, and I'm pointing to the correct

I would like to work with fontawesome icons, but have a hard time with it.

Should it work like any other font ? Will it make difference that fontawesome uses ?

I'm having this really strange issue that right when I resize my browser out of a certain break point, the fittext.js isn't working, but if i refresh the page, it works fine. I'm completely stumped. Here is a link to my site I'm working on http://jasonkinney.me/portfolio/. It happens right when you come out of the break point at 640px which is going from the mobile navigation up to the smallest version of the site without the mobile nav.

If anyone can help it would be greatly appreciated, it's been driving me crazy.

Hey,

You can use a better algo based on basic Math :

var fitText = function(parent, width, height) {
       var minCharPerLine = 10;  
       parent.css('font-size', Math.sqrt( (width*height) / (parent.text().length + minCharPerLine )) );
   };

This one will adjust multiline text in the box.

for this line:

$(window).on('resize.fittext orientationchange.fittext', resizer);

why the event name is " resize.fittext orientationchange.fittext " , not "resize orientationchange" ?

thanks !

For example, I set min. text-size to 12 and max to 25. When page loads the font-size is near 19px but when I resize browser and after maximize browser the font is 25px!
here is the code:
$("a").fitText(1, { minFontSize: 12, maxFontSize: 25 });

The sampe code shows:
minFontSize: 50, maxFontSize: '75px'

but the documentation shows:

minFontSize: '20px', maxFontSize: '40px'

As for EM use -- can the "000px" be replace with "000em"

Thanks.

I have some text that uses fittext and on ios when it starts in portrait mode it resizes properly and then when I move to landscape it resizes properly but then when I move to portrait it resizes properly but the space that it used to resize does get removed ?

Then it creates alot of horizontal scroll in my portrait mode thanks let me know if I can clarify.

thanks

Nick

I'm having some trouble with FitText when a device is rotated.

For example, I'll load the site on a iPhone in portrait, and everything looks awesome. I'll rotate the iPhone and the text get bigger to accommodate the increase in width which is cool.

However, If I then rotate back to portrait the text breaks the layout. The text DOES resize, but not to nearly as small as it should to accommodate the width of the screen, and as I said it breaks the layout.

Been stuck with this for a few days now. Any advice would be great.

Thanks

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 noticed this plugin relies on $(window).resize to do it's magic.

Unfortunately this does not seem to work properly with iPad orientation change.

I have a resizing script on my site which recalculates several sizes for divs to centre images. This is called with several options:

jQuery.event.add(window, "orientationchange", reCalculateFunction);
jQuery.event.add(window, "load", reCalculateFunction);
jQuery.event.add(window, "resize", reCalculateFunction);

and if I include a fittext call within this function, it will now update properly on orientation change.

I'm not sure if this system will add to a memory leak or not, but having a way for your plugin to include $(window).orientationchange or the equivalent would be very, very nice.

(note, adding this to the fittest plugin does not work, since query $(window) does not have an orientation change event handler thingie.)

Gerry.

Hey,
first off this is awesome and lots of fun...

Question: I'm using it on alfredk.com on the header text and whenever I page reload it re-sizes from the position it starts. Just wondering how to stop this if its possible?

Thanks in advance

May be worth adding throttling options to this plugin. Especially since we're binding to the "resize" event (similar to "scroll", it fires often). Just a thought. The calculation isn't choking right now but the more elements you bind to the more listeners you add to that one event.

I'm using fittext on all my hgroup h1's. On the homepage it works like a charm, however, the calculated font size seems to be used across all pages that use this pattern. The css is like this:

hgroup h1 {
    display: block;
    width: 100%;
}

And the js:

$(document).ready(function () {
    'use strict';
    $("hgroup h1").fitText(1.1);
});

As I said: it looks like the value is calculated only once and this value is cached and used in other pages. Am I doing something wrong, or is there a solution to this?

Sample code:

http://jsfiddle.net/dWXwg/

<div style="clear: both; width: 100px; height: 100px; background: blue" id="zzz">test</div>

<script>
$("#zzz").fitText();
</script>

Not only is the text not filling up the div - the text is getting smaller. Any ideas?

I'm hoping to use FitText for my navigation. I've tried many ways to make it work but no success.

Thanks
SL

If I set the container ( or wrapper) to a fixed width (for example 940px), the text refuses to resize when I resize the browser.

Is there a way that an option to change margn-top could be added? I have a large title, floating vertically in the middle of the page, with margin top holding it down. as the text gets smaller, margin-top should increase to keep it steady.

I thought about instead using: position:absolute, top:50%, margin-top:-half ... but since the text itself is resizing, the height isn't fixed. Any ideas?

I have succesfully loaded fitText in my wordpress installation. But for some reason it only executes on the first instance in a loop, ie. if I have a loop generating two(or more) headings with the same ID (#fittext1) to the h1-element it only makes the first heading flexible.

This is how I load the fitText script in my functions.php

function my_add_scripts() {
    wp_enqueue_script('fitText', get_bloginfo('stylesheet_directory').'/js/jquery.fittext.js', array('jquery'));
    wp_enqueue_script('fitText-activate', get_bloginfo('stylesheet_directory').'/js/jquery.fittext-activate.js', array('jquery', 'fitText'));
}
add_action('wp_enqueue_scripts', 'my_add_scripts');

In the jquery.fittext-activate.js I have put the following code:

jQuery(document).ready(function($) {
    $("#fittext1").fitText(1.0, { minFontSize: '16px', maxFontSize: '75px' });      
     });

Then I place the following in a loop in page template:

 <h1 id="fittext1" class="tile-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>

In this specific case there are two posts headings generated by the loop and as I said earlier fitText works just fine but only on the first post heading.

How do I get it to work on all headings marked with #fittext1?

Hey guys - I noticed today that if you use fitText on text within a hidden area, it can't render the correct size, even if you're hiding the parent container.

Currently searching for a solution.

I'm having the above trouble in Chrome 22 and Firefox 15 on Linux. Several seconds of resizing the window/viewport mades the text disappear. Even opening the inspector in Chrome triggers the site title to shrink. Refreshing after resizing loads the title as expected. Any advice? Thank you.

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 site that I want to resize the text only if the title is not filling a line.

For example:

This short title could be larger - want it automatically filling the width: http://allaboutchris.org/blog/2012/being-judas/

Whereas this long title, I want to keep at 44px, since it doesn't need to be any larger: http://allaboutchris.org/blog/2012/why-windows-8-is-going-to-be-rubbish-lowrys-law/

Any ideas?
Bless,
Chris

First of all this is really a great piece of code, thanks for sharing!

I've been trying to retain the div width to the text width, inline-block fix that, but then the fit stops working, any tricks on how to fix this?

I need to constrain the mouse clickable area to text only and not to the over-width (pink area on first 3 lines) area.

http://jsfiddle.net/christianpugliese/t8f2y/1/

TA.

I tried to make my h3's responsive: I have a three column fluid layout ( 25%,25%,50% ) but the font-size rendered from Fittext is way bigger than the container can accommodate.. Either my layout is done in a way that width is not properly calculated ( the web designer that made this used negative-margins to place the columns.. a very unorthodox way of doing this. Any hints why this is caused? The font does change when I resize the window so the script does work, but I am just having trouble understanding the correlation of the script and the container width...

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

The README says:

"Your text should now resize based on the width of the parent element. By default: Font-size = 1/10th of the parent element's width."

That's not quite correct, it should say " based on element width"

I'm by no means a jQuery expert, but I can't seem to get fittext to work in my current project without $(document).ready(). When I use $(document).ready(), it works with undesired results. For example, if I resize my window in any direction, the targeted text gets rapidly smaller. Any ideas?

FYI, I'm building a responsive/adaptive Wordpress theme based on Roots. I disabled the other jQuery plugins used in Roots by default (Modernizr, Respond) to see if they might be contributing to the issue, but to no avail.

Thanks!

Hi guys,

i am currently facing a small issue with the plugin. I need to place menu elements on bottom of my div, which its heights is 100%.
To do that i use the bottom css property. The problem is that i wanted the text to inflate when resizing the page but it seems
to not work properly.

Any ideas ?

Hello,

I'm using icon fonts and I add them to my page via span but fittext does not do anything with it unfortunately.

Had anyone success with span icon fonts?

Unless there is somethign wrong with my Internet Explorer 9, the text doesn't resize.

Hi guys,

I'm trying to implement FitText for a header on my Twitter Bootstrap theme. Unfortunately, its script seems to prevent the carousel from working. Here are the two scripts I'm working with:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.carousel').carousel({interval: 5000});
  });
</script>  


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script type="text/javascript">
            $(document).ready(function() { 
    $("#holzheader").fitText(1.2, { minFontSize: '40px', maxFontSize: '140px' });
            });
</script>  

(When I use the FitText script, it seems to be preventing the carousel from working.)

The only issue I see would be that they use different jquery versions--but since each script only works with their own respective versions, I'm not sure how I'd fix it. Notably, I'm still new to this stuff, so maybe I'm missing something obvious. Here is my site for reference:

http://joshuaholz.site40.net/

(the background images should be rotating, but the carousel script isn't working so it's just a static image)

Thanks for any help!

I have just tried to use FitText.js and the text is just not resizing properly - it is only filling about 60% of the space!

I have a div with a width of 28% inside which I have 2 other divs, both with a width of 100%, and the second of these is what I am setting the fit text for.

Why isn't it filling the container properly?

Hi there,

On the changlog it says that fiText is at 1.1 but the source comments shows 1.0, is it just the source header that hasn't changed?

After talking with @TrentWalton, here's what we've decide to do with FitText:

• Strip out max-font-size as it's causing confusion.
• Simplify FitText to be just ratio-based resizing with the compressor (this is probably more true to the spirit of RWD).
• Create extendable options for both min & max font-size (which don't exist in CSS, but would be cool if they did).

Will be working on that soonish. I'll also look at resizing based on height although this may just exist in a branch.

Hey,
I am getting en error in safari
TypeError: 'undefined' is not a function (evaluating '$(window).on('resize', resizer)')

I am getting en error in Firefox
TypeError: $(...).on is not a function
$(window).on('resize', resized);

I am trying to get this to work in wordpress 3.5 using bones theme.

Anyone know why this is happening? Many thanks

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

I had some problems with a somewhat complicated website (a publishing engine for magazines) where it did not always update on orientation change.

I added this under the window.resize function:

$(window).orientationChange(function(){
resizer($this);
});

Seems to work fine now.

I've been trying to use FitText with an image slider. However, it only works with the first caption, the rest do not adjust to their correct heights until you resize the viewport. I haven't been able to find a fix for this, and I was wondering if anything can be done.

Many thanks!