Solved

Dynamic TextArea ReSizing?

Posted on 2010-08-23
6
642 Views
Last Modified: 2012-05-10
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

0
Comment
Question by:eNarc
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 21

Accepted Solution

by:
chapmanjw earned 334 total points
ID: 33506383
0
 
LVL 5

Author Comment

by:eNarc
ID: 33509544
whats prototype?
0
 
LVL 5

Author Comment

by:eNarc
ID: 33509942
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 21

Assisted Solution

by:chapmanjw
chapmanjw earned 334 total points
ID: 33511057
Have you tried compressing it?  Or setting up compression on your web server?
0
 
LVL 110

Assisted Solution

by:Ray Paseur
Ray Paseur earned 166 total points
ID: 33511723
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
 
LVL 5

Author Comment

by:eNarc
ID: 33541117
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question