Question

I have a really nice little function that reduces the text size inside some div’s when they are displayed on the screen if they start overflowing.

$(function(){
    $('div.Body').each(function (index) {
        if ($('div.Body')[index].scrollHeight > 150) {
            $('div.Body')[index].style.fontSize = 'small';
            if ($('div.Body')[index].scrollHeight > 150) {
                $('div.Body')[index].style.fontSize = 'x-small';
                if ($('div.Body')[index].scrollHeight > 150) {
                    $('div.Body')[index].style.fontSize = 'xx-small';
                }
            }
        }
    });
})

I wanted to use the same/similar function to do the same while the users are typing the text into a textArea when they are submitting the text, but the textArea doesn’t seem to have a function for scrollHeight:

$(function() {
    window.status = $('.TextAreaClass').scrollHeight;
});

This function just returns undefined.

How can I accomplish this in a textArea?

Answer 1

scrollHeight is a native javascript method, not a jQuery one so you will need to do the following to get the scrollHeight of the textarea:

window.status = $('.TextAreaClass')[0].scrollHeight;

Note the [0] which returns the first element in the jQuery object, which is the native DOM element. Also, you should really be caching the selected element in your current code to make it perform better. Try this:

$('div.Body').each(function (index) {
    var div = $('div.Body')[index];
    if (div.scrollHeight > 150) {
        div.style.fontSize = 'small';
        if (div.scrollHeight > 150) {
            div.style.fontSize = 'x-small';
            if (div.scrollHeight > 150) {
                div.style.fontSize = 'xx-small';
            }
        }
    }
});

Finally, the logic of that code seems flawed, as all the conditions are checking > 150?