Having trouble attaching the handlers to resize $('oWrapper_'+num). The resizing isn't working as expected. Could it be because the handlers are linked to the wrong div?
The goal is to attach the handlers to $('oWrapper_'+num) and successfully resize using those handlers.
num++
var cloudWrap = $('<div />', { id: 'cloudWrap_'+num}),
outerWrap = $('<div />').appendTo(cloudWrap)
outerWrap.append(
$('<div />', { class: 'tf', id: 'oWrapper_'+num, style: 'white-space:pre-line; font-size: 2vw;' }),
$('<div />', { class: 'ui-resizable-handle ui-resizable-ne hndl' }),
$('<div />', { class: 'ui-resizable-handle ui-resizable-se hndl' }),
$('<div />', { class: 'ui-resizable-handle ui-resizable-sw hndl' }),
$('<div />', { class: 'ui-resizable-handle ui-resizable-nw hndl' })
);
jQuery('#oWrapper_'+num).resizable({
handles: {
'ne': '.ui-resizable-ne',
'se': '.ui-resizable-se',
'sw': '.ui-resizable-sw',
'nw': '.ui-resizable-nw'
},
aspectRatio: 16 / 9,
});
EDIT:
outerWrap.resizable({
handles: {
'ne': '.ui-resizable-ne',
'se': '.ui-resizable-se',
'sw': '.ui-resizable-sw',
'nw': '.ui-resizable-nw'
},
aspectRatio: 16 / 9,
create: function(event, ui) {
initDiagonal = getContentDiagonal();
initFontSize = parseInt($("#oWrapper_"+num).css("font-size"));
},
resize: function(e, ui) {
var newDiagonal = getContentDiagonal();
var ratio = newDiagonal / initDiagonal;
$("#oWrapper_"+num).css("font-size", (initFontSize/100) + (ratio / (initFontSize/1000)) + "vw");
}
});
function getContentDiagonal() {
var contentWidth = $("#oWrapper_"+CretCount).width();
var contentHeight = $("#oWrapper_"+CretCount).height();
return contentWidth * contentWidth + contentHeight * contentHeight;
}