Jump to content

vmars316

Members
  • Content Count

    431
  • Joined

  • Last visited

Posts posted by vmars316

  1. Thanks,

             .Table {/*  wrapper  */
             min-height:100%;
             text-align: center;    
             margin: 0 auto;
             padding:0;
             background: #FF0000  ;
             }

    Hmm...

    Sorry , I have to ask , did you test my whole code ?

    I am confused .

    On Chrome what it does is make a red line at the bottom ,  just below  id="Row3Cell1"  .

    And the rest of the page is blank .

    I want to fill up the whole visible screen .

    You are saying I can use vh to fill up the whole visible page ? 

    Thanks

     

  2. How to tell which <p> 'id=' has focus ?
    Hello & Thanks ,
    The problem with  'document.activeElement.tagname' is that
    for p element it returns 'BODY' .
    But I want to know which p has focus .
    Pls, How can this be done ?
    Here is the prototype function I was working on .

    <!DOCTYPE html>
    <html>
    <title>Which Element Has Focus</title>
    <!--
    -->
    <body onload="documentURL()" onclick="myFunction()" >
    
    <p>Click anywhere in the document to display the active element.</p>
    <input type="text" value="An input field">
    <button>A Button</button>
    
        <p id="demo">Who dunnit ?</p>
        <br>
        <p id="currentPage_Address" style="fontsize: 12px; color: #34495E;">Current Page Address</p>
    <script>
    function myFunction() {
      var x = document.activeElement.tagName;
      document.getElementById("demo").innerHTML = x;
    }
    </script>
          <script>
             var  p_tgh = "";
             var  pp_tgh = "";
             var  p_tghCount = 1;
             var  p_ah = "";
             var  pp_ah = "";
             var  p_ahCount = 1;
             var  ArticleHeading = "Heading";
             var  TextParagraph = "Text Paragraph";
             var  ButtonParagraph = "New Link";
             var  document_URL;
             const  filename = "myStory.html";
             var allHtml =  document.documentElement.outerHTML; 
             var  document_URL;
             function documentURL() {
             document_URL = document.URL;
             document.getElementById("currentPage_Address").innerHTML = document_URL;  
    //         window.addEventListener("keydown", onPress_ENTER, false);
             }
          </script>
    
    </body>
    </html>

    And I would like to put some working code in here:
        'function onPress_ENTER(event)'
    Triggered by this:
        'window.addEventListener("keydown", onPress_ENTER'
    Here is the full code where I want to put "WhichParaHasFocus".

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>MyStory.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             <a href="https://developer.mozilla.org/en-US/" target="_blank">
             <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
             </a>
             still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it .
             -->  
          <style type="text/css">
             body {
             font-family: Comic Sans MS;
             height: 100%;
             margin: 0 auto;
             padding:0;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             .Table {/*  wrapper  */
             min-height:100%;
             text-align: center;    
             margin: 0 auto;
             padding:0;
             }
             #mainHeading {
             color: #566573 ; 
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #container {
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             overflow: hidden;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             display: block;
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row2
             {
             display: block;    
             width: 100%;
             margin: 0 auto;
             padding:0;
             }
             #Row3
             {
             width: 100%;    
             margin: 0 auto;
             padding:0;
             display: inline;   
             }
             #Row1Cell1
             {
             color: #4C4C4C; 
             display: inline-block;   
             text-align: center;
             width: 100%;
             font-size: 18px
             }
             #Row2Cell1
             {
             display: inline-block;   
             background-color: #DAE9BC;
             width: 20%;
             margin: 0 auto;        
             float: left;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: left;
             width: 60%;
             background-color:#F8F8FF;
             margin: 0 auto;         
             float:left; 
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell3
             {
             display: inline-block;   
             width: 20%;
             background: #e9f2d7; 
             margin: 0 auto;         
             float: right;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row3Cell1
             {
             display: inline-block;   
             width: 100%;
             background: #BCCE98;
             margin: 0 auto;    
             overflow: auto;      
             text-align: center;         
             }
             div{ 
             text-align: left;
             font-size: 14px
             }
             .p_bn {
             text-align: left;
             }
             .p_ah {
             color: DarkGreen;
             text-align: left;
             font-size: 16px
             }
             .p_tgh {
             color: #566573; 
             text-align: left;
             font-size: 14px
             }
             #left_note {
             color:#5886BC;
             }
             #left_note {
             color:#576C15;
             }
             #currentPage_Address {
             color:#e9f2d7;
             }
          </style>
       </head>
       <body onload="documentURL()">
          <!-- Run me 1st -->
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                   <p contenteditable="true" id="mainHeading">MainHeading</p>
                </div>
                <!-- <div class="Cell"  -->
             </div>
             <!-- <div class="Row"  -->
             <!-- ============NewRow============== -->
             <div id="container">
                <div id="Row2">
                   <div id="Row2Cell1">
                      <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell2">
                      <p contenteditable="" class="p_ah">Heading</p>
                      <p contenteditable="" class="p_tgh">Text</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell3">
                      <p contenteditable="true" class="right_note" style="color:#576C15">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                </div>
                <!-- <div class="Row"  -->
             </div>
             <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <div id="Row3">
                <div id="Row3Cell1">
                   <br>
                   <button onclick="createLeftNote()">Add Left Note</button>
                   <button onclick="createArticleHeading()">Add Heading</button>
                   <button onclick="createTextArea()">Add Text Paragraph</button>
                   <button onclick="createRightNote()">Add Right Note</button>
                   <form action="http://google.com" target="_blank" style="display: inline;">
                      <input type="submit" value="Search Google" />
                   </form>
                   <button onclick="saveAs(filename, allHtml)">Save This Page</button>
                   <p id="currentPage_Address" > </p>
                </div>  <!-- id="Row3Cell1"  -->
             </div>  <!-- <div class="Row"  -->
          </div>  <!--  <div class="Table">  -->
          <script>
             var  LeftNote = "LeftNote";
             var  ArticleHeading = "Heading";
             var  TextParagraph = "Text";
             var  RightNote = "RightNote";
             var  ButtonParagraph = "New Link";
             var  document_URL;
             var  filename = "myStory.html";
             var allHtml =  document.documentElement.outerHTML; 
             var  document_URL;
             function documentURL() {
             document_URL = document.URL;
             document.getElementById("currentPage_Address").innerHTML = document_URL;  
             window.addEventListener("keydown", onPress_ENTER, false);
    
             }
          </script>
          <script>
          function onPress_ENTER(event){
            var keyPressed = event.keyCode || event.which;
            //if ENTER is pressed
            if(keyPressed==13)
            {
    //            alert('enter pressed');
                event.preventDefault();
                stopImmediatePropagation();
            }
            else
            {
                return false;
            }
    } 
          </script>
          <script contenteditable="">
             function createTextArea() {
                       var p_tgh = document.createElement("p");
                       p_tgh.innerHTML = TextParagraph;
                       p_tgh.setAttribute("contenteditable", "true");
                       p_tgh.setAttribute("class","p_tgh");
                       var content = document.getElementById("Row2Cell2");
                       content.appendChild(p_tgh);
                     }	
          </script>	
          <script contenteditable="">
             function createArticleHeading() {
               var p_ah = document.createElement('p');
               p_ah.innerHTML = ArticleHeading;
               p_ah.setAttribute('contenteditable', 'true');
               p_ah.setAttribute("class","p_ah");
               var content = document.getElementById('Row2Cell2');
               content.appendChild(p_ah);
             }
          </script> 
          <script>
             function saveAs(filename, allHtml) {
               allHtml =  document.documentElement.outerHTML; 
              var blob = new Blob([allHtml], {type: 'text/csv'});
              if(window.navigator.msSaveOrOpenBlob) {
                  window.navigator.msSaveBlob(blob, filename);
              }
              else{
                  var elem = window.document.createElement('a');
                  elem.href = window.URL.createObjectURL(blob);
                  elem.download = filename;        
                  document.body.appendChild(elem);
                  elem.click();        
                  document.body.removeChild(elem);
              }
             }    
              
          </script> 
          <script contenteditable=""> 
             function createNewButton() {
               var p_bn = document.createElement("li");
               p_bn.innerHTML = ButtonParagraph;
               p_bn.setAttribute('contenteditable', 'true');
               p_bn.setAttribute("id","li-Default");
               var content = document.getElementById("nav-01");
               content.appendChild(p_bn);
             }
          </script> 
       </body>
    </html>

    Thanks

  3. Ouch !  

    Been there done that ,

    it doesn't help .

             body {
             font-family: Comic Sans MS;
             height: 100%;
             margin: 0 auto;
             padding:0;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             .Table {/*  wrapper  */
             min-height:100%;
             text-align: center;    
             margin: 0 auto;
             padding:0;
             }

    As a matter of fact I tried  min-height:100% ; in Body , Html and Table .

    None of it works !

    I must be cancelling it out in other ways .

    Speaking of your common sense remark reminds me of an incident with my dad when I was 10yrs old .

    He had just purchased a mechanical lawn trimmer  .

    Each time he sent me out I came back saying . "It doesn't work" . 

    So finally I said "Why don't you show me how". 

    So he tried and tried , cursing all time . Finally , he threw it down and said "This piece of **** doesn't work".

    Anyways , here is the full code:

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>MyStory.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             <a href="https://developer.mozilla.org/en-US/" target="_blank">
             <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
             </a>
             still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it .
             -->  
          <style type="text/css">
             body {
             font-family: Comic Sans MS;
             height: 100%;
             margin: 0 auto;
             padding:0;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             .Table {/*  wrapper  */
             min-height:100%;
             text-align: center;    
             margin: 0 auto;
             padding:0;
             }
             #mainHeading {
             color: #566573 ; 
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #container {
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             overflow: hidden;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             display: block;
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row2
             {
             display: block;    
             width: 100%;
             margin: 0 auto;
             padding:0;
             }
             #Row3
             {
             width: 100%;    
             margin: 0 auto;
             padding:0;
             display: inline;   
             }
             #Row1Cell1
             {
             color: #4C4C4C; 
             display: inline-block;   
             text-align: center;
             width: 100%;
             font-size: 18px
             }
             #Row2Cell1
             {
             display: inline-block;   
             background-color: #DAE9BC;
             width: 20%;
             margin: 0 auto;        
             float: left;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: left;
             width: 60%;
             background-color:#F8F8FF;
             margin: 0 auto;         
             float:left; 
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell3
             {
             display: inline-block;   
             width: 20%;
             background: #e9f2d7; 
             margin: 0 auto;         
             float: right;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row3Cell1
             {
             display: inline-block;   
             width: 100%;
             background: #BCCE98;
             margin: 0 auto;    
             overflow: auto;      
             text-align: center;         
             }
             div{ 
             text-align: left;
             font-size: 14px
             }
             .p_bn {
             text-align: left;
             }
             .p_ah {
             color: DarkGreen;
             text-align: left;
             font-size: 16px
             }
             .p_tgh {
             color: #566573; 
             text-align: left;
             font-size: 14px
             }
             #left_note {
             color:#5886BC;
             }
             #left_note {
             color:#576C15;
             }
             #currentPage_Address {
             color:#e9f2d7;
             }
          </style>
       </head>
       <body onload="documentURL()">
          <!-- Run me 1st -->
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                   <p contenteditable="true" id="mainHeading">MainHeading</p>
                </div>
                <!-- <div class="Cell"  -->
             </div>
             <!-- <div class="Row"  -->
             <!-- ============NewRow============== -->
             <div id="container">
                <div id="Row2">
                   <div id="Row2Cell1">
                      <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell2">
                      <p contenteditable="" class="p_ah">Heading</p>
                      <p contenteditable="" class="p_tgh">Text</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell3">
                      <p contenteditable="true" class="right_note" style="color:#576C15">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                </div>
                <!-- <div class="Row"  -->
             </div>
             <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <div id="Row3">
                <div id="Row3Cell1">
                   <br>
                   <button onclick="createLeftNote()">Add Left Note</button>
                   <button onclick="createArticleHeading()">Add Heading</button>
                   <button onclick="createTextArea()">Add Text Paragraph</button>
                   <button onclick="createRightNote()">Add Right Note</button>
                   <form action="http://google.com" target="_blank" style="display: inline;">
                      <input type="submit" value="Search Google" />
                   </form>
                   <button onclick="saveAs(filename, allHtml)">Save This Page</button>
                   <p id="currentPage_Address" > </p>
                </div>  <!-- id="Row3Cell1"  -->
             </div>  <!-- <div class="Row"  -->
          </div>  <!--  <div class="Table">  -->
          <script>
             var  LeftNote = "LeftNote";
             var  ArticleHeading = "Heading";
             var  TextParagraph = "Text";
             var  RightNote = "RightNote";
             var  ButtonParagraph = "New Link";
             var  document_URL;
             var  filename = "myStory.html";
             var allHtml =  document.documentElement.outerHTML; 
             var  document_URL;
             function documentURL() {
             document_URL = document.URL;
             document.getElementById("currentPage_Address").innerHTML = document_URL;  
             window.addEventListener("keydown", onPress_ENTER, false);
    
             }
          </script>
          <script>
          function onPress_ENTER(event){
            var keyPressed = event.keyCode || event.which;
            //if ENTER is pressed
            if(keyPressed==13)
            {
    //            alert('enter pressed');
                event.preventDefault();
                stopImmediatePropagation();
            }
            else
            {
                return false;
            }
    } 
          </script>
          <script contenteditable="">
             function createTextArea() {
                       var p_tgh = document.createElement("p");
                       p_tgh.innerHTML = TextParagraph;
                       p_tgh.setAttribute("contenteditable", "true");
                       p_tgh.setAttribute("class","p_tgh");
                       var content = document.getElementById("Row2Cell2");
                       content.appendChild(p_tgh);
                     }	
          </script>	
          <script contenteditable="">
             function createArticleHeading() {
               var p_ah = document.createElement('p');
               p_ah.innerHTML = ArticleHeading;
               p_ah.setAttribute('contenteditable', 'true');
               p_ah.setAttribute("class","p_ah");
               var content = document.getElementById('Row2Cell2');
               content.appendChild(p_ah);
             }
          </script> 
          <script>
             function saveAs(filename, allHtml) {
               allHtml =  document.documentElement.outerHTML; 
              var blob = new Blob([allHtml], {type: 'text/csv'});
              if(window.navigator.msSaveOrOpenBlob) {
                  window.navigator.msSaveBlob(blob, filename);
              }
              else{
                  var elem = window.document.createElement('a');
                  elem.href = window.URL.createObjectURL(blob);
                  elem.download = filename;        
                  document.body.appendChild(elem);
                  elem.click();        
                  document.body.removeChild(elem);
              }
             }    
              
          </script> 
          <script contenteditable=""> 
             function createNewButton() {
               var p_bn = document.createElement("li");
               p_bn.innerHTML = ButtonParagraph;
               p_bn.setAttribute('contenteditable', 'true');
               p_bn.setAttribute("id","li-Default");
               var content = document.getElementById("nav-01");
               content.appendChild(p_bn);
             }
          </script> 
       </body>
    </html>

    Thanks

     

     

  4. Come on people give me a hand .

    Here is my current code:

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>MyStory.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             <a href="https://developer.mozilla.org/en-US/" target="_blank">
             <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
             </a>
             still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it .
             -->  
          <style type="text/css">
             body {
             font-family: Comic Sans MS;
             height: 100%;
             margin: 0 auto;
             padding:0;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             .Table /*  wrapper  */
             {
             text-align: center;    
             margin: 0 auto;
             padding:0;
             }
             #mainHeading {
             color: #566573 ; 
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #container {
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             overflow: hidden;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             display: block;
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row2
             {
             display: block;    
             width: 100%;
             margin: 0 auto;
             padding:0;
             }
             #Row3
             {
             width: 100%;    
             margin: 0 auto;
             padding:0;
             display: inline;   
             }
             #Row1Cell1
             {
             color: #4C4C4C; 
             display: inline-block;   
             text-align: center;
             width: 100%;
             font-size: 18px
             }
             #Row2Cell1
             {
             display: inline-block;   
             background-color: #DAE9BC;
             width: 20%;
             margin: 0 auto;        
             float: left;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: left;
             width: 60%;
             background-color:#F8F8FF;
             margin: 0 auto;         
             float:left; 
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell3
             {
             display: inline-block;   
             width: 20%;
             background: #e9f2d7; 
             margin: 0 auto;         
             float: right;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row3Cell1
             {
             display: inline-block;   
             width: 100%;
             background: #BCCE98;
             margin: 0 auto;    
             overflow: auto;      
             text-align: center;         
             }
             div{ 
             text-align: left;
             font-size: 14px
             }
             .p_bn {
             text-align: left;
             }
             .p_ah {
             color: DarkGreen;
             text-align: left;
             font-size: 16px
             }
             .p_tgh {
             color: #566573; 
             text-align: left;
             font-size: 14px
             }
             #left_note {
             color:#5886BC;
             }
             #left_note {
             color:#576C15;
             }
             #currentPage_Address {
             color:#e9f2d7;
             }
          </style>
       </head>
       <body onload="documentURL()">
          <!-- Run me 1st -->
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                   <p contenteditable="true" id="mainHeading">MainHeading</p>
                </div>
                <!-- <div class="Cell"  -->
             </div>
             <!-- <div class="Row"  -->
             <!-- ============NewRow============== -->
             <div id="container">
                <div id="Row2">
                   <div id="Row2Cell1">
                      <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell2">
                      <p contenteditable="" class="p_ah">Heading</p>
                      <p contenteditable="" class="p_tgh">Text</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell3">
                      <p contenteditable="true" class="right_note" style="color:#576C15">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                </div>
                <!-- <div class="Row"  -->
             </div>
             <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <div id="Row3">
                <div id="Row3Cell1">
                   <br>
                   <button onclick="createLeftNote()">Add Left Note</button>
                   <button onclick="createArticleHeading()">Add Heading</button>
                   <button onclick="createTextArea()">Add Text Paragraph</button>
                   <button onclick="createRightNote()">Add Right Note</button>
                   <form action="http://google.com" target="_blank" style="display: inline;">
                      <input type="submit" value="Search Google" />
                   </form>
                   <button onclick="saveAs(filename, allHtml)">Save This Page</button>
                   <p id="currentPage_Address" > </p>
                </div>  <!-- id="Row3Cell1"  -->
             </div>  <!-- <div class="Row"  -->
          </div>  <!--  <div class="Table">  -->
          <script>
             var  LeftNote = "LeftNote";
             var  ArticleHeading = "Heading";
             var  TextParagraph = "Text";
             var  RightNote = "RightNote";
             var  ButtonParagraph = "New Link";
             var  document_URL;
             var  filename = "myStory.html";
             var allHtml =  document.documentElement.outerHTML; 
             var  document_URL;
             function documentURL() {
             document_URL = document.URL;
             document.getElementById("currentPage_Address").innerHTML = document_URL;  
             window.addEventListener("keydown", onPress_ENTER, false);
    
             }
          </script>
          <script>
          function onPress_ENTER(event){
            var keyPressed = event.keyCode || event.which;
            //if ENTER is pressed
            if(keyPressed==13)
            {
    //            alert('enter pressed');
                event.preventDefault();
                stopImmediatePropagation();
            }
            else
            {
                return false;
            }
    } 
          </script>
          <script contenteditable="">
             function createTextArea() {
                       var p_tgh = document.createElement("p");
                       p_tgh.innerHTML = TextParagraph;
                       p_tgh.setAttribute("contenteditable", "true");
                       p_tgh.setAttribute("class","p_tgh");
                       var content = document.getElementById("Row2Cell2");
                       content.appendChild(p_tgh);
                     }	
          </script>	
          <script contenteditable="">
             function createArticleHeading() {
               var p_ah = document.createElement('p');
               p_ah.innerHTML = ArticleHeading;
               p_ah.setAttribute('contenteditable', 'true');
               p_ah.setAttribute("class","p_ah");
               var content = document.getElementById('Row2Cell2');
               content.appendChild(p_ah);
             }
          </script> 
          <script>
             function saveAs(filename, allHtml) {
               allHtml =  document.documentElement.outerHTML; 
              var blob = new Blob([allHtml], {type: 'text/csv'});
              if(window.navigator.msSaveOrOpenBlob) {
                  window.navigator.msSaveBlob(blob, filename);
              }
              else{
                  var elem = window.document.createElement('a');
                  elem.href = window.URL.createObjectURL(blob);
                  elem.download = filename;        
                  document.body.appendChild(elem);
                  elem.click();        
                  document.body.removeChild(elem);
              }
             }    
              
          </script> 
          <script contenteditable=""> 
             function createNewButton() {
               var p_bn = document.createElement("li");
               p_bn.innerHTML = ButtonParagraph;
               p_bn.setAttribute('contenteditable', 'true');
               p_bn.setAttribute("id","li-Default");
               var content = document.getElementById("nav-01");
               content.appendChild(p_bn);
             }
          </script> 
       </body>
    </html>

    Thanks

  5. Hello & Thanks,

    Can't get this working: 

             body {
             font-family:Sans-serif;
             height: 100%;
             min-height: 100%;
             margin: 0 auto;
             padding:0;
             }
             html {
             height: 100%; 
             min-height: 100%;
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             .Table /*  wrapper  */
             {
             text-align: center;    
             height: 100%; 
             min-height: 100%;
             margin: 0 auto;
             padding:0;
             margin: 0 auto;
             padding:0;
             }

    Here is full code:

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>MyStory.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             <a href="https://developer.mozilla.org/en-US/" target="_blank">
             <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
             </a>
             still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it .
             -->  
          <style type="text/css">
             body {
             font-family:Sans-serif;
             height: 100%;
             min-height: 100%;
             margin: 0 auto;
             padding:0;
             }
             html {
             height: 100%; 
             min-height: 100%;
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             .Table /*  wrapper  */
             {
             text-align: center;    
             height: 100%; 
             min-height: 100%;
             margin: 0 auto;
             padding:0;
             margin: 0 auto;
             padding:0;
             }
             #mainHeading
             {
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #container {
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             overflow: hidden;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             display: block;
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row2
             {
             display: block;    
             width: 100%;
             margin: 0 auto;
             padding:0;
             }
             #Row3
             {
             width: 100%;    
             margin: 0 auto;
             padding:0;
             display: inline;   
             }
             #Row1Cell1
             {
             color: #4C4C4C; 
             display: inline-block;   
             text-align: center;
             width: 100%;
             font-size: 18px
             }
             #Row2Cell1
             {
             display: inline-block;   
             background-color: #DAE9BC;
             width: 20%;
             margin: 0 auto;        
             float: left;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: center;
             width: 60%;
             background-color:#F8F8FF;
             margin: 0 auto;         
             float:left; 
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell3
             {
             display: inline-block;   
             width: 20%;
             background: #e9f2d7; 
             margin: 0 auto;         
             float: right;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row3Cell1
             {
             display: inline-block;   
             width: 100%;
             background: #BCCE98;
             margin: 0 auto;    
             overflow: auto;      
             text-align: center;         
             }
             div{ 
             text-align: left;
             font-size: 14px
             }
             #p_bn {
             text-align: left;
             }
             #p_ah {
             color: #4C4C4C; /* color: #555555;  */
             text-align: left;
             font-size: 16px
             }
             #p_tgh {
             /*      color: #999999;  */
             color: #4C4C4C; 
             text-align: left;
             font-size: 14px
             }
             #currentPage_Address {
             color:#e9f2d7;
             }
          </style>
       </head>
       <body onload="documentURL()">
          <!-- Run me 1st -->
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                   <p contenteditable="true" id="mainHeading"> myMainHeading</p>
                </div>
                <!-- <div class="Cell"  -->
             </div>
             <!-- <div class="Row"  -->
             <!-- ============NewRow============== -->
             <div id="container">
                <div id="Row2">
                   <div id="Row2Cell1">
                      <p contenteditable="" style="color:#5886BC;">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell2">
                      <p contenteditable="" id="p_ah">Heading</p>
                      <p contenteditable="" id="p_tgh">Text Paragraph</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell3">
                      <p contenteditable="true" style="color:#576C15">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                </div>
                <!-- <div class="Row"  -->
             </div>
             <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <div id="Row3">
                <div id="Row3Cell1">
                   <button onclick="createArticleHeading()">Add Heading</button>
                   <button onclick="createTextArea()">Add Text Paragraph</button>
                   <form action="http://google.com" target="_blank" style="display: inline;">
                      <input type="submit" value="Search Google" />
                   </form>
                   <button onclick="saveAs(filename, allHtml)">Save This Page</button>
                   <p id="currentPage_Address" > </p>
                </div>
                <!-- id="Row3Cell1"  -->
             </div>
             <!-- <div class="Row"  -->
          </div>
          <!--  <div class="Table">  -->
          <script>
             var  ArticleHeading = "Article Heading";
             var  TextParagraph = "Text Area";
             var  ButtonParagraph = "New Link";
             var  document_URL;
             const  filename = "MyStory.html";
             var allHtml =  document.documentElement.outerHTML; 
             var  document_URL;
             function documentURL() {
             document_URL = document.URL;
             document.getElementById("currentPage_Address").innerHTML = document_URL;  
             window.addEventListener("keydown", onPress_ENTER, false);
    
             }
          </script>
          <script>
          function onPress_ENTER(event){
            var keyPressed = event.keyCode || event.which;
    
            //if ENTER is pressed
            if(keyPressed==13)
            {
    //            alert('enter pressed');
                event.preventDefault();
                stopImmediatePropagation();
            }
            else
            {
                return false;
            }
    } 
          </script>
          <script contenteditable="">
             function createTextArea() {
                       var p_tgh = document.createElement("p");
                       p_tgh.innerHTML = TextParagraph;
                       p_tgh.setAttribute("contenteditable", "true");
                       p_tgh.setAttribute("id","p_tgh");
                       var content = document.getElementById("Row2Cell2");
                       content.appendChild(p_tgh);
                     }	
          </script>	
          <script contenteditable="">
             function createArticleHeading() {
               var p_ah = document.createElement('p');
               p_ah.innerHTML = ArticleHeading;
               p_ah.setAttribute('contenteditable', 'true');
               p_ah.setAttribute("id","p_ah");
               var content = document.getElementById('Row2Cell2');
               content.appendChild(p_ah);
             }
          </script> 
          <script>
             function saveAs(filename, allHtml) {
               allHtml =  document.documentElement.outerHTML; 
              var blob = new Blob([allHtml], {type: 'text/csv'});
              if(window.navigator.msSaveOrOpenBlob) {
                  window.navigator.msSaveBlob(blob, filename);
              }
              else{
                  var elem = window.document.createElement('a');
                  elem.href = window.URL.createObjectURL(blob);
                  elem.download = filename;        
                  document.body.appendChild(elem);
                  elem.click();        
                  document.body.removeChild(elem);
              }
             }    
              
          </script> 
          <script contenteditable=""> 
             function createNewButton() {
               var p_bn = document.createElement("li");
               p_bn.innerHTML = ButtonParagraph;
               p_bn.setAttribute('contenteditable', 'true');
               p_bn.setAttribute("id","li-Default");
               var content = document.getElementById("nav-01");
               content.appendChild(p_bn);
             }
          </script> 
       </body>
    </html>

    Thanks for your help .

  6. Hello & Thanks.

    Not working as I expected

    Intercepts enter-key pressed , but doesn't prevent :

                event.preventDefault();
                stopImmediatePropagation();

    Here is mini code :

             window.addEventListener("keyup", onPress_ENTER, false);
    
             }
          </script>
          <script>
          function onPress_ENTER(){
            var keyPressed = event.keyCode || event.which;
    
            //if ENTER is pressed
            if(keyPressed==13)
            {
    //            alert('enter pressed');
                event.preventDefault();
                stopImmediatePropagation();
            }
            else
            {
                return false;
            }
    } 

    Here is the whole code:

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>MyStory.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             <a href="https://developer.mozilla.org/en-US/" target="_blank">
             <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
             </a>
             still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it .
             -->  
          <style type="text/css">
             body {
             font-family:Sans-serif;
             margin: 0 auto;
             padding:0;
             border: 0;
             height: 100%;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             #wholePageWrapper {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             }
             .Table
             {
             text-align: center;    
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #mainHeading
             {
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #container {
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             overflow: hidden;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             display: block;
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row2
             {
             display: block;    
             width: 100%;
             margin: 0 auto;
             padding:0;
             }
             #Row3
             {
             width: 100%;    
             margin: 0 auto;
             padding:0;
             vertical-align: top;  
             display: inline;   
             }
             #Row1Cell1
             {
             color: #4C4C4C; 
             display: inline-block;   
             text-align: center;
             width: 100%;
             font-size: 18px
             }
             #Row2Cell1
             {
             display: inline-block;   
             background-color: #DAE9BC;
             width: 20%;
             margin: 0 auto;        
             float: left;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: center;
             width: 60%;
             background-color:#F8F8FF;
             margin: 0 auto;         
             float:left; 
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell3
             {
             display: inline-block;   
             width: 20%;
             background: #e9f2d7; 
             margin: 0 auto;         
             float: right;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row3Cell1
             {
             display: inline-block;   
             width: 100%;
             background: #BCCE98;
             margin: 0 auto;    
             overflow: auto;      
             text-align: center;         
             }
             div{ 
             text-align: left;
             font-size: 14px
             }
             #p_bn {
             text-align: left;
             }
             #p_ah {
             color: #4C4C4C; /* color: #555555;  */
             text-align: left;
             font-size: 16px
             }
             #p_tgh {
             /*      color: #999999;  */
             color: #4C4C4C; 
             text-align: left;
             font-size: 14px
             }
             #currentPage_Address {
             color:#e9f2d7;
             }
          </style>
       </head>
       <body onload="documentURL()">
          <!-- Run me 1st -->
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                   <p contenteditable="true" id="mainHeading"> myMainHeading</p>
                </div>
                <!-- <div class="Cell"  -->
             </div>
             <!-- <div class="Row"  -->
             <!-- ============NewRow============== -->
             <div id="container">
                <div id="Row2">
                   <div id="Row2Cell1">
                      <p contenteditable="" style="color:#5886BC;">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell2">
                      <p contenteditable="" id="p_ah">Article Heading</p>
                      <p contenteditable="" id="p_tgh">Text Paragraph</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell3">
                      <p contenteditable="true" style="color:#576C15">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                </div>
                <!-- <div class="Row"  -->
             </div>
             <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <div id="Row3">
                <div id="Row3Cell1">
                   <button onclick="createArticleHeading()">Add Article Heading</button>
                   <button onclick="createTextArea()">Add Text Area</button>
                   <form action="http://google.com" target="_blank" style="display: inline;">
                      <input type="submit" value="Search Google" />
                   </form>
                   <button onclick="saveAs(filename, allHtml)">Save This Page</button>
                   <p id="currentPage_Address" > </p>
                </div>
                <!-- id="Row3Cell1"  -->
             </div>
             <!-- <div class="Row"  -->
          </div>
          <!--  <div class="Table">  -->
          <script>
             var  ArticleHeading = "Article Heading";
             var  TextParagraph = "Text Area";
             var  ButtonParagraph = "New Link";
             var  document_URL;
             const  filename = "MyStory.html";
             var allHtml =  document.documentElement.outerHTML; 
             var  document_URL;
             function documentURL() {
             document_URL = document.URL;
             document.getElementById("currentPage_Address").innerHTML = document_URL;  
             window.addEventListener("keyup", onPress_ENTER, false);
    
             }
          </script>
          <script>
          function onPress_ENTER(){
            var keyPressed = event.keyCode || event.which;
    
            //if ENTER is pressed
            if(keyPressed==13)
            {
    //            alert('enter pressed');
                event.preventDefault();
                stopImmediatePropagation();
            }
            else
            {
                return false;
            }
    } 
          </script>
          <script contenteditable="">
             function createTextArea() {
                       var p_tgh = document.createElement("p");
                       p_tgh.innerHTML = TextParagraph;
                       p_tgh.setAttribute("contenteditable", "true");
                       p_tgh.setAttribute("id","p_tgh");
                       var content = document.getElementById("Row2Cell2");
                       content.appendChild(p_tgh);
                     }	
          </script>	
          <script contenteditable="">
             function createArticleHeading() {
               var p_ah = document.createElement('p');
               p_ah.innerHTML = ArticleHeading;
               p_ah.setAttribute('contenteditable', 'true');
               p_ah.setAttribute("id","p_ah");
               var content = document.getElementById('Row2Cell2');
               content.appendChild(p_ah);
             }
          </script> 
          <script>
             function saveAs(filename, allHtml) {
               allHtml =  document.documentElement.outerHTML; 
              var blob = new Blob([allHtml], {type: 'text/csv'});
              if(window.navigator.msSaveOrOpenBlob) {
                  window.navigator.msSaveBlob(blob, filename);
              }
              else{
                  var elem = window.document.createElement('a');
                  elem.href = window.URL.createObjectURL(blob);
                  elem.download = filename;        
                  document.body.appendChild(elem);
                  elem.click();        
                  document.body.removeChild(elem);
              }
             }    
              
          </script> 
          <script contenteditable=""> 
             function createNewButton() {
               var p_bn = document.createElement("li");
               p_bn.innerHTML = ButtonParagraph;
               p_bn.setAttribute('contenteditable', 'true');
               p_bn.setAttribute("id","li-Default");
               var content = document.getElementById("nav-01");
               content.appendChild(p_bn);
             }
          </script> 
       </body>
    </html>

    Thanks

  7. Thanks , 

    That 'SavePageAs'  is working fine now .

    If I hit the enter-key all looks well until I save the page .

    The 'saved page'  shows that for each time the I hit the enter-key ,

    a '<div>plus text</div> 'is created .  See below: 

                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell2">
                      <p contenteditable="" id="p_ah">Article Heading</p>
                      <p contenteditable="" id="p_tgh">Text Paragraph</p>
                   <p contenteditable="true" id="p_tgh">Text Areadfghhjdfjj<div>sfhh</div><div>jbnn</div></p><p contenteditable="true" id="p_tgh">Text Area<div>adghh</div><div>adggg</div><div><br></div><div>asfaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></p></div>

    I think I can intercept  and  cancel the enter-key press .

    So that instead of creating a new <div> I would like to 'insert' a few spaces .

    So I will be working on that . 

    I 'm also having a problem with getting 

             body {
             font-family:Sans-serif;
             margin: 0 auto;
             padding:0;
             border: 0;
             height: 100%;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }

    'height: 100%;' to work .

    I want to fill up the whole page .

    Is there a quick fix for that 

    or should I open up a new Post ?

    Thanks

    Here is the working code (for Chrome) for ''Save This Page' :

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>3-Rows-3-Cols.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/3-Rows-3-Cols-SaveAs.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             <a href="https://developer.mozilla.org/en-US/" target="_blank">
      <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
    </a>
             -->  
          <style type="text/css">
             body {
             font-family:Sans-serif;
             margin: 0 auto;
             padding:0;
             border: 0;
             height: 100%;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             #wholePageWrapper {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             }
             .Table
             {
             height: 100%; 
             text-align: center;    
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #mainHeading
             {
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #container {
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             overflow: hidden;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             display: block;
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row2
             {
             display: block;    
             width: 100%;
             margin: 0 auto;
             padding:0;
             }
             #Row3
             {
             width: 100%;    
             margin: 0 auto;
             padding:0;
             vertical-align: top;  
             display: inline;   
             }
             #Row1Cell1
             {
             color: #4C4C4C; 
             display: inline-block;   
             text-align: center;
             width: 100%;
             font-size: 18px
             }
             #Row2Cell1
             {
             display: inline-block;   
             background-color: #DAE9BC;
             width: 20%;
             margin: 0 auto;        
             float: left;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: center;
             width: 60%;
             background-color:#F8F8FF;
             margin: 0 auto;         
             float:left; 
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell3
             {
             display: inline-block;   
             width: 20%;
             background: #e9f2d7; 
             margin: 0 auto;         
             float: right;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row3Cell1
             {
             display: inline-block;   
             width: 100%;
             background: #BCCE98;
             margin: 0 auto;    
             overflow: auto;      
             text-align: center;         
             }
           div{ 
           text-align: left;
           font-size: 14px
           }
          #p_bn {
          text-align: left;
          }
          #p_ah {
          color: #4C4C4C; /* color: #555555;  */
          text-align: left;
          font-size: 16px
          }
          #p_tgh {
    /*      color: #999999;  */
          color: #4C4C4C; 
          text-align: left;
          font-size: 14px
          }
          #currentPage_Address {
          color:#e9f2d7;
          }
          </style>
       </head>
      <body onload="documentURL()"><!-- Run me 1st -->
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                  <p contenteditable="true"; id="mainHeading"> myMainHeading</p>
                </div>  <!-- <div class="Cell"  -->
             </div>  <!-- <div class="Row"  -->
             <!-- ============NewRow============== -->
               <div id="container"> 
                <div id="Row2">
                   <div id="Row2Cell1">
                     <p contenteditable="" style="color:#5886BC;">notes</p>
                   </div>  <!-- <div class="Cell"  -->
                   
                   <div id="Row2Cell2">
                    <p contenteditable="" id="p_ah">Article Heading</p>
                    <p contenteditable="" id="p_tgh">Text Area</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   
                   <div id="Row2Cell3">
                      <p contenteditable="true";  style="color:#576C15">notes</p>
                   </div> <!-- <div class="Cell"  -->
                </div> <!-- <div class="Row"  -->
             </div>  <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <div id="Row3">
                <div id="Row3Cell1">
                  <button onclick="createArticleHeading()">Add Article Heading</button>
                  <button onclick="createTextArea()">Add Text Area</button>
                  <form action="http://google.com" target="_blank" style="display: inline;">
                     <input type="submit" value="Search Google" />
                  </form>
      <button onclick="saveAs(filename, allHtml)">Save This Page</button>
                        <p id="currentPage_Address" > </p>
                </div>  <!-- id="Row3Cell1"  -->
             </div>  <!-- <div class="Row"  -->
          </div>  <!--  <div class="Table">  -->
          <script>
          var  ArticleHeading = "Article Heading";
          var  TextParagraph = "Text Area";
          var  ButtonParagraph = "New Link";
          var  document_URL;
          const  filename = "MyStory.html";
          var allHtml =  document.documentElement.outerHTML; 
          var  document_URL;
          function documentURL() {
          document_URL = document.URL;
          document.getElementById("currentPage_Address").innerHTML = document_URL;  
          }
        </script>
        <script contenteditable="">
          function createTextArea() {
                    var p_tgh = document.createElement("p");
                    p_tgh.innerHTML = TextParagraph;
                    p_tgh.setAttribute("contenteditable", "true");
                    p_tgh.setAttribute("id","p_tgh");
                    var content = document.getElementById("Row2Cell2");
                    content.appendChild(p_tgh);
                  }	
        </script>	
        <script contenteditable="">
          function createArticleHeading() {
            var p_ah = document.createElement('p');
            p_ah.innerHTML = ArticleHeading;
            p_ah.setAttribute('contenteditable', 'true');
            p_ah.setAttribute("id","p_ah");
            var content = document.getElementById('Row2Cell2');
            content.appendChild(p_ah);
          }
        </script> 
        <script>
       function saveAs(filename, allHtml) {
         allHtml =  document.documentElement.outerHTML; 
        var blob = new Blob([allHtml], {type: 'text/csv'});
        if(window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveBlob(blob, filename);
        }
        else{
            var elem = window.document.createElement('a');
            elem.href = window.URL.createObjectURL(blob);
            elem.download = filename;        
            document.body.appendChild(elem);
            elem.click();        
            document.body.removeChild(elem);
        }
    }    
        </script> 
        <script contenteditable=""> 
          function createNewButton() {
            var p_bn = document.createElement("li");
            p_bn.innerHTML = ButtonParagraph;
            p_bn.setAttribute('contenteditable', 'true');
            p_bn.setAttribute("id","li-Default");
            var content = document.getElementById("nav-01");
            content.appendChild(p_bn);
          }
        </script> 
    
       </body>
    </html>

     

  8. Well I'm almost there , not getting any 'console errors',

    but   setAttribute are not working :

              address_id.setAttribute("href", useThisURL);
              address_id.setAttribute("download", useThisURL);

    I think these are the problem areas with the complete code below these:

                        <br><a id="address_id" >Save Page As: </a>

    and:

        <script>
          function savePageAs() {
          var  showMe = "nuttin happened?";
          var useThisURL  = prompt("If FileName is ok, Click OK , Else Change it:", document_URL)
          if (useThisURL != null) {  
    alert("useThisURL= " + useThisURL);
              document.getElementById("address_id").innerHTML =
              "File Saved As:  " ;
              showMe = document.getElementById("address_id").innerHTML ;
    alert("innerHTML= " + showMe);
              address_id.setAttribute("href", useThisURL);
              address_id.setAttribute("download", useThisURL);
    alert("address_id= " + address_id);
              address_id.click();
          }  
          }
        </script> 

    Thanks

    Full code below:

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>3-Rows-3-Cols.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/3-Rows-3-Cols.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             <a href="https://developer.mozilla.org/en-US/" target="_blank">
      <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
    </a>
             -->  
          <style type="text/css">
             body {
             font-family:Sans-serif;
             margin: 0 auto;
             padding:0;
             border: 0;
             height: 100%;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             #wholePageWrapper {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             }
             .Table
             {
             text-align: center;    
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #mainHeading
             {
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #container {
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             overflow: hidden;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             display: block;
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row2
             {
             display: block;    
             width: 100%;
             margin: 0 auto;
             padding:0;
             }
             #Row3
             {
             width: 100%;    
             margin: 0 auto;
             padding:0;
             vertical-align: top;  
             display: inline;   
             }
             #Row1Cell1
             {
             color: #4C4C4C; 
             display: inline-block;   
             text-align: center;
             width: 100%;
             font-size: 18px
             }
             #Row2Cell1
             {
             display: inline-block;   
             background-color: #DAE9BC;
             width: 20%;
             margin: 0 auto;        
             float: left;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: center;
             width: 60%;
             background-color:#F8F8FF;
             margin: 0 auto;         
             float:left; 
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell3
             {
             display: inline-block;   
             width: 20%;
             background: #e9f2d7; 
             margin: 0 auto;         
             float: right;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row3Cell1
             {
             display: inline-block;   
             width: 100%;
             background: #BCCE98;
             margin: 0 auto;    
             overflow: auto;      
             text-align: center;         
             }
          #p_bn {
          text-align: left;
          }
          #p_ah {
          color: #4C4C4C; /* color: #555555;  */
          text-align: left;
          font-size: 16px
          }
          #p_tgh {
    /*      color: #999999;  */
          color: #4C4C4C; 
          text-align: left;
          font-size: 14px
          }
          #CurrentPageAddress {
          color: #BCCE98;
          }
          #SavePageAs_id {
          color: #BCCE98;
          }
          #address_id {
    /*      color: #BCCE98;  */
          color: #000000;
          }
          </style>
       </head>
      <body onload="documentURL()"><!-- Run me 1st -->
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                   <p contenteditable="true"; id="mainHeading"> myMainHeading</p>
                </div>  <!-- <div class="Cell"  -->
             </div>  <!-- <div class="Row"  -->
             <!-- ============NewRow============== -->
               <div id="container"> 
                <div id="Row2">
                   <div id="Row2Cell1">
                     <p contenteditable="" style="color:#5886BC;">notes</p>
                   </div>  <!-- <div class="Cell"  -->
                   
                   <div id="Row2Cell2">
                    <p contenteditable="" id="p_ah">Article Heading</p>
                    <p contenteditable="" id="p_tgh">Text Area</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   
                   <div id="Row2Cell3">
                      <p contenteditable="true";  style="color:#576C15">notes</p>
                   </div> <!-- <div class="Cell"  -->
                </div> <!-- <div class="Row"  -->
             </div>  <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <div id="Row3">
                <div id="Row3Cell1">
                  <button onclick="createArticleHeading()">Add Article Heading</button>
                  <button onclick="createTextArea()">Add Text Area</button>
                  <form action="http://google.com" target="_blank" style="display: inline;">
                     <input type="submit" value="Search Google" />
                  </form>
                  <button onclick="savePageAs()">Save This Page As</button>
    <!--                    <a id="href_id" href="" download=""> Save This Page As </a>  -->
                        <br><a id="address_id" >Save Page As: </a>
                </div>  <!-- <div class="Cell"  -->
    <!--               <p id="CurrentPageAddress" align="center">_</p>  -->
             </div>  <!-- <div class="Row"  -->
          </div>  <!--  <div class="Table">  -->
          <script>
          var  ArticleHeading = "Article Heading";
          var  TextParagraph = "Text Area";
          var  ButtonParagraph = "New Link";
          var  document_URL;
          function documentURL() {
          document_URL = document.URL;
    /*      document.getElementById("CurrentPageAddress").innerHTML = document_URL; */
          }
        </script>
        <script contenteditable="">
          function createTextArea() {
                    var p_tgh = document.createElement("p");
                    p_tgh.innerHTML = TextParagraph;
                    p_tgh.setAttribute("contenteditable", "true");
                    p_tgh.setAttribute("id","p_tgh");
                    var content = document.getElementById("Row2Cell2");
                    content.appendChild(p_tgh);
                  }	
        </script>	
        <script contenteditable="">
          function createArticleHeading() {
            var p_ah = document.createElement('p');
            p_ah.innerHTML = ArticleHeading;
            p_ah.setAttribute('contenteditable', 'true');
            p_ah.setAttribute("id","p_ah");
            var content = document.getElementById('Row2Cell2');
            content.appendChild(p_ah);
          }
        </script> 
        <script>
          function savePageAs() {
          var  showMe = "nuttin happened?";
          var useThisURL  = prompt("If FileName is ok, Click OK , Else Change it:", document_URL)
          if (useThisURL != null) {  
    alert("useThisURL= " + useThisURL);
              document.getElementById("address_id").innerHTML =
              "File Saved As:  " ;
              showMe = document.getElementById("address_id").innerHTML ;
    alert("innerHTML= " + showMe);
              address_id.setAttribute("href", useThisURL);
              address_id.setAttribute("download", useThisURL);
    alert("address_id= " + address_id);
              address_id.click();
          }  
          }
        </script> 
        <script contenteditable=""> 
          function createNewButton() {
          alert("function createNewButton()");
            var p_bn = document.createElement("li");
            p_bn.innerHTML = ButtonParagraph;
            p_bn.setAttribute('contenteditable', 'true');
            p_bn.setAttribute("id","li-Default");
    //        var content = document.getElementById("ul");
            var content = document.getElementById("nav-01");
            content.appendChild(p_bn);
          }
        </script> 
    
       </body>
    </html>

     

  9. Thanks,

    I was hoping it would be this easy:

    <!DOCTYPE html>
    <html>
    <body>
    
    <p>just a paragraph <p>
    
    <a href="" download=""> Save This Page As </a>
    
    </body>
    </html>

    It is, if I'm talking with the server , which I don't want to do .

    I want to do it locally .

    Will I need to supply the name of "This Page" ?

    Or is there an abbreviated version ? 

    Thanks

     

  10. Hello & Thanks ,

    I would like an Html5 button to Trigger a 'Download File prompt '

    for all browsers . 

    Rather than clicking on for example [Browser Customize and Control ] ,

    then clicking  [More tools]  [Save Page As] etc..

    I searched, but nothing related came up .

    How can this be accomplished ? 

    Thanks for your help !

     

  11. Ah... That worked great for between Row1 and Row2  .

    But between Row2 and Row3 there is still a space .

    I tried variations of  vertical-align: top; and  vertical-align: bottom;  

    and 

    margin-bottom: 1001em;  and  margin-bottom: -1000em;

    but no go yet .

      Thanks

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>3-Rows-3-Cols.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/3-Rows-3-Cols.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             -->  
          <style type="text/css">
             body {
             font-family:Sans-serif;
             /*         line-height: 1.5em;  */
             margin: 0 auto;
             padding:0;
             border: 0;
             vertical-align: top;
             }
             html {
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             .Table
             {
             text-align: center;    
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #mainHeading
             {
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #container {
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             overflow: hidden;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             display: block;
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row2
             {
             display: block;    
             width: 100%;
             margin: 0 auto;
             padding:0;
             vertical-align: top;
             }
             #Row3
             {
             display: block;    
             width: 100%;    
             margin: 0 auto;
             padding:0;
             vertical-align: top;  
             }
             #Row1Cell1
             {
             display: inline-block;   
             text-align: center;
             width: 100%;
             }
             #Row2Cell1
             {
             display: inline-block;   
             background-color: #DAE9BC;
             width: 15%;
             margin: 0 auto;        
             float: left;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: center;
             width: 70%;
             background-color:#F8F8FF;
             margin: 0 auto;         
             float:left; 
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell3
             {
             display: inline-block;   
             width: 15%;
             background: #e9f2d7; 
             margin: 0 auto;         
             float: right;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row3Cell1
             {
             display: block;   
             width: 100%;
             background: #BCCE98;
             margin: 0 auto;         
             }
          </style>
       </head>
       <body>
          <br>
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                   <p id="mainHeading"> myMainHeading</p>
                </div>  <!-- <div class="Cell"  -->
             </div>  <!-- <div class="Row"  -->
             <div id="container">
             <!-- ============NewRow============== -->
                <div id="Row2">
                   <div id="Row2Cell1">
                      <p> Row 2 Column 1</p>
                   </div>  <!-- <div class="Cell"  -->
                   
                   <div id="Row2Cell2">
                      <p> Row 2 Column 2
                      </p>
                   </div>
                   <!-- <div class="Cell"  -->
                   
                   <div id="Row2Cell3">
                      <p> Row 2 Column 3
                      </p>
                   </div> <!-- <div class="Cell"  -->
                </div> <!-- <div class="Row"  -->
             </div>  <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <div id="Row3">
                <div id="Row3Cell1">
                   <p>Row 3 Column 1</p>
                </div>  <!-- <div class="Cell"  -->
             </div>  <!-- <div class="Row"  -->
          </div>  <!--  <div class="Table">  -->
       </body>
    </html>

     

  12. Hello & Thanks,

    How to eliminate verticle space between Divs ? 

    I have tried gazillions of solutions but none of them work .

    Thanks for your help !

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>3-Rows-3-Cols.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/3-Rows-3-Cols.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             -->  
          <style type="text/css">
             body {
             font-family:Sans-serif;
             line-height: 1.5em;
             margin: 0 auto;
             padding:0;
             border: 0;
             vertical-align: top;
             }
             html {
             margin: 0 auto;
             padding:0;
             border: 0;
    
             }
             .Table
             {
             text-align: center;    
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #mainHeading
             {
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             display: block;
             }
           		#container {
    	         		padding-bottom: 1001em;
    		         	margin-bottom: -1000em;
                overflow: hidden;
                vertical-align: top;
                margin: 0 auto;
                padding:0;
    	        }
             #Row2
             {
             display: inline-block;    
    	       	width: 100%;
           		margin: 0 auto;
             padding:0;
             display: block;
             vertical-align: top;
    	         }
             #Row3
             {
             display: inline-block;    
             width: 100%;    
             margin: 0 auto;
             padding:0;
             display: block;
             vertical-align: top;
             }
             
             #Row1Cell1
             {
             display: inline-block;   
             text-align: center;
             width: 100%;
             }
             #Row2Cell1
             {
              display: inline-block;   
      		      background-color: #DAE9BC;
    		        width: 15%;
    		        margin: 0 auto;        
          				float: left;
      }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: center;
           		width: 70%;
           		background-color:#F8F8FF;
    	       	margin: 0 auto;         
             float:left; 
             }
             
             #Row2Cell3
             {
             display: inline-block;   
    		       width: 15%;
    		       background: #e9f2d7; 
    		       margin: 0 auto;         
         				float: right;
             }
             #Row3Cell1
             {
    		       width: 100%;
    		       height:70px;
    		       background: #BCCE98;
    		       margin: 0 auto;         
             }
          </style>
       </head>
       <body>
          <br>
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                   <p id="mainHeading"> myMainHeading</p>
                </div>
                <!-- <div class="Cell"  -->
             </div>
             <!-- <div class="Row"  -->
             <!-- ============NewRow============== -->
             <p></p>
             <div id="container">
             <div id="Row2">
                <div id="Row2Cell1">
                   <p> Row 2 Column 1</p>
                </div>
                <!-- <div class="Cell"  -->
                <div id="Row2Cell2">
                   <p> Row 2 Column 2</p>
                </div>  <!-- <div class="Cell"  -->
                <div id="Row2Cell3">
                   <p> Row 2 Column 3</p>
                </div>  <!-- <div class="Cell"  -->
             </div>  <!-- <div class="Row"  -->
              </div>   <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <p></p>
             <div id="Row3">
                <div id="Row3Cell1">
                   <p>Row 3 Column 1</p>
                </div>
                <!-- <div class="Cell"  -->
             </div>
             <!-- <div class="Row"  -->
          </div>
          <!--  <div class="Table">  -->
       </body>
    </html>

     

  13. Hi dsonesuk ;

    Using your   

    var inner_parent = content.getElementsByTagName('ul')[0]

      It's not working for me . I must have coded it wrong. 

    With the code below I expected to get two  "New Link" s .

    But only got 1 .   Pls , tell me what is my mistake ?

    Thanks

     

        <script contenteditable=""> 
          function createNewButton() {
    //      alert("function createNewButton()");
            var p_bn = document.createElement("li");
            p_bn.innerHTML = ButtonParagraph;
            p_bn.setAttribute('contenteditable', 'true');
            p_bn.setAttribute("id","li_Default");
            var content = document.getElementById('ul_01');
            content.appendChild(p_bn);
            var  inner_parent = content.getElementsByTagName('ul')[0];
            inner_parent.appendChild(inner_parent);
          }
        </script> 

    It's the same code as in my last Post ,

    except for the last two lines .

    I can Post the whole code it you like .

  14. Ah... finally , I got it:

    However , still 1 problem left:

    //        var content = document.getElementById('ul');
    //        var content = document.getElementById('nav-01.ul');
            var content = document.getElementById('nav-01');
            content.appendChild(p_bn);

    The   content.appendChild(p_bn);  only works for   var content = document.getElementById('nav-01'); .

    Which puts it AFTER <ul></ul> .

    But I want it to be put within <ul> as an appendChild .

    Pls , How can I put the child within <ul> ? 

    Here is the whole mini-mini code"

    <!DOCTYPE html>
    <!-- saved from url=(0065)file:///C:/Users/vmars/Desktop/Downloads/Html-MasterWIP-Mini.html -->
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <title>Html-MasterWIP-Mini.html</title>
        <!--  https://www.freeformatter.com/html-validator.html  -->
        <style>
          body {margin:0; padding:0; font-family: Sans-Serif; line-height: 1.5em; }
          #header,  h1 {	margin: 0; padding-top: 10px; text-align: center; background: #ccc; height: 50px; }
          #content { margin-left: 230px; /* Same as 'nav' width */ }
          #p_bn {
          text-align: left;
          }
          #li-Default{
          text-align: left;
          }
        </style>
      </head>
      <body onload="documentURL()"><!-- Run me 1st -->
        <p id="CurrentPageAddress" align="center">file:///C:/Users/vmars/Desktop/Downloads/Html-MasterWIP-Mini.html</p>
        <div id="nav-01">
          <ul>
            <li><a  contenteditable id="li-Default" href="https://www.google.com/">Search Google</a>
            </li>
          </ul>
        </div>  
        
        <div id="buttonDiv" align="center">
          <button onclick="createNewButton()">Add New Button</button>
        </div>
        <script>
          var  ButtonParagraph = "New Link"
          var  document_URL
          function documentURL() {
          document_URL = document.URL;
          document.getElementById("CurrentPageAddress").innerHTML = document_URL; 
          }
        </script>
    
        <script contenteditable=""> 
          function createNewButton() {
    //      alert("function createNewButton()");
            var p_bn = document.createElement("li");
            p_bn.innerHTML = ButtonParagraph;
            p_bn.setAttribute('contenteditable', 'true');
            p_bn.setAttribute("id","li-Default");
    //        var content = document.getElementById('ul');
    //        var content = document.getElementById('nav-01.ul');
            var content = document.getElementById('nav-01');
            content.appendChild(p_bn);
          }
        </script> 
      
    </body></html>

    Thanks 

  15. Thanks dsonesuk :
    Oops , I forgot all about :

    https://www.freeformatter.com/html-validator.html 

    Quote

    Try using create textnode for created elements, instead of innerHTML and append that textnode to created element.

    I would like to  try that later . 
    Right now my mind set is on 1st working it out with <p> .

    I put a new example here:

    http://vmars.us/ShowMe/Html-MasterWIP-Mini-Debug.html

    Pls , take a look at the source .
    So there is something I would like to add within each created <p> element . 
    And that is its id="p_ah" and id="p_tgh" elements repectively .

    I tried:  

    p_tgh.setAttribute("contenteditable", "true" , "id="p_tgh"");

    But its a no go .

     Pls, how can I do this ?
    Thanks

  16. Here is page code minified .

    What is troubling me , is that the style settings for ArticleHeading(#p_ah) & TextHeading(p_tgh) are not working .  

    Here is the working page online: Pls, show me how to fix this .

    http://vmars.us/ShowMe/Html-MasterWIP-Mini.html

    Thanks for your help !

    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Master-WIP-Mini.html</title>
        <style>
          body {margin:0; padding:0; font-family: Sans-Serif; line-height: 1.5em; }
          #header,  h1 {	margin: 0; padding-top: 10px; text-align: center; background: #ccc; height: 50px; }
          #wrapper { overflow: hidden; }
          #section { padding-bottom: 10010px; margin-bottom: -10000px; float: left; width: 100%; }
          #content { margin-left: 230px; /* Same as 'nav' width */ }
          .innertube {margin: 15px; /* Padding for content */ margin-top: 0; }
          p {
          color: #000555;
          }
          #p_bn {
          text-align: left;
          }
          #p_ah {
          color: #555555; 
          text-align: left;
          font-size: 18px
          }
          #p_tgh {
          color: #999999;
          text-align: left;
          font-size: 12px
          font-size: 12px
          }
          #footer { clear: left; width: 100%; background: #ccc; text-align: center; padding: 4px 0; }
        </style>
      </head>
      <body onload="documentURL()">
        <p id="CurrentPageAddress" align="center">Html-MasterWIP-Mini.html</p>
        <header id="header">
          <div id="innertube-01">
            <br>
            <h1 contenteditable="">my Main Header</h1>
          </div>
        </header>
        <div id="wrapper">
        <section id="section">
          <div id="content">
          <div id="innertube-02">
            <!--  div.section.content.innertube.p  -->
            <p contenteditable="" id="p_ah">Article Heading</p>
            <p contenteditable="" id="p_tgh">Text paragraph</p>
          </div>
        </section>
        <nav id="nav-01">
          <h1 contenteditable="">Go To Links</h1>
          <ul>
          <div id="innertube-03">
            <li><a id="li-01" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li>
            <li><a id="li-02" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li>
            <li><a id="li-03" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li>
            <li><a id="li-Last" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li>
        </nav>
        </div>
        <footer id="footer">
          <div id="innertube-04">
            <p contenteditable="">Footer...</p>
          </div>
        </footer>
        <div id="buttonDiv" align="center">
          <!--  Buttons Header  createNewLink  -->
          <button onclick="createNewButton()">Add New Button</button>
          <button onclick="createArticleHeading()">Add New Article Heading</button>
          <button onclick="createTextArea()">Add New Text Area</button>
        </div>
        <script id="js" contenteditable="">
          function createTextArea() {
                    var p_tgh = document.createElement("p");
                    p_tgh.innerHTML = TextParagraph;
                    p_tgh.setAttribute("contenteditable", "true");
                    var content = document.getElementById("innertube-02");
                    content.appendChild(p_tgh);
                  }	
        </script>	
        <script id="js" contenteditable="">
          function createArticleHeading() {
            var p_ah = document.createElement('p');
            p_ah.innerHTML = ArticleHeading;
            p_ah.setAttribute('contenteditable', 'true');
            var content = document.getElementById('innertube-02');
            content.appendChild(p_ah);
          }
        </script> 
        <script>
          var  ArticleHeading = "Article Heading"
          var  TextParagraph = "Text Paragraph"
          var  ButtonParagraph = "New Link"
          var  document_URL
          function documentURL() {
          document_URL = document.URL;
          document.getElementById("CurrentPageAddress").innerHTML = document_URL; 
          }
        </script>
        <script id="js" contenteditable="">
          function createNewButton() {
            var p_bn = document.createElement('li-Last');
            p_bn.innerHTML = ButtonParagraph;
            p_bn.setAttribute('contenteditable', 'true');
            var content = document.getElementById('innertube-03');
            content.appendChild(p_bn);
          }
        </script> 
      </body>
    </html>

     

×
×
  • Create New...