jQuery - UI Resizable Resize All Child Elements And Its Font-Size

Question

I have been searching the answer for this problem for 1 day, but haven't find it yet!

I want to resize all child elements by calculating and comparing their parent's size with them when their parent is resized and then apply the width and height to every children.

I have writing some lines of codes but this seem not working as expected. The children sizes gone wild with this way:

            $('.parentElement').resizable({
                resize: function(e, ui) {
                    var thisw = $(this).outerWidth();
                    var thish = $(this).outerHeight();

                      $(this).find("*").each(function(i, elm){
                        elw = $(elm).outerWidth();
                        elh = $(elm).outerHeight();
                        wr = parseFloat(elw) / parseFloat(thisw);
                        hr = parseFloat(elh) / parseFloat(thish);
                            w = elw * wr;
                            h = elh * hr;
                        $(elm).css({"width": w, "height": h});
                     });
                },

            });

Maybe someone can help me to correct my codes above so the resizing of child elements going smoothly!

EDIT:

Here is a fiddle demo .

You can see it that by my code above, the children sizes going wild while I want them to resize smoothly fit with their parent size.

I know I can set the children element's width and height by percentage through jquery or css, but I don't want to do it that way, because text's size cannot be resized to fit container's size by percentage!

Answer 1

The reason why your current code does not achieve your intention of keeping children (and their font size) relatively sized to their parent is that you have no measurement of the original child and parent dimensions/ratios, so you cannot calculate how much their dimensions have changed (and by extension how much you need to change the child dimensions/font size).

One way to avail this information for calculations is to store them in data attributes before any resizing has occurred:

// Storing initial parent CSS
$('.parentElement').each(function(){
    $(this).data("height", $(this).outerHeight());
    $(this).data("width", $(this).outerWidth());
});

// Storing initial children CSS
$('.parentElement *').each(function(){
    $(this).data("height", $(this).outerHeight());
    $(this).data("width", $(this).outerWidth());
    $(this).data("fontSize", parseInt($(this).css("font-size")));
});

$('.parentElement').resizable({
    resize: function (e, ui) {
        var wr = $(this).outerWidth()/$(this).data("width");
        var hr = $(this).outerHeight()/$(this).data("height");

        $(this).find("*").each(function (i, elm) {
            var w = $(elm).data("width") * wr;
            var h = $(elm).data("height") * hr;
            // Adjusting font size according to smallest ratio
            var f = $(elm).data("fontSize") * ((hr > wr) ? wr : hr);
            $(elm).css({
                "width": w,
                "height": h,
                "font-size": f
            });
        });
    },
});

Now, with each resize of a .parentElement , the ratios of its present versus original dimensions are calculated, then multiplied with the dimensions and font size of its children.

Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.