www.webdeveloper.com
Results 1 to 2 of 2

Thread: Automatic Markup . . .

Hybrid View

  1. #1
    Join Date
    Mar 2005
    Location
    Mesa, AZ
    Posts
    120

    Question Automatic Markup . . .

    Hello All!

    I'm trying to do something that has been stumping me for several hours now.

    I'm trying to modify code snagged from THIS SITE

    Here is the source, if you can't visit the link:

    Code:
    <!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  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();
      }
    
      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>
    Its simple enough.

    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.

    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">
    
    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">' +
    '<marquee>' +
    '<\/marquee>' +
    '<\/textarea>' +
    '<\/form>' +
    '<\/body>' +
    '<\/html>';
    
    var old = '';
             
    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!
    -Alex
    https://www.thisguyshouldworkfor.us/
    "You never know, unless you ask!"

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    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 rdInitFrames() {
    
       editBoxCode = "<!DOCTYPE html>";
       editBoxCode += "<html>";
       editBoxCode += "<head>";
       editBoxCode += "<style type='text/css'>";
       editBoxCode += "html, body { margin:0; padding:0; }";
       editBoxCode += "#wrapper { margin:0; padding:4px 8px; }";
       editBoxCode += "</style>";
       editBoxCode += "</head>";
       editBoxCode += "<body>";
       editBoxCode += "<div id='wrapper'>";
       editBoxCode += "<textarea id='codeBox' rows='20' cols='120'></textarea>";
       editBoxCode += "</div>";
       editBoxCode += "</body>";
       editBoxCode += "</html>";
       window.editbox.document.open();
       window.editbox.document.write(editBoxCode);
       window.editbox.document.close();
       codeBox = window.editbox.document.getElementById('codeBox');
    
       viewerCode = "<!DOCTYPE html>";
       viewerCode += "<html>";
       viewerCode += "<head>";
       viewerCode += "<style type='text/css'>";
       viewerCode += "html, body { margin:0; padding:0; }";
       viewerCode += "#wrapper { margin:0; padding:4px 8px; }";
       viewerCode += "#sign { font-size:24px; }";
       viewerCode += "</style>";
       viewerCode += "</head>";
       viewerCode += "<body>";
       viewerCode += "<div id='wrapper'>";
       viewerCode += "<marquee id='sign' behavior='scroll'></marquee>";
       viewerCode += "</div>";
       viewerCode += "</body>";
       viewerCode += "</html>";
       window.dynamicframe.document.open();
       window.dynamicframe.document.write(viewerCode);
       window.dynamicframe.document.close();
       viewer = window.dynamicframe.document.getElementById('sign');
       viewer.appendChild(window.dynamicframe.document.createTextNode(' '));
       rdUpdateHTML();
     } // end rdInitFrames()
    
     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);
    }
    
    </script>
    </head>
    <frameset resizable="yes" rows="50%,*">
      <frame name="editbox">
      <frame name="dynamicframe">
    </frameset>
    </html>
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles