Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to type HTML code in 1 frame & show HTML preview in other frame? 2

Status
Not open for further replies.
may1hem

may1hem

Programmer
Jul 28, 2002
262
GB
I want to create a Web page which allows the user to type some HTML code in a box and show a live preview.

So, if the user types &quot;<b>Hello<b>&quot; then I want them to see the word &quot;Hello&quot; in bold on the same page, without having to send the HTML code back to the server.

I've seen it done, but just don't know how.

Can someone help me?

Thanks,

May
 
Sort by date Sort by votes
you can use javascript to change the content of a div layer, and if u put a &quot;onchange&quot; or &quot;onkeypress&quot; script on the text box that the visitor types in i suppose this would make it work :)

if u want i can have a go at it tomorrow if someone else hasnt provided an answer.. I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Thanks for the quick reply!

I saw on one site they had a box in which the user could edit and see formatted text. So I guess it wasn't an ordinary text box. Any ideas what it might have been?

Any help you can give would be greatly appreciated K9logic!

May
 
Upvote 0 Downvote
:) iv got it :D

<html>
<head>
<title>HTML preview</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
function preview(thetext)
{
document.getElementById(&quot;view&quot;).innerHTML = thetext;
}
</script>

</head>

<body>
<form name=&quot;form1&quot; method=&quot;post&quot; action=&quot;&quot;>
<input name=&quot;text&quot; type=&quot;text&quot; id=&quot;textarea2&quot; onKeyUp=&quot;preview(this.value)&quot; value=&quot;&quot; size=&quot;40&quot;>
<br />
<br />
<br />
<div id=&quot;view&quot;>View: <br /></div>



</form>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>


the idea i had worked, quite simple realy :D

nice idea u had iv never thought of it before, i might have to use this somewher ;)

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
here is a nicer version with a big textblock :)

<html>
<head>
<title>HTML Previewer</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<script language=&quot;JavaScript&quot; type=&quot;text/javascript&quot;>
function preview(thetext)
{
document.getElementById(&quot;view&quot;).innerHTML = thetext;
}
</script>

</head>

<body>

<textarea name=&quot;text&quot; cols=&quot;70&quot; rows=&quot;20&quot; id=&quot;textarea2&quot; onclick=&quot;this.value=''&quot; onKeyUp=&quot;preview(this.value)&quot;>Type html here</textarea>
<br />
<br />
<table width=&quot;450&quot; height=&quot;277&quot; border=&quot;1&quot;>
<tr>
<td height=&quot;23&quot;>View:</td>
</tr>
<tr>
<td height=&quot;246&quot; align=&quot;left&quot; valign=&quot;top&quot;><div id=&quot;view&quot;><i>this will show the preview</i></i></div></td>
</tr>
</table>

</body>
</html>
I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
oeps. leave the onclick handeler out of the text block, i forgot that it keeps doing that and not just the first time :S hehe.

all you need now are some add-html-tag buttons to make it easier:) I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
thanks :) I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
VERY cool! This is just what i need.

And a *star* from me too!

May
 
Upvote 0 Downvote
thank you too :)
I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
711
bdwilcox
bdwilcox
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
776
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top