JQuery - UI Resizable Resize all children and their font size
I've been looking for an answer to this problem for 1 day but haven't found it yet!
I want to resize all children by calculating and comparing their parent size to them when the parent is resized and then applying the width and height for each child.
I have a few lines of code, but it doesn't look as expected. The sizes of the kids got so wild:
$('.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 adjust my codes above so that the resizing of the children will be smooth!
EDIT:
Here is a scripting demo .
You can see that in my above code, the children are growing in size while I want them to resize to fit the parent.
I know that I can set the width and height of the child elements in percentages via jquery or css, but I don't want to do it this way because the text cannot be resized to fit the container's percentage size!
source to share
The reason your current code fails to reach your intent to keep children (and their font size) relatively large in relation to their parents is because you are not measuring the original parent-to-parent sizes and relationships, so you cannot calculate. how much their sizes have changed (and, depending on how much you need to resize / resize the child).
One way to use this information for calculations is to store them in attributes data
before changes occur:
// 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 resizing of a .parentElement
, the ratio of its present and original sizes is calculated, and then multiplied by the sizes and font sizes of its children.
Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.
source to share