JavaScript expand/contract textarea ~please help - Webmaster Forums - Webmaster forum for HTML, PHP, ASP, CSS and more

krato · 08-13-2006, 06:55 PM

Hi, i would really appreciate a little help with my JavaScript, i've only just started learning it and i'm stuck. I've gone as far as to get the following script working but i need some adjustments that i just can't seem to get working. Please bear in mind i'm a newbie please be gentle with me

I'm trying to make a textarea expand and contract when pressing buttons below the textarea. I've managed to get this to work but i need to change my IF statements, so the textarea can only expands when its less than 40lines long, and can only contract when its more than 10 lines long.

I think i also need an else statment incase it doesn't fit into either of the if statements but i might be wrong about that - i don't know. Either way i can't get it to work

i've commented out the parts that i can't get to work, the rest seems fine. If someone could please help me i'd be really greatfull

As well as the code below i also have a test page to show it working. its at krato.co.uk/admin/news/test .html

This is what i have:

Code:

<html>
<head>

<script type="text/javascript">
function resize(id, type) {

	var txtId = document.getElementById(id);
	//if (type == 'expand' && txtId.rows < 40){ //i would like that but can't get it to work :(
	if (type == 'expand') { 
		var newRows = txtId.rows + 10;
	} 		
	//if (type == 'contract' && txtId.rows > 10){ //same as above :(
	else if (type == 'contract') { 
		var newRows = txtId.rows - 10; 
	}
	//i think i need an else, incase it doesnt fit into the above IF's, i cant get it to work though
	//else {
	//	var newRows = txtId.rows;
	//}
	txtId.rows = newRows;
}
</script>

</head>

<body>

  <!-- textarea "tags"-->
  <textarea name="tags" cols="65" rows="10" id="tags"></textarea>
  <br />
  <!-- expand and contract buttons for textarea "tags" -->
  <input type="button" name="expand1" onClick="resize('tags', 'expand')" value="+">
  <input type="button" name="contract1" onClick="resize('tags', 'contract')" value="-">
  <br><br>
  
  <!-- textarea "body"-->
  <textarea name="body" cols="65" rows="10" id="body"></textarea>
  <br />
  <!-- expand and contract buttons for textarea "body" -->
  <input type="button" name="expand" onClick="resize('body', 'expand')" value="+">
  <input type="button" name="contract" onClick="resize('body', 'contract')" value="-">
  
</body>
</html>

Thankyou

Ryan