Expanding and Collapsing Textarea help please

expanding textarea using javascript

[incrediblej]

Hi There everyone, i am new here and been trying to figure out a javascript code for my webspage, okay, i have seen familiar to what i need but after searching google for hours i have decided to post.

okay.

I have a textarea:

<textarea name='message' rows="6" cols="35" style="width:80%; height:80px" wrap='virtual' tabindex='1' class='post' onselect='storeCaret(this);' onclick='storeCaret(this);' onkeyup='storeCaret(this);'></textarea>

and i have a plus and minus button created "+" and "-"

<input type="button" name='add_plus' id='add_plus' value="+" onclick="" class="liteoption" style='width: 25px;'/>
<input type="button" name='add_minus' id='add_minus' value="-" onclick="=" class="liteoption" style='width: 25px;'/>

okay so i need a code that will take the current text area height which is 80 in this case, and 'expand' it by 20 if the + button is clicked and subttract it back to 80 if the - button is clicked

i have been working on something, but i am hopeless, just thing i pciked up off the web:

function add(a,b)
{
var c = document.getElementById(b);
var d = parseInt(c.style.height);
var e = d+a;
if ( e >= 80 )
{
c.style.height = e+'px';
}
return;

but that is probably useless.

even if it only works in specific browsers that is okay, as it will just stay at 80 if not, but mostly firefox is used.

any help with this would be greatly appreciated, dont worry about my code i put up, it is probably worthless, aslong as it does the job.

Much Thanks!

[daveVk]

Try replacing

var d = parseInt(c.style.height);

with

var d = c.offsetHeight;

[incrediblej]

nope, i think i need a new code. I ended up getting one:

window.onload = function() {
var mess = document.getElementById('message');
document.getElementById('add_plus').onclick = function() {
if (!mess.style.height) mess.style.height = 80px;
else mess.style.height = (parseInt(mess.style.height) + 20) + 'px';
}
document.getElementById('add_minus').onclick = function() {
if (!mess.style.height ¦¦ parseInt(mess.style.height) == 80) mess.style.height = 80px;
else mess.style.height = (parseInt(mess.style.height) - 20) + 'px';
}
}

but i do not how to implement into my current code. and also can i rename fucntions to something else, like fucntion expand(), i am new to this and have now idea how to implement javascript, i am good with php and html, but javascript i am new to.

any help to get this to actually work would be great,
and a code i DONT need to put into the header.

thanks everyone in advance.

[daveVk]

I think the size is being determined by these rows="6" cols="35", try coding in terms of c.rows instead of c.style.height assuming you what more rows. If you what the same rows but bigger text and box then change font.