Question

I have a container, the width of which can change. Withing that container I have couple other elements:

HTML

<div class="box">
    <div style="float:left" class="sub1">
        VARIABLE SIZE FONT
    </div>
    <div style="float:left" class="sub2">
        CONSTANT WIDTH
    </div>
</div>

<div class="box">
    <div style="float:left" class="sub1">
        VARIABLE SIZE FONT
    </div>
    <div style="float:left" class="sub2">
        CONSTANT WIDTH
    </div>
</div>

In most cases I don’t need to do anything with the code, however sometimes the .box div can be narrower. In those cases I need to adjust the font-size of .sub1 container.

JS

 $('.sub2').each(function() {
    parentW = $('.sub2').parent().width(),
    sub_2 = $('.sub2').width() + 10,
    sub_1 = $('.sub1').width(),
    availSpace = parentW - sub_2;

    // below is where I need help 
    while (sub_1 > availSpace) {
       curFontSize = $('.sub_1').css('font-size');
       $('.sub_1').css('font-size', parseInt(curFontSize)-2);
    } 
 });

It seems right but it doen’t appear to work for me. What am I missing?

Answer 1

You need to use $(this) inside .each(). Also, you need to access and modify the sub1 div which is with each sub2.

Try this out:

$(document).ready(function () {
    $('.sub2').each(function() {
        parentW = $(this).parent().width(),
        sub_2 = $(this).width() + 10,
        div1 = $(this).siblings('.sub1').first();
        sub_1 = div1.width(),
        availSpace = parentW - sub_2;

        if (sub_1 > availSpace) {
            curFontSize = div1.css('font-size');
            div1.css('font-size', parseInt(curFontSize)-2);
        } 
    });
});