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 Created by <a href="http://www.squarefree.com/" target="_top">Jesse Ruderman<\/a> and hosted by <a href="http://www.dreamhost.com/rewards.cgi?jesseruderman" target="_top">DreamHost<\/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();
}
I know enough about JavaScript to follow it "lightly" understand the syntax -- understand how one leads to the other & how its tied together. What I'm trying to do is figure *simple* way to embed the HTML tag <marquee>, so anything entered in the top is automatically scrolling in the bottom. :confused:
I've been working on it, and at first, I made the entire top frame scroll . . . -- no good.
I've tried CSS too & that scrolls the whole top frame.
My big problem, I know, is that its a "TEXTAREA" which renders its content as plain text. I can either scroll the whole textarea or nothing. After many troubling failures, I've managed to now just show "marquee" -- in my latest example:
Code:
<!DOCTYPE html>
<html>
<!--Created by Jesse Ruderman | htmledit.squarefree.com-->
<!--Code modified without permission-->
<head>
<title>Real-time HTML Editor</title>
<script type="text/javascript">
function init()
{
window.editbox.document.write(editboxHTML);
window.editbox.document.close();
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);
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>
<!--Created by Jesse Ruderman | htmledit.squarefree.com-->
<!--Code modified without permission-->
</html>
So, now I'm going to settle with anything. Is this even possible? Could I just simply "hide" the marquee tags? I've already tried using the CSS Visibility line & that didn't work either.
Any suggestions would be great! :D
11-08-2012, 12:00 PM
rtrethewey
Try:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Editable HTML Marquee Display</title>
<script>
var rdIdleTime = .2; // Update every .2 seconds
var codeBox = null;
var viewer = null;
var rdTimeoutID = null;
function rdUpdateHTML() {
viewer.innerHTML = codeBox.value;
rdTimeoutID = setTimeout('rdUpdateHTML()', rdIdleTime * 1000);
} // end rdUpdateHTML
if (window.addEventListener) { // W3C standard
window.addEventListener('load', rdInitFrames, false);
} else if (window.attachEvent) { // Microsoft
window.attachEvent('onload', rdInitFrames);
}
