Forum Moderators: open
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>textarea expander</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
</head>
<body onload="initiateWidth()">
<script type="text/javascript">
//<![CDATA[
var df=document.forms;
function initiateWidth() {
df[0][0].style.width=df[0][1].offsetWidth+"px"
}
function expandtextarea(which) {
if(which==0) {
df[0][1].rows=df[0][1].rows+1;
df[0][0].style.height=df[0][1].offsetHeight+25+"px";
}
else {
df[0][1].cols=df[0][1].cols+1;
df[0][0].style.width=df[0][1].offsetWidth+"px";
}
}
//]]>
</script>
<form id="theForm" action="#">
<fieldset style="border: 0;">
<textarea rows="12" cols="60">
</textarea>
<div>
<br />
<input type="button" value="Add row" onclick="expandtextarea(0)"/>
<input type="button" value="Expand" onclick="expandtextarea(1)" />
</div>
</fieldset>
</form>
</body>
</html>
Only if you have another field in the form, it will expand the other field instead.
var df=document.forms; the issue?
df[0] refers to the first form on the page.
df[0][0] refers to the first element within the first form.
This means that df[0][0] refers to the fieldset element and df[0][1] to the textarea element.
If you add elements to the form then you will have to adjust the references accordingly.
Also note that the script should be placed within the head section not the body.
I hope that this helps. ;)
birdbrain
