HTML Preview

@syn0psisNov 26.2005

Hi…

The referenced ‘HTML Preview’ script which is located on the main site, doesn’t work (at least not after copying, pasting and following the simple directions).

Does anyone know a script that will permit my visitors to enter HTML into a text box, then click ‘Preview’ for the results to show in a new window?

Thank you!

to post a comment

JavaScript

11 Comments(s) _↴

@CharlesNov 26.2005 — #

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta name="Content-Script-Type" content="text/javascript"&gt;
 &lt;meta name="Content-Style-Type" content="text/css"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;&lt;textarea&gt;&lt;/textarea&gt;&lt;/div&gt;
 &lt;div&gt;&lt;button onclick="win = window.open ('', 'child', 'height=400,width=300'); win.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); win.document.close(); win.focus()"&gt;Write&lt;/button&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@syn0psisauthorNov 27.2005 — #Thank you Charles!

@syn0psisauthorNov 27.2005 — #Charles.....the script you provided works. However, in the resulting window, this is displayed:

[B][I]NaN minutes and NaN seconds [/I] [/B]

Nothing else shows. But, if you view the source code....the HTML is present??

Does that make sense?

Thanks!

@konithomimoNov 27.2005 — #You would have to supply the content that you are trying to display in the popup. As long as you are using the first textarea.

@konithomimoNov 27.2005 — #Also, NaN stands for "Not - a - Number". The value taken from a textarea/textbox is seen as a string, so if you want it to be evaluated as a number then use parseInt or parseFloat to get it as a number.

@CharlesNov 27.2005 — #Is this, perhapse, what yuou are up to:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta name="Content-Script-Type" content="text/javascript"&gt;
 &lt;meta name="Content-Style-Type" content="text/css"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div&gt;&lt;textarea&gt;&lt;/textarea&gt;&lt;/div&gt;
 &lt;div&gt;&lt;button onclick="win = window.open ('', 'child', 'height=400,width=300'); win.document.write ([b]eval ([/b]document.getElementsByTagName ('TEXTAREA')[0].value[b])[/b]); win.document.close(); win.focus()"&gt;Write&lt;/button&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@syn0psisauthorNov 27.2005 — #Hi....

It's [u]close[/u]. Here is exactly what I'm doing. Perhaps I didn't explain it thoroughly enough to provide you with the information you need to access my issues.

I have developed a form, which I run locally. The form is simply for my benefit. I use it to expedite the building of complex tables, by filling in a few fields which, in turn, generate the needed width/height/number of cells, etc.

Then, I hit generate, grab my code and place it on whichever clients pages requires the changes. My current method dictates that I save the generated code, then view it in a browser so as to make certain my results meet my intentions.

I got to thinking that if I could add a 'Preview HTML Window' below my textbox, where the code is generated.....I could save a lot of time.

My entire form works...and works well. It's adding a preview button and child window that I am fighting with.

Thanks!!!

@konithomimoNov 27.2005 — #Try this:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 function displayHTML(form) {
 var inf = form.htmlArea.value;
 document.getElementById('div1').innerHTML=inf;
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;textarea name="htmlArea" cols=45 rows=6&gt;
 &lt;/textarea&gt;
 &lt;br&gt;
 &lt;input type="button" value="Preview " onclick="displayHTML(this.form)"&gt;
 &lt;/form&gt;
 &lt;div id="div1" &gt;
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Or if you want it to open in a new window:

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 function displayHTML(form) {
 var inf = form.htmlArea.value;
 win = window.open(", ", 'popup', 'toolbar = no, status = no');
 win.document.write("" + inf + "");
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;form&gt;
 &lt;textarea name="htmlArea" cols=45 rows=6&gt;
 &lt;/textarea&gt;
 &lt;br&gt;
 &lt;input type="button" value="Preview " onclick="displayHTML(this.form)"&gt;
 &lt;/form&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@syn0psisauthorNov 28.2005 — #Thanks konithomimo....but the top example, when I clicked 'preview' displayed a 'clone' of the text box only.

The second example poped up an error box that read 'Cannot Find'. I did include some simple HTML in the textbox to test it when the error occurred.

This has become a challenge to figure out now!! But I promise...when I do, I'll post the solution here!

Thank you for your help!!

@konithomimoNov 28.2005 — #You might have to put in full html if you want it in a new window.

@sdukesMar 08.2006 — #I got an error with your code too.

HTML:

<html>

<head>

<title></title>

</head>

<body>This is my one line web page

</body>

</html>

Error:

Can not find 'file:///C:Test/,'

Also in #JavaScript _↴

issue with animatd slider Java script help-track user time..Menu Link Help Please...

Success!

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

Tweet This

HTML Preview

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

HTML Preview

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴