SitePoint.com

bankfishin · Oct 10, 2006, 08:28

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:

Code:

function sz(t) {
a = t.value.split('\n');
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;
}

Page code:

Code:

<textarea onkeyup='sz(this)' onmouseover='sz(this)' rows='10' cols='125' wrap='virtual' name='Work_Request'  id='Work_Request'><?php echo $projectrow['Work_Request']; ?></textarea>

Thanks

MikeFoster · Oct 10, 2006, 12:02

Interesting idea there. I had a similar demo, which I beefed up after seeing your idea...

Code:

<!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('\n');
  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>

Demo Online

bankfishin · Oct 10, 2006, 14:11

Hey that looks pretty good.

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 again

bankfishin · Oct 10, 2006, 15:10

Ok this is a lot more simple than yours but it does what I need it to.

Code:

function size_down(T) {
T.rows = 5;
}

function size_up(T) {
a = T.value.split('\n');
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;
}

MikeFoster · Oct 10, 2006, 16:57

Good work!

For reference here's my updated demo.

bankfishin · Oct 11, 2006, 07:56

MikeFoster,

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.

MikeFoster · Oct 11, 2006, 11:40

Thanks, bankfishin

A similar technique could be applied to tables, but the current code will not work with tables.

bankfishin · Oct 11, 2006, 12:38

MikeFoster,

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');

But it didn't work.

HM2K · Mar 13, 2007, 17:47

Quote:

Originally Posted by bankfishin

Ok this is a lot more simple than yours but it does what I need it to.

Code:

function size_down(T) {
T.rows = 5;
}

function size_up(T) {
a = T.value.split('\n');
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;
}

Can I see how the demo works?

MikeFoster · Mar 13, 2007, 19:32

Hi HM2K, Welcome to SPF!

Not sure if you mean my demo or bankfishin's, but here's a link to mine.

Leoj00 · Mar 13, 2007, 23:32

I have an expanding text area on my site located at:
http://rentev.com/leoj/Momotaro/dragdrop/index2
if you want an example of javascript manipulating cols...

rajug · Mar 14, 2007, 00:42

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?

Oct 10, 2006, 08:28	#1
bankfishin SitePoint Zealot Join Date: Aug 2006 Posts: 138	Mouseover/out expand and contract textarea or table 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: Code: function sz(t) { a = t.value.split('\n'); 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; } Page code: Code: <textarea onkeyup='sz(this)' onmouseover='sz(this)' rows='10' cols='125' wrap='virtual' name='Work_Request' id='Work_Request'><?php echo $projectrow['Work_Request']; ?></textarea> Thanks

Oct 10, 2006, 14:11	#3
bankfishin SitePoint Zealot Join Date: Aug 2006 Posts: 138	Thanks and a few questions Hey that looks pretty good. 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 again Last edited by bankfishin; Oct 10, 2006 at 14:53..

Oct 10, 2006, 16:57	#5
MikeFoster I'll take mine raw Join Date: Dec 2002 Location: Alabama, USA Posts: 2,562	Good work! For reference here's my updated demo. __________________ Cross-Browser.com, Home of the X Library

Oct 11, 2006, 07:56	#6
bankfishin SitePoint Zealot Join Date: Aug 2006 Posts: 138	Great Script! MikeFoster, 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.

Oct 11, 2006, 11:40	#7
MikeFoster I'll take mine raw Join Date: Dec 2002 Location: Alabama, USA Posts: 2,562	Thanks, bankfishin A similar technique could be applied to tables, but the current code will not work with tables. __________________ Cross-Browser.com, Home of the X Library

Oct 11, 2006, 12:38	#8
bankfishin SitePoint Zealot Join Date: Aug 2006 Posts: 138	I noticed MikeFoster, 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'); But it didn't work.

Mar 13, 2007, 19:32	#10
MikeFoster I'll take mine raw Join Date: Dec 2002 Location: Alabama, USA Posts: 2,562	Hi HM2K, Welcome to SPF! Not sure if you mean my demo or bankfishin's, but here's a link to mine. __________________ Cross-Browser.com, Home of the X Library

Mar 13, 2007, 23:32	#11
Leoj00 SitePoint Zealot Join Date: Mar 2007 Posts: 191	I have an expanding text area on my site located at: http://rentev.com/leoj/Momotaro/dragdrop/index2 if you want an example of javascript manipulating cols...

Mar 14, 2007, 00:42	#12
rajug Zend Certified Engineer Join Date: Oct 2006 Location: Kathmandu, Nepal Posts: 3,583	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? __________________ 15 Years Of PHP Personal Technical Blog Recently Passed ZCE Exam

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode