I am trying to resize text simultaneously while resizing the textarea in my code. I am using jQuery for this functionality. However, I believe there is an issue with the click function being separated. Any advice on how to fix this would be greatly appreciated.
Unfortunately, I cannot post the JsFiddle link directly but you can find it here: http://jsfiddle.net/mr_eirenaios/Tr92Q/8/
$("#aTx").click(function () {
$("#DVtx").append('<textarea rows="3" id="aText">Type Here</textarea>');
});
var diagonalScl;
var txSiz;
$(function () {
$("#DVtx").resizable({
alsoResize: '#aText',
create: function (event, ui) {
diagonalScl = diagonalSwItms();
txSiz = parseInt($("#aText").css("font-size"));
},
resize: function (e, ui) {
var diagonalSclNw = diagonalSwItms();
var ratio = diagonalSclNw / diagonalScl;
$("#aText").css("font-size", txSiz + ratio * 3);
}
});
});
function diagonalSwItms() {
var contentWidth = $("#aText").width();
var contentHeght = $("#aText").height();
return contentWidth * contentWidth + contentHeght * contentHeght;
}