Question

I’m trying to dynamicly resize text within a div so that the text does not run outside of the box it was intended for. I’m trying to do this so that I can make a printable form.

Geeky Monkey has a jquery plugin that works great but my problem is I can’t loop it to do it over and over for different div’s to make sure they’re all properly sized. If I make all my div’s the same class they all get the same text size so obviously this doesn’t work.

This is Geeky Monkey’s unedited code

(function($) {
$.fn.textfill = function(options) {
    var fontSize = options.maxFontPixels;
    var ourText = $('span:visible:first', this);
    var maxHeight = $(this).height();
    var maxWidth = $(this).width();
    var textHeight;
    var textWidth;
    do {
        ourText.css('font-size', fontSize);
        textHeight = ourText.height();
        textWidth = ourText.width();
        fontSize = fontSize - 1;
    } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
    return this;
}
})(jQuery);

$(document).ready(function() {
  $('.jtextfill').textfill({ maxFontPixels: 36 });
});

And the html code that goes with it

<div class='jtextfill' style='width:100px;height:50px;'>
<span>My Text Here</span>
</div>

This is what I tried to do to change it and make it a loop

$(document).ready(
for(i=1;i<3;i++){
    function() {
        $('.jtextfill' + i).textfill({ maxFontPixels: 72 });
})};

And the html to go with my revision

<div class='jtextfill1' style='width:400px;height:200px;'>
    <span>THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG</span>
</div>

<div class='jtextfill2' style='width:50px;height:25px;'>
    <span>THIS IS THE SECOND PART OF MY TEXT</span>
</div>

As I’m sure you could guess it’s not working. jquery does still confuse me so please forgive me if it is an obvious mistake. Any help would be greatly appreciated.

Thanks

Answer 1

OK, as I understand it you want to have various divs each with a different class so that you can give each its own font size (and potentially other individual properties). You want to be able to process each div to – if necessary – shrink the font of the span in the div so that it will fit in the div without overflowing.

If so, calling the textfill() method in a loop but passing the same maxFontPixels parameter to it for every div won’t work, because obviously they’ll all then start out with the same default maximum font size. You could update your loop to pass in different font sizes, but instead I would suggest changing the textfill() to start with the current font-size of the div, rather than taking it as a parameter.

Then, rather than trying to do a loop to repeatedly call textfill(), you can use a single JQuery selector that selects all of the divs you want to process. Following is just one way to do what I’ve described. (Note: I haven’t actually tested it, but I hope it will get you on your way.)

EDIT: In the original code there was also a basic problem with the .textfill plugin, that (as with any JQuery plugin) its this was a JQuery object that – depending on the selector – may be a list of many DOM elements, but it was treating it as a single DOM element. Just needed to add a this.each() loop around the rest of the function code and it works.

<style>
.someclass1 { font-size: 36px; }
.someclass2 { font-size: 48px; }
</style>

<div class='someclass1 jtextfill' style='width:400px;height:200px;overflow:hidden;'>
  <span>THE QUICK BROWN FOX JUMPED OVER THE LAZY DOG</span>
</div>
<div class='someclass2 jtextfill' style='width:50px;height:25px;overflow:hidden;'>
  <span>THIS IS THE SECOND PART OF MY TEXT</span>
</div>

<script>
(function($) {
  $.fn.textfill = function() {
    // EDIT: added the .each()
    this.each(function() {
      var fontSize = parseInt($(this).css('font-size'),10);
      var ourText = $('span:visible:first', this);
      var maxHeight = $(this).height();
      var maxWidth = $(this).width();
      var textHeight;
      var textWidth;
      do {
        ourText.css('font-size', fontSize + "px");
        textHeight = ourText.height();
        textWidth = ourText.width();
        fontSize = fontSize - 1;
      } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
    // EDIT: added the closing brackets for the .each
    });
    return this;
  }
})(jQuery);

$(document).ready(function() {
  $('.jtextfill').textfill();
}); 

</script>

Notes: in this case the ‘jtextfill’ class isn’t actually defined in the stylesheet, it is used solely as a convenient way to let JQuery select all of the divs that you want to process. The actual font stylings are applied via the ‘someClass1’, etc., classes. (In case you weren’t aware, HTML/CSS allows you to apply multiple classes to the same element.)

I’ve changed only twothree things in the textfill() method: (1) I get the font-size from the element, which should be returned as a string like ’36px’, then use parseInt to grab the integer part of that (throwing away the ‘px’). (2) When the font is set inside the loop I append ‘px’ back onto the font size. (3) Added a .each() loop within the plugin function.