I am using this js for expanding a text area to fit the text on mouseover. I would like to set it up to shrink it back on mouseout. I just muddle around with javascript so if an expert can give me a tip how to do this that would be great. I’d like to also apply this to a table’s height. Is that possible?
js script:
function sz(t) {
a = t.value.split('\
');
b=1;
for (x=0;x < a.length; x++) {
if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}
Interesting idea there. I had a similar demo, which I beefed up after seeing your idea…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Template</title>
<meta name='author' content='Mike Foster (Cross-Browser.com)'>
<style type='text/css'>
div {
margin: 2em;
}
</style>
<script type='text/javascript'>
window.onload = function()
{
taInit();
}
// initialize all textareas
function taInit()
{
var i, ta = document.getElementsByTagName('textarea');
for (i = 0; i < ta.length; ++i)
{
ta[i]._ta_default_rows_ = ta[i].rows;
ta[i]._ta_default_cols_ = ta[i].cols;
ta[i].onkeyup = taExpand;
ta[i].onmouseover = taExpand;
ta[i].onmouseout = taRestore;
ta[i].onfocus = taOnFocus;
ta[i].onblur = taOnBlur;
}
}
function taOnFocus(e)
{
this._ta_is_focused_ = true;
this.onmouseover();
}
function taOnBlur()
{
this._ta_is_focused_ = false;
this.onmouseout();
}
// set to default size if not focused
function taRestore()
{
if (!this._ta_is_focused_)
{
this.rows = this._ta_default_rows_;
this.cols = this._ta_default_cols_;
}
}
// adjust rows and cols to fit text
function taExpand()
{
var a, i, c = 0;
a = this.value.split('\
');
for (i = 0; i < a.length; i++) {
if (a[i].length > c) c = a[i].length;
}
this.cols = c;
this.rows = a.length;
}
</script>
</head>
<body>
<div>
<textarea rows='1' cols='50' wrap='virtual'>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</textarea>
</div>
<div>
<textarea rows='1' cols='50' wrap='virtual'>
Lorem ipsum dolor sit amet, consectetaur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</textarea>
</div>
</body>
</html>
However, I just want to manipulate the number of rows. I would like the textarea always to be at least the default size and only increase in rows, not columns when the text overflows. I am using the virtual wrap. And when the text is less than the default size I don’t want the text area to shrink. Any ideas how to modify this script to do that?
Thanks for posting that updated script. The one I was using interfered with another script I was trying to use. I don’t know how js works but I could use one or the other but when I tried to put both on my page it errored one out. So I grabbed yours and it works like a charm. Thanks so much.
Is there a way to apply this to tables or does it only work with textareas? I want to fix the height of a table that displays information from a database. And then on moueover expand the table to display all the text from the database.
Yes I tried using it with a table that I put in a div and then gave the div the same ID and tried modifying your script using document.getElementsById(‘id’);
Thank you all very much that i found this very much useful in my case. Thank god, at least i read this post before posting my new one.
Then how about resizing the text area clicking on the border of the text area or DIV?
