Dynamic TextArea ReSizing?

I'm having trouble building a TextArea Resizing thing that when you put in text it will automaticly resize itself so there are no scrollbars.

the issues are that when I type in LOTS AND LOTS AND LOTS AND LOTS of text, there is a massize white gap beyond that of where the text originally stopped.

and if I do this.

wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww

it acts as 1 line and a scrollbar stays.

all in all, I'm needing some help with these, the below text is what I've been texting around with with no hope.

could anyone help me?
<script type="text/javascript">
adjustRows(document.formdata1.code);
</script>

<script type="text/javascript">	
	
			
	

function adjustRows(ta) {
    while(ta.scrollHeight > ta.offsetHeight) ta.rows++;
    adjustRows2(ta);
}

function adjustRows2(ta) {
   
        var lines = ta.value.split("\n");
        var linecount = lines.length;
        for (var line in lines)
            linecount += parseInt(lines[line].length / ta.cols);
        if (linecount > ta.rows)
            ta.rows = linecount + 1;
           
        if (linecount < ta.rows)
            ta.rows = linecount - 1;

}

function UpdateTextArea(t) {

//form1.pic.value=1+parseInt(form1.pic.value);
document.getElementById(t);
//adjustRows(document.form1.datarea);
var g = document.getElementById(t);
adjustRows(g);
}



//'.stripslashes($DD1[memo]).'
setInterval("UpdateTextArea('memo')", 1000);
</script>

<script>
function confirm_change(myfield){
	if (myfield.inchange)return;
	myfield.inchange=true;
	//myfield.value=myfield.value.toUpperCase();
	var o = document.getElementById("savestatus");
	o.innerHTML='Edited';
	UpdateTextArea(myfield);
	myfield.inchange=false;	
}
</script>





<script>
function test(myfield){
document.getElementById("test1").rows=10;
//document.getElementById("test2").rows=1;
//document.getElementById("test2").rows=Math.round(document.getElementById("test2").scrollHeight/18);

document.getElementById("test1").value=	'Row Count: '+document.getElementById("test2").rows+'\n'+
										'scrollHeight: '+document.getElementById("test2").scrollHeight+'\n'+
										'offsetHeight: '+document.getElementById("test2").offsetHeight+'\n'+
										'clientHeight: '+document.getElementById("test2").clientHeight+'\n'+
										'value.split: '+document.getElementById("test2").value.split("\n").length+'\n'+
										'Math.round: '+Math.round(document.getElementById("test2").scrollHeight/18)+'\n'+
										'scrollWidth: '+document.getElementById("test2").scrollWidth+'\n'+
										'offsetWidth: '+document.getElementById("test2").offsetWidth+'\n'+
										'clientWidth: '+document.getElementById("test2").clientWidth
									
										

;
										
										
								
	while(document.getElementById("test2").scrollHeight > document.getElementById("test2").offsetHeight) //I use offsetHeight rather than clientHeight because scrollHeight is always bigger than clientHeight in Opera on textareas
        document.getElementById("test2").rows++;

document.getElementById("aa").value=document.getElementById("test2").rows;
//document.getElementById("test2").rows=document.getElementById("test2").value.split("\n").length;



if(document.getElementById("test2").value.split("\n").length < document.getElementById("test2").rows){
	//if split is less then we use split, because we've deleted a row.
	document.getElementById("test2").rows=document.getElementById("test2").value.split("\n").length;
}

}
</script>
<script>
function test2(o){
	document.getElementById("test2").rows=1;
	while(document.getElementById("test2").scrollHeight > document.getElementById("test2").offsetHeight)
        document.getElementById("test2").rows++;

}

function test3(o){
	document.getElementById("test2").rows=Math.floor(document.getElementById("test2").value.length / document.getElementById("test2").cols) + 1
	
}



function fixTextSize(textfield, maxheight) {
textfield.autoSize = true;
thistextsize = 10; // Start at 10pt size
thisheight = thistext.textHeight; // Get current height

myTextFormat = new TextFormat(); // Instance of TextFormat object required

// Loop until height exceeds limit, font getting bigger each time
while (thisheight < maxheight) {
thistextsize++;
myTextFormat.size = thistextsize;	
textfield.setTextFormat(myTextFormat);
thisheight = thistext.textHeight;
}

// Reduce size by 1 as we have exceeded limits
thistextsize--;
myTextFormat.size = thistextsize;	
textfield.setTextFormat(myTextFormat);
}
</script>




<div id="savestatus"> </div>

<textarea id="aa" name="memo1" onclick="adjustRows(this);">uoiiufuipouyfi</textarea><br />
<br />
<textarea name="memo" onchange="adjustRows(this);">uoiiufuipouyfi</textarea>

<br /><br />
<br />

Info Table:<br /><textarea id="test1" name="memo1" onchange="test(this);">uoiiufuipouyfi</textarea>
<br />
Result Table:<br />

<textarea id="test2" name="memo2" onchange="test3(this);">uoiiufuipouyfi</textarea>

Open in new window

LVL 5
eNarcAsked:
Who is Participating?
 
chapmanjwConnect With a Mentor Commented:
0
 
eNarcAuthor Commented:
whats prototype?
0
 
eNarcAuthor Commented:
http:#33506383 chapmanjw

I'm unable to use that since its about 150+k in size and this is for a mobile website, so bandwidth is needing to be low in size.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
chapmanjwConnect With a Mentor Commented:
Have you tried compressing it?  Or setting up compression on your web server?
0
 
Ray PaseurConnect With a Mentor Commented:
I can't vouch for this on mobile devices, but you might want to look into the TinyMCE textarea replacement.  I think it's used by Wordpress, and they have a mobile app or plug-in of some sort.

Also this seach might turn up something useful:
http://lmgtfy.com?q=mobile+textarea

;-)

~Ray
0
 
eNarcAuthor Commented:
I think for now I'll just stick with the below.

document.getElementById("test2").rows=1;
      while(document.getElementById("test2").scrollHeight > document.getElementById("test2").offsetHeight)
        document.getElementById("test2").rows++;

it puts the row at 1 and then begins increasing the memo size,

that way the scroll will always disappear,  and used with onchange, will allow for deleteing lines and adding lines.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.