Jquery Font Size Manipulation TextArea Cutout

Question

I have a text area that I want to change the font size of the text using a + and a - button.

I know how to get the font size to change using javascript/jquery. That all works great. However my problem is that as the font size grows it begins to stretch out of the text box. The top half of the first row will be tucked under the top bar of the text input area. I tried adjusting the line height proportionally to the increase in font size but it doesn't seem to solve the problem

here is my code:

HTML

<div style="color: #0D1E28">
       <a href="#" id="minustext">-</a>
       <a href ="#" id="resetfont">
       <span style="font-size: 9px; letter-spacing: -3px;">A</span>
       <span style="font-size: 16px;">A</span>
       </a>
       <a href="#" id="plustext">+</a>
   </div>
<textarea name="txtOutput" id="txtOutput" style="width: 600px; height: 550px; line-height: 8.5; overflow: auto; font-size: 21.5px;" rows="2" cols="20" readOnly="readonly">
</textarea>

JavaScript

$(document).ready(function () {
            $("#plustext").click( function () { resizeText(1); });
            $("#minustext").click( function () { resizeText(-1); });
            $("#resetfont").click(function () { $("#txtOutput").css('font-size', "14px"); });
        });

        function resizeText(multiplier) {

            if ($("#txtOutput").css('font-size') == "") {
                $("#txtOutput").css('font-size', "12px");

            var currentFontSize = $("#txtOutput").css('font-size');
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = (currentFontSizeNum + (multiplier * 0.5)) + "px"; ;

            var currentLineHeight = $("#txtOutput").css('line-height');

            if (currentLineHeight == "normal") {
                currentLineHeight = "1";
            }

            var currentLineHeightNum = parseFloat(currentLineHeight, 10);
            var newLineHeight = (currentLineHeightNum + (multiplier * 0.5));

            $("#txtOutput").css('line-height', newLineHeight).css('font-size', newFontSize);
        }

suggestions?

Answer 1

This is one weird bug. By removing the node from the dom and re-inserting it, that seems to solve the problem.

$("#txtOutput").remove().appendTo("body");

http://jsfiddle.net/jyFfw/

Answer 2

I made some mods to your code to get it to work on my end, I think it's cleaner and more efficient as well (see below). I haven't done a lot of testing but it seems to work in IE8 & FF.

IMO the line-height should adjust itself provided the line-height property is set to 'normal'. And I found that was exactly the case in Firefox. However, I did experience the problem you referenced in IE. In order to overcome it I had to replace the textarea with a clone of itself. Apparently, this forces IE to recalculate the proper line height. Hope this helps.

<script type="text/javascript">
$(document).ready(function () {
    $("#plustext").click(function (e) { resizeText(1); e.preventDefault(); });
    $("#minustext").click(function (e) { resizeText(-1);  e.preventDefault();});
    $("#resetfont").click(function (e) { $("#txtRegistryReportOuput").css('font-size', "14px");  e.preventDefault();});
});

function resizeText(multiplier) {
    var textarea = $("#txtoutput"); 
    var fs = (parseFloat(textarea.css('font-size')) + multiplier).toString() + 'px';    // Increment fontsize
    var text = textarea.val();                                                          // Firefox won't clone val() content (wierd..)
    textarea.css({'font-size':fs}).replaceWith( textarea.clone().val(text) );           // Replace textarea w/ clone of itself to overcome line-height bug in IE
}
</script>


<div style="color: #0D1E28">
   <a href="#" id="minustext">-</a>
   <a href ="#" id="resetfont">
       <span style="font-size: 9px; letter-spacing: -3px;">A</span>
       <span style="font-size: 16px;">A</span>
   </a>
   <a href="#" id="plustext">+</a>
</div>
<textarea name="txtOutput" id="txtoutput" style="width: 600px; height: 550px; line-height: 8.5; overflow: auto; font-size: 21.5px;" rows="2" cols="20"></textarea>