CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MrMarlow
MrMarlow

Reputation: 856

Resize text in multiple containers to retain parent dimensions

The issue I have right now, is that I have multiple div elements on a page (Thinking scalability, I am testing with a couple hundred), which contain the initials of names in a database.

I'd like them all displayed on a single page, like so;

http://jsfiddle.net/o1dv0n76/2/

The issue is that, for display purposed, I'd like them all to be the same pixels (20 * 20) so they look like a grid.

This requires re-sizing of text, so both initials fit within the dimensions of the parent element.

I have attempted this with jQuery, but it does nothing but crash the browser, so this is clearly not very effective.

That said, after a really long wait, it did manage to do it.

I'm just curious if there is a more stream-line way to achieve this.

The jQuery I used is as follows;

$(document).ready(function() {
    $('.comment-box').each(function() {
        $(this).css('font-size', '12');
        var curWi = $(this).width();
        var curHi = $(this).height();
        var ideal = 18;
        var size  = 12;

        while (curWi > ideal || curHi > ideal) {
            size  = size - 1;
            $(this).css('font-size', size);
            curWi = $(this).width();
            curHi = $(this).height();
        }
        $(this).css({
            height:     ideal,
            width:      ideal
        })
    });
});

EDIT: Forgive my naming conventions, I didn't give much thought to them during mock up.

Upvotes: 1

Views: 60

Answers (5)

allen1
allen1

Reputation: 744

This approach seems to work. Using "px" after the font size name seemed to help as well.

$(document).ready(function() {

    $("div.comment-box").each(function(index, element) {

        var ideal = 20;
        var fontSize = 24;
        var minFontSize = 6;

        $(element).css("font-size", fontSize + "px");

        var cw = $(element).width();
        var ch = $(element).height();

        while (cw > ideal || ch > ideal && fontSize > minFontSize)
        {
            --fontSize;

            $(element).css("font-size", fontSize + "px");

            cw = $(element).width();
            ch = $(element).height();
        }

        $(element).width(ideal);
        $(element).height(ideal);
    });
});

Upvotes: 1

AntonZlatkov
AntonZlatkov

Reputation: 111

The font-size through .css needs pixels in order to work. I think a cleaner version is:

http://jsfiddle.net/o1dv0n76/13/

$('.comment-box').each(function () {
    $(this).css('font-size', '12px');
    $(this).css({
        height: 20,
        width: 20
    })
});

Upvotes: 1

Barry
Barry

Reputation: 86

Or maybe just a list with plain'ol css like so: http://jsfiddle.net/barrycrous/sawun9ct/

HTML:

  • AB
  • AB
  • AB
  • AB
  • AB
  • AB
  • AB
  • AB
  • AB
  • AB
  • AB
  • AB
  • AB
CSS:

ul, li {
list-style:none;
padding:0;
margin:0;
}

li {
background:teal;
font-size:12px;
color:#fff;
width:20px;
line-height:20px;
text-align:center;
margin:2px;
float:left;
}

Upvotes: 0

Dave
Dave

Reputation: 193

You could also try this approach to get all letters to fit in each box exactly.

http://jsfiddle.net/o1dv0n76/12/

var idealWidth = 20;
$(document).ready(function() {
    $('.comment-box').each(function() {
        if($(this).width() > idealWidth) {
            makeFit($(this),idealWidth);   
        } else {
            $(this).width(idealWidth);
        }
    });
});

function makeFit(ele, width) {
    ele.css('fontSize',parseInt(ele.css('fontSize'))-1 + 'px');
    if(ele.width() > width) {
        makeFit(ele, width);
    } else {
        ele.width(idealWidth);
    }
}

Upvotes: 2

Jeff B
Jeff B

Reputation: 30099

Yout script is hanging because you have a line-height of 20px, but you are choosing an ideal height of 18. No matter how much you reduce the font size, the height will always be 20px, which is greater than 18, so you are stuck in an infinite loop.

Change ideal to 20:

var ideal = 20;

And it will work:

http://jsfiddle.net/jtbowden/1r8abvom/

As a side note, if you track the minimum font size, you can set all of the divs to the same font size when you are done, and your grid will look more consistent:

http://jsfiddle.net/jtbowden/1r8abvom/1/

But, it all depends on what your goal is.

Upvotes: 2

Related Questions