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

admin管理员组

文章数量:1427566

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 paring 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!

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 paring 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!

• javascript
• jquery
• children
• element
• resizable

Share Improve this question Follow edited Jul 6, 2015 at 14:01 Ari asked Jul 6, 2015 at 13:12 AriAri 5,03955 gold badges3838 silver badges5252 bronze badges 2

• What's the problem? Does the code not run as expected? What do you want to do? Maybe it would be easier to just zoom via CSS? – Dänu Commented Jul 6, 2015 at 13:18
• Adding fiddle demo.. – Ari Commented Jul 6, 2015 at 14:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.

本文标签： javascriptjQueryUI Resizable Resize All Child Elements And Its FontSizeStack Overflow