/    Sign up×
Community /Pin to ProfileBookmark

External TextArea file

I have a readonly textarea where I want the text to be loaded from an external file like a txt file (but i was reliably informed that I couldnt use .txt but could get away with a .js file)

I was just wondering if anyone knows of a way to load the external file into the textarea.

Thanks for reading

Rob

Update:- an effect simmilar to this but using javaScript not flash

[URL=http://visualintensity.com/flash/mx2004/textarea-load/]working example[/URL]

to post a comment
JavaScript

20 Comments(s)

Copy linkTweet thisAlerts:
@theBody44Jun 15.2004 — If you're going to use javascript, store the value into a String variable in a javascript file and then load that variable into the text area. However, if you want to use a .txt file, you need a Server sided language; I've done that in ASP before, so you might want to check that forum.
Copy linkTweet thisAlerts:
@MicrobyteauthorJun 15.2004 — thanks for the reply TheBody44 (nice signature btw)

anyone know how i put the data in a variable and then call it to be displayed into a text area? anyone??
Copy linkTweet thisAlerts:
@theBody44Jun 15.2004 — Here is an example...[CODE]----your HTML file----
<html>
<head>
<script>
function loadContent(){
document.forms[0].myText.value = content;
}
</script>[COLOR=red]
<script language="JavaScript" src="content.js" type="text/javascript"></script>[/COLOR]
</head>
<body>
<form>
<textarea name="myText" cols="40" rows="10"></textarea>
</form>
<span onClick="loadContent()">HELLO</span>
</body>
</html>


##########################################

----content.js----

var content = 'Whatever you want to go into the text area. Use the r symbol for a line break in the text area. So if I write, HellorMy name is Jesse, it will appear: Hello (next line) My name is Jesse'[/CODE]
Hope this helps. The key is the red code above - the link to the js file. The function at the top of the HTML file sets the value of the text area to the variable from your js file. This would almost be easier if you just created that variable in the head of your HTML doc, but it's not my project. Good luck.
Copy linkTweet thisAlerts:
@MicrobyteauthorJun 15.2004 — Ahhhhhhhhhhhh! fantastic. Much obliged sir, just what i was looking for.

? Rob
Copy linkTweet thisAlerts:
@MicrobyteauthorJun 15.2004 — 'snot working ? i tried that code but its not working i have just created the two files in ur post but the text isnt there, in Dreamweaver the code

onClick="loadContent()"> is underlined (MsWord spell check sytlee)

:eek:

Rob



UPDATE: [u]Sorted it[/u]

tweaked it a little thought u might like to see.

<html>

<head>

<script language="javascript">

function loadContent(){

document.forms[0].myText.value = content;

}

</script>

<script language="JavaScript" src="content.js" type="text/javascript"></script>

</head>

<body onLoad="loadContent()">

<form>

<textarea readonly name="myText" cols="40" rows="10"></textarea>

</form>

</body>

</html>
Copy linkTweet thisAlerts:
@theBody44Jun 15.2004 — [CODE]<html>
<head>
<script language="javascript">
function loadContent(){
document.forms[0].myText.value = content;
}
</script>
<script language="JavaScript" src="content.js" type="text/javascript"></script>
</head>
<body>
<form>
<textarea readonly name="myText" cols="40" rows="10"></textarea>
</form>[COLOr=red]
<script>
loadContent();
</script>[/COLOR]
</body>
</html>[/CODE]
You can't call the function onLoad because the text area does not exist yet because it has not yet been created. So you must create the text area, then call it - see my code?
Copy linkTweet thisAlerts:
@MicrobyteauthorJun 16.2004 — it works tho. which doesnt make sense
Copy linkTweet thisAlerts:
@TageJun 16.2004 — You [i]can[/i] call the function using onLoad because the onLoad event handler fires after the page has loaded; therefore, the textarea has already been created when the function is called.

Tage
Copy linkTweet thisAlerts:
@MicrobyteauthorJun 16.2004 — Ahhh, that makes sense now.

just out of thought is it possible to use html tags in the var content so that the webpage translates the html tag?
Copy linkTweet thisAlerts:
@TageJun 16.2004 — You mean put html tags into the var content, and then use javascript to write it into the page? Like this example maybe.[code=php]<html>
<head>
<script type="text/javascript">
<!--
function loadContent(){
document.write(content);
}
//-->
</script>
<script src="content.js" type="text/javascript"></script>
</head>
<body>
1+1=
<script type="text/javascript">
<!--
loadContent()
//-->
</script>
</body>
</html>[/code]
or[code=php]<html>
<head>
<script src="content.js" type="text/javascript"></script>
</head>
<body>
1+1=
<script type="text/javascript">
<!--
document.write(content);
//-->
</script>
</body>
</html>[/code]
content.js:[code=php]var content="<span style='background-color:#808080'>2</span>";[/code]Keep a note that you cannot use the onLoad event handler with this method. After the page loads, any call for document.write() will clear all the html and write whatever is in the document.write(). So you have to call document.write() [i]while[/i] the page is loading.
Copy linkTweet thisAlerts:
@MicrobyteauthorJun 16.2004 — basically i am using a text area because i want to display some text over an image. Using the external content.js file i can display the text but i can't format the text and url's are missing hyperlinks.

there is probably a much easier way to achive the same effect as what im after but im not sure, i could use swf an have dynamic text from a file but i'm not too keen on flash.


Example:

[code=php]<html>
<head>
<title>title</title>
<script language="javascript">
function loadContent(){
document.forms[0].myText.value = content;
}
</script>
<script language="JavaScript" src="content.js" type="text/javascript"></script>

</head>

<body onLoad="loadContent()" bgcolor="#000000" text="#FFFFFF"><div align="center"><img src="background.gif"></div>
<form><textarea readonly name="myText" wrap="hard" id="text" style="position:absolute; top::228px; left::187px; overflow: scroll; width: 651px; height:: 316px; background:background-color:#000000; color:#ffffff; left: 184px; top: 235px; height: 325px; background-color: #000000; layer-background-color: #000000; border: 1px none #000000;"></textarea></form>
</body>
</html>[/code]


#######content.js########

[code=php]var = "http://www.webdeveloper.com"[/code]
Copy linkTweet thisAlerts:
@TageJun 16.2004 — Try this[code=php]<html>
<head>
<script src="content.js" type="text/javascript"></script>
</head>
<body>
<div style="background-image:url('background.gif')">
<script type="text/javascript">
<!--
document.write(content);
//-->
</script>
</div>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@MicrobyteauthorJun 16.2004 — but i want the text in a textarea so that i can place the text over the image in a scrollable window, that will just write the text in the html page on top of the image.
Copy linkTweet thisAlerts:
@PittimannJun 16.2004 — Hi!

If I got you right, you want: formatted text coming from an external file in an "area" which is positioned above (z-index wise) an image.

For that purpose you don't need a textarea and a .txt or .js file; you will simply need an HTML document loaded into an iframe or layer which is positioned above an image.

Like this: http://www.pit-r.de/scripts/Microbyte/microbyte.htm

Cheers - Pit
Copy linkTweet thisAlerts:
@MicrobyteauthorJun 16.2004 — Pit u never cease to amaze me, always there with the answer.

? i'll jus check the source on that.

thanks again, to all who helped.

Rob
Copy linkTweet thisAlerts:
@PittimannJun 16.2004 — Hi!

Here it is:[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body bgcolor="#000000" text="#FFFFFF"><div align="center" style="position:absolute; top:0px; left:0px;"><img src="../imgMaps/bike2.jpg"></div>
<div style="position:absolute; top:15px; left:15px; overflow: none; width: 300px; height: 300px; border: 1px none #000000;background-color:#ffffff"><iframe src="microbyte_content.htm" id="myText" style="width: 100%; height: 100%; border: 1px none #000000;"></iframe></div>
</body>
</html>[/code]
And the microbyte_content.htm:[code=php]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!--
.maintext {
color: #237FB3;
font-family: arial;
font-size: 12px;
font-weight: bold;
}
.subtext {
color: #000000;
font-family: arial;
font-size: 12px;
font-weight: normal;
}
-->
</style>
</head>
<body>
<div class="maintext">Textarea with External Text and CSS</div>
<br>
<div class="subtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor. Pellentesque interdum lectus nec justo. Praesent at tortor in leo sagittis commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Integer sagittis, dolor eget sagittis lacinia, dui diam venenatis nisl, sit amet elementum mi felis eu metus. Pellentesque bibendum tempor odio. Fusce malesuada laoreet ante. Praesent placerat ante eget erat. In elementum. Vestibulum vel dui. Morbi id mauris. In non massa.</div>
<br>
<div class="subtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor. Pellentesque interdum lectus nec justo. Praesent at tortor in leo sagittis commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Integer sagittis, dolor eget sagittis lacinia, dui diam venenatis nisl, sit amet elementum mi felis eu metus. Pellentesque bibendum tempor odio. Fusce malesuada laoreet ante. Praesent placerat ante eget erat. In elementum. Vestibulum vel dui. Morbi id mauris. In non massa.</div>
</body>
</html>[/code]
Cheers - Pit
Copy linkTweet thisAlerts:
@MicrobyteauthorJun 16.2004 — thanks again.

take it easy.

Rob
Copy linkTweet thisAlerts:
@PittimannJun 16.2004 — Hi!

I do take it easy ? - you're welcome!

Cheers - Pit
Copy linkTweet thisAlerts:
@TageJun 16.2004 — Oh, lol. Sorry.

Tage
Copy linkTweet thisAlerts:
@MicrobyteauthorJun 16.2004 — lol np tage.
×

Success!

Help @Microbyte spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...