extacy
Member
- Jan 6, 2011
- 106
- 2
This allows you to view what happens with any html code you put in there.
i don't know why i made this i just did it for fun.
heres a
heres the code:
Credit-
100% me
i don't know why i made this i just did it for fun.
heres a
You must be registered for see links
heres the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Real-time HTML Editor</title>
<script type="text/javascript">
var editboxHTML =
'<html class="expand close">' +
'<head>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; }' +
'.close { border: none; margin: 0px; padding: 0px; }' +
'html,body { overflow: hidden; }' +
'<\/style>' +
'<\/head>' +
'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">' +
'<form class="expand close" name="f">' +
'<textarea class="expand close" style="background: #def;" name="ta" wrap="hard" spellcheck="false">' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';
var defaultStuff = '<h3>Welcome to the real-time HTML editor!<\/h3>\n' +
'<p>Type HTML in the textarea above, and it will magically appear in the frame below.<\/p>';
// I don't want this stuff to appear in the box at the top because I feel it's likely to be distracting.
var extraStuff = '<div style="position:absolute; margin:.3em; bottom:0em; right:0em;"><small>\n <a href="" target="_top"><\/a> <a href="" target="_top"><\/a>.\n<\/small><\/div>';
var old = '';
function init()
{
window.editbox.document.write(editboxHTML);
window.editbox.document.close();
window.editbox.document.f.ta.value = defaultStuff;
update();
}
function update()
{
var textarea = window.editbox.document.f.ta;
var d = dynamicframe.document;
if (old != textarea.value) {
old = textarea.value;
d.open();
d.write(old);
if (old.replace(/[\r\n]/g,'') == defaultStuff.replace(/[\r\n]/g,''))
d.write(extraStuff);
d.close();
}
window.setTimeout(update, 150);
}
</script>
</head>
<frameset resizable="yes" rows="50%,*" onload="init();">
<!-- about:blank confuses opera, so use javascript: URLs instead -->
<frame name="editbox" src="javascript:'';">
<frame name="dynamicframe" src="javascript:'';">
</frameset>
</html>100% me
