Hey. :D I've written a page which uses Ajax to let a user type in HTML on one side, and have the html be shown completely on the other side.
It works well - that is, until the user wants to use CSS styles in the head. As it is simply placing the contents of the textbox into a div, and we don't want multiple head tags, I can see the problem. However, I don't see how to get around this. I know that W3Schools has a Tryit Editor, which shows the results in an iFrame. However, it seems to be done with ASP, and it also isn't live - you need to click submit.
Is there any way that I can set the contents of an iFrame using Ajax instead of having it require an external URL (using PHP, I would presume, as I don't know ASP) or am I stuck? You see, I don't get how I would set a POST url to be in the iFrame and... *sigh* That's just too complicated.
Here's my code, saved as htmltest.html:
<html>
<head>
<title>Test HTML</title>
<script type="text/javascript">
function validate(html) {
document.getElementById('foo').innerHTML = html;
}
</script>
</head>
<body style="background-color:aliceblue;">
<center><h1>HTML Test Stuff</h1>
<p>Hey Amanda! Just put the HTML in that box, and it'll edit in the other one. x3</p></center>
<div style="width:48%;float:left;height:80%;border:1px solid red;background-color:white;padding:5px;">
<form>
<textarea type="text" onkeyup="validate(this.value)" style="min-width:100%;height:700px;margin-top:auto;margin-bottom:auto;"><b>Your HTML</b> <i>goes here</i>!</textarea>
</form>
</div>
<form>
<div id="foo" style="width:48%;height:80%;float:right;border:1px solid red;background-color:white;padding:5px;">This is a test value. Type in the box to change it!</div>
</form>
</body>
</html>Thank you very much. :)
Arianna