...

View Full Version : Creating a ...Loading text on textarea



Vapor
05-26-2005, 05:04 PM
I have a textarea with a ton of text in it. Once you visit the page with all the text it takes the page a min. to load all the text into the textarea box. Is there a way I can have the textarea box say ...Loading Please Wait until the complete text is loaded and then show all the text?

Thanks

rlemon
05-26-2005, 05:32 PM
I have a textarea with a ton of text in it. Once you visit the page with all the text it takes the page a min. to load all the text into the textarea box. Is there a way I can have the textarea box say ...Loading Please Wait until the complete text is loaded and then show all the text?

Thanks
var LotsOfText = "whatever your text is, and how you load it. I would assume JS?";
document.form.textarea.value = "Loading Please Wait......";
document.form.textarea.value = LotsOfText;

vwphillips
05-26-2005, 05:33 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function HideWait(){
document.getElementById('mess').style.visibility='hidden';
}

//-->
</script>

</head>

<body onload="HideWait();" >

<span id="mess" >Please Wait</span>
<textarea name="" rows="50" cols="100">Ton of Text</textarea>
</body>
</html>

Vapor
05-26-2005, 05:42 PM
How would I stick that function in this code to make it work?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
.highlight {
background-color:yellow;
}
</style>
<script type="text/javascript">
function searchText(){
var str=document.getElementById('srch_str').value;
var old_str=document.getElementById('txt').value;
var regex=new RegExp('('+str+')','ig');

var new_str=old_str.replace(regex,'<span class="highlight">$1</span>') ;
if(new_str.length==old_str.length){
new_str="No Match Found!";
}
document.getElementById('results').innerHTML=new_str;
}
</script>
</head>
<body>
<form onsubmit='searchText();return false'>
Search: <input type="text" id="srch_str" />
<input type="submit" value="Find Text"/>
<br />
<textarea cols="40" rows="5" id="txt">Hello all. I am testing a search function. It is because of this that this text is here.
</textarea>
</form>
Results:
<div id="results">
</div>
</body>
</html>

rlemon
05-26-2005, 05:51 PM
try this code.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
.highlight {
background-color:yellow;
}
</style>
<script type="text/javascript">
function init(){
// Code for EXAMPLE PURPOSES
var html='';
for(var i=1; i<=1500; i++){
html+='Hello all. I am testing a search function. It is because of this that this text is here.\n';
}
// END OF EXAMPLE CODE
var myTXT = document.getElementById('txt');
myTXT.value=html;
}
function searchText(){
document.getElementById('results').innerHTML="Loading Results...";
stTO = window.setTimeout("st()",10);
}
function st(){
var str=document.getElementById('srch_str').value;
var old_str=document.getElementById('txt').value;
var regex=new RegExp('('+str+')','ig');

var new_str=old_str.replace(regex,'<span class="highlight">$1</span>') ;
if(new_str.length==old_str.length){
new_str="No Match Found!";
}
document.getElementById('results').innerHTML=new_str;
return;
}
</script>
</head>
<body onload="setTimeout('init()',10)">
<form onsubmit='searchText(); return false'>
Search: <input type="text" id="srch_str" />
<input type="submit" value="Find Text"/>
<br />
<textarea cols="40" rows="5" id="txt">Loading Content....</textarea>
</form>
Results:
<div id="results"></div>
</body>
</html>

Vapor
05-27-2005, 05:16 PM
My code got screwed up in the process of transfering codes to gether and I am confused! here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
.highlight {
background-color:yellow;
}
</style>
<script type="text/javascript">
function searchText(){
var str=document.getElementById('srch_str').value;
var old_str=document.getElementById('txt').value;
var regex=new RegExp('('+str+')','ig');

var new_str=old_str.replace(regex,'<span class="highlight">$1</span>') ;
if(new_str.length==old_str.length){
new_str="No Match Found!";
}
document.getElementById('results').innerHTML=new_str;
}
</script>
</head>
<body>
<form onsubmit='searchText();return false'>
Search: <input type="text" id="srch_str" />
<input type="submit" value="Find Text"/>
<br />
<textarea cols="40" rows="5" id="txt">Hello all. I am testing a search function. It is because of this that this text is here.
</textarea>
</form>
Results:
<div id="results">
</div>
</body>
</html>

Using the code above, how can I make the ...Loading Please Wait text appear in the textarea when loading. I need to work it into this code, I cant just use the code that rlemon gave me. Sorry. I need to work it into the above code.

Thanks

rlemon
05-27-2005, 06:02 PM
Why can you not use my code?

ohh well.

Here is another one.

Works fine,
uses your code (with a few modifications)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<style type="text/css">
.highlight {
background-color:yellow;
}
</style>
<script type="text/javascript">
function init(){
var ta = document.getElementById('txt');
ta.value = "Hello all. I am testing a search function. It is because of this that this text is here."
}
function setLoading(){
var ta = document.getElementById('results');
ta.innerHTML = "Loading Please Wait......"
return;
}
function searchText(){
var str=document.getElementById('srch_str').value;
var old_str=document.getElementById('txt').value;
var regex=new RegExp('('+str+')','ig');

var new_str=old_str.replace(regex,'<span class="highlight">$1</span>') ;
if(new_str.length==old_str.length){
new_str="No Match Found!";
}
document.getElementById('results').innerHTML=new_str;
}
</script>
</head>
<body onload="setTimeout('init()', 500)">
<form onsubmit='setTimeout("searchText()", 500);return false'>
Search: <input type="text" id="srch_str" />
<input type="submit" value="Find Text" onclick="setLoading()"/>
<br />
<textarea cols="40" rows="5" id="txt">Loading Please Wait......
</textarea>
</form>
Results:
<div id="results">
</div>
</body>
</html>


tested in IE, Mozilla, and FireFox

rlemon
05-27-2005, 06:41 PM
here is an example with the textfield 'disabled'

http://www.rlemon.com/scripts/search/index2.html

(i.e the user cannot make changes to the text, the text is loaded through JS and if they make a change it gets reverted onFocusOut

Vapor
05-27-2005, 07:01 PM
Thanks man

I REALLY appreciate it! :D :D :D :thumbsup:

Vapor
05-27-2005, 08:48 PM
rlemon

I really appreciate your help with this code. the problem is that the code I use allows me to hit enter (make a new paragraph) within the textarea and it will show up in the textarea on the site when it loads.

The code you gave me (which I really want to use) wont let me hit enter. If you do, the page has an error when it loads and I can not view the text in the textarea.

Is there a way to modify the code that you posted to allow returns in the body of the text?

Thank you so much

-vapor

glenngv
05-30-2005, 11:59 AM
Put \n where you want to make a newline.

ta.value = "Line 1\nLine 2\nLine 3"

rlemon
05-30-2005, 02:10 PM
glenngv is correct.

in your code where you load your textarea text place '\n' where ever you want a line break.

rlemon
05-30-2005, 02:12 PM
here is an example with the textfield 'disabled'

http://www.rlemon.com/scripts/search/index2.html

(i.e the user cannot make changes to the text, the text is loaded through JS and if they make a change it gets reverted onFocusOut

ohh and i forgot to post how i made the textarea 'non-changable'

to the textarea append the attibute:

onchange="init()"

Vapor
05-31-2005, 07:22 PM
Ahhh, much better. The text in the textarea looks much neater.

Thank you!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum