Question

EDIT : For anyone who cares, the problem was so simple that I overlooked it, since I was using a table if the column on the right was the column with the extra content it would try to change the one on the left as it would still have a greater height, although reducing the text size would not actually fix it thus causing the loop I was getting, the solution was to use independent divs instead! Hope this helps someone!

I’m having a slight issue with some jQuery that I’m trying to write. What I want to do is go through every div with the same class, if that div is has a height greater then 25px then to decrease the font size by 1px until it fits on to one line.

The code I have works for the first one, but doesn’t run on the other divs, any help would be great!

Regards,

Shikoki

$(document).ready(function() {
        $('.lmmteam').each(function() {
            $('.lmmteam').css('font-size', '30px');
                while( $('.lmmteam').height() > 25 ) 
                    {
                        $('.lmmteam').css('font-size', (parseInt($('.lmmteam').css('font-size')) - 1) + "px" );
                    }
            });
    });

Just thought I should add the html markup as well to make it easier here you go!

<table>
  <tr>
    <td class="randomclass"></td>
    <td class="lmmteam">Long text</td>
    <td class="randomclass"></td>
    <td class="randomclass"></td>
    <td class="lmmteam">Long text</td>
    <td class="randomclass"></td>
  </tr>
  <tr>
    <td class="randomclass"></td>
    <td class="lmmteam">Long text</td>
    <td class="randomclass"></td>
    <td class="randomclass"></td>
    <td class="lmmteam">Long text</td>
    <td class="randomclass"></td>
  </tr>

And there are several rows but the format remains the same. Thanks!

Answer 1

Try

$(document).ready(function() {
    $('.lmmteam').each(function() {
        $(this).css('font-size', '30px');
        while ($(this).height() > 25) {
            $(this).css('font-size', (parseInt($(this).css('font-size'),10) - 1) + "px");
        }
    });
});​

jsFiddle example