vmars316

February 15, 2019

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

February 12, 2019

Sorry I don't understand what you are saying :

Do I use min-height: 100% or not ?

And where should I put it ?

Thanks

February 12, 2019

Hmm...

When I remove the 'min-Height' and have just:

         body {
         font-family:Sans-serif;
         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;
         }

It still doesn't work .

What do I need to do now ?

Thanks

February 12, 2019

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 .

February 12, 2019

Hmm...

When I changed the listener to

window.addEventListener("keydown", onPress_ENTER, false);

and your change

      function onPress_ENTER(event){

All works perfectly !

I am thinking that 'keyup' was too late to cancel .

Is that correct ?

Thanks

February 12, 2019

Do your mean like this ?

         window.addEventListener("keyup", 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;
        }
}

Thanks

February 12, 2019

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

February 11, 2019

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>

February 9, 2019

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>

February 9, 2019

Thanks,

I was hoping to just force the saveas dialog .

So that the user could chose to change the filename .

I suppose that I could Prompt the user

1st with the name (document.URL;)

and give them the option to change it or not.

Then download the page .

Think I'll give that a shot.

Thanks

February 9, 2019

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

February 8, 2019

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 !

February 6, 2019

Thanks ,

That did it .

I did use DevTools but didn't interpret it as anything wrong .

I am checking out overflow here:

https://www.w3schools.com/cssref/pr_pos_overflow.asp

As always. Thanks

February 6, 2019

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>

February 5, 2019

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>

February 3, 2019

Thanks ,

Sorry , I am getting hung up on the term 'anchor ' .

Quote

2) Create anchor and add required attributes (Note: id will need to be unique for every anchor created)

Is this the anchor? :

        var p_bn = document.createElement("li");

Thanks

February 1, 2019

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 .

January 31, 2019

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

January 31, 2019

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

January 29, 2019

Hi Funce ,

Those are all cleared up the link below .

Kindly go to :

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

Try clicking on the [Add New Text Area] Button .

Note that the 1st 'Text Paragraph' is Grey ,

all subsequent 'Text Paragraph's are black .

I want them all to be Grey .

Pls , how can I correct that ?

Thanks for your help !

January 26, 2019

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>

January 26, 2019

I am thinking the reason I haven't received any replies is that this Post is too long .

So I am working on a miniature version of this .

I'll be back .

January 25, 2019

I am still working on the same html, css and js, problem (contenteditable & creating Articleheader/TexrArea) working code here:

http://vmars.us/ShowMe/DIY-Html-Master-WIP-02.html


<!DOCTYPE html>
<html> 
<!--  Go To  https://www.google.com/search?num=20&newwindow=1&hl=en&authuser=0&ei=XetDXJKlG46GtQXV1J9Q&q=html5+css+js&oq=html5+css+js&gs_l=psy-ab.12..35i39j0j0i22i30l6j0i22i10i30j0i22i30.239301.283270..287372...2.0..0.112.3082.19j14......0....1..gws-wiz.....6..0i71j0i13i30j0i8i13i30j0i131j0i20i263.RsTbO1V_iYY  -->
<!--  Go To  file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/DIY-Html-Master-WIP-01.html  -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
<title>DIY-Html-Master-WIP-01.html</title>
		<style >
		
			body {
				margin:0;
				padding:0;
				font-family: Sans-Serif;
				line-height: 1.5em;
			}
			
			#header  {
				background: #ccc;
<!-- 				height: 100px;  -->
				text-align: center;
			}
			
			#header {
				margin: 0;
				padding-top: 0px;
				padding-bottom: 15px;
    text-align: center;
				font-size: 12px;
			}

			p {
				font-size: 18px;
    font-style: normal;
    }

			#p_tgh {
				font-size: 12px;
    font-style: normal;
			}

			#p_ah {
				font-size: 18px;
    font-style: bold;
    }
			
			#section {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 100%;
			}
			
			#nav {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 230px;
				margin-left: -100%;
				background: #eee;
			}

			#footer {
				clear: left;
				width: 100%;
				background: #ccc;
				text-align: center;
				padding: 4px 0;
			}
	
			#wrapper {
				overflow: hidden;
			}
						
			#content {
				margin-left: 230px; /* Same as 'nav' width */
			}
			
			.innertube {
				margin: 15px; /* Padding for content */
				margin-top: 0;
			}
		
			li {
   list-style-type:none;

<!--   				color: #555555;  -->
			}
	
			nav ul {
				list-style-type: none; 
				margin: 0;
				padding: 0;
			}
			
			nav ul a {
				color: darkgreen;
				text-decoration: none;
        }
		
        </style>
	
	</head>
	
	<body>		

		<header id="header">
			<div class="innertube">
			    <br>
				<h1 contenteditable >DIY-Html-Master-WIP-01.html</h1>
			</div>
		</header>
		
		<div id="wrapper"> <!--    -->
			<section id="section">
				<div id="content">
					<div class="innertube">
						<p contenteditable id="p_ah" >Article Heading</p>
						<p contenteditable id="p_tgh" >Text paragraph</p>
					</div>
				</div>
			</section>
			
			<nav id="nav">
				<div class="innertube">
					<h2 contenteditable >URL Links</h2>
					<ul>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li>
					</ul>
				</div>
			</nav>
		
		</div>
		
		<footer id="footer">
			<div class="innertube">
				<p contenteditable >Footer...</p>
			</div>
		</footer>

      <div>
         <!--  Buttons Header  createNewLink  -->
         <button onclick="createNewLink()">Add New Link</button>
         <button onclick="createArticleHeader()">Add New Article Heading</button>
         <button onclick="createTextArea()">Add New Text Area</button>
      </div>
      <!--  Buttons Header  -->

	<script id="js" contenteditable >
function createNewLink(text= "NewLink") {
          var li_nl = document.createElement("li");
<!--		  alert("I am an alert box!");  -->
          li_nl.innerHTML = text;
          li_nl.setAttribute("contenteditable", "true");
          var nav = document.getElementById("nav"); 
          nav.appendChild(li_nl);
        }
		</script>	

	<script id="js" contenteditable >
function createTextArea(text= "Text paragraph") {
          var p_tgh = document.createElement("p");
          p_tgh.innerHTML = text;
          p_tgh.setAttribute("contenteditable", "true");
          var content = document.getElementById("content");
          content.appendChild(p_tgh);
        }
		</script>	

	<script id="js" contenteditable >
function createArticleHeader(text= "Article Heading") {
  var p_ah = document.createElement("p");
//    alert{"p_ah"};
  p_ah.innerHTML = text;
  p_ah.setAttribute('contenteditable', 'true');
  var content = document.getElementById('content');
  content.appendChild(p_ah);
}
</script>

<!DOCTYPE html>
<html> 
<!--  Go To  https://www.google.com/search?num=20&newwindow=1&hl=en&authuser=0&ei=XetDXJKlG46GtQXV1J9Q&q=html5+css+js&oq=html5+css+js&gs_l=psy-ab.12..35i39j0j0i22i30l6j0i22i10i30j0i22i30.239301.283270..287372...2.0..0.112.3082.19j14......0....1..gws-wiz.....6..0i71j0i13i30j0i8i13i30j0i131j0i20i263.RsTbO1V_iYY  -->
<!--  Go To  file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/DIY-Html-Master-WIP-01.html  -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
<title>DIY-Html-Master-WIP-01.html</title>
		<style >
		
			body {
				margin:0;
				padding:0;
				font-family: Sans-Serif;
				line-height: 1.5em;
			}
			
			#header  {
				background: #ccc;
<!-- 				height: 100px;  -->
				text-align: center;
			}
			
			#header {
				margin: 0;
				padding-top: 0px;
				padding-bottom: 15px;
    text-align: center;
				font-size: 12px;
			}

			p {
				font-size: 18px;
    font-style: normal;
    }

			#p_tgh {
				font-size: 12px;
    font-style: normal;
			}

			#p_ah {
				font-size: 18px;
    font-style: bold;
    }
			
			#section {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 100%;
			}
			
			#nav {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 230px;
				margin-left: -100%;
				background: #eee;
			}

			#footer {
				clear: left;
				width: 100%;
				background: #ccc;
				text-align: center;
				padding: 4px 0;
			}
	
			#wrapper {
				overflow: hidden;
			}
						
			#content {
				margin-left: 230px; /* Same as 'nav' width */
			}
			
			.innertube {
				margin: 15px; /* Padding for content */
				margin-top: 0;
			}
		
			li {
   list-style-type:none;

<!--   				color: #555555;  -->
			}
	
			nav ul {
				list-style-type: none; 
				margin: 0;
				padding: 0;
			}
			
			nav ul a {
				color: darkgreen;
				text-decoration: none;
        }
		
        </style>
	
	</head>
	
	<body>		

		<header id="header">
			<div class="innertube">
			    <br>
				<h1 contenteditable >DIY-Html-Master-WIP-01.html</h1>
			</div>
		</header>
		
		<div id="wrapper"> <!--    -->
			<section id="section">
				<div id="content">
					<div class="innertube">
						<p contenteditable id="p_ah" >Article Heading</p>
						<p contenteditable id="p_tgh" >Text paragraph</p>
					</div>
				</div>
			</section>
			
			<nav id="nav">
				<div class="innertube">
					<h2 contenteditable >URL Links</h2>
					<ul>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li>
					</ul>
				</div>
			</nav>
		
		</div>
		
		<footer id="footer">
			<div class="innertube">
				<p contenteditable >Footer...</p>
			</div>
		</footer>

      <div>
         <!--  Buttons Header  createNewLink  -->
         <button onclick="createNewLink()">Add New Link</button>
         <button onclick="createArticleHeader()">Add New Article Heading</button>
         <button onclick="createTextArea()">Add New Text Area</button>
      </div>
      <!--  Buttons Header  -->

	<script id="js" contenteditable >
function createTextArea(text= "Text paragraph") {
          var p_tgh = document.createElement("p");
          p_tgh.innerHTML = text;
          p_tgh.setAttribute("contenteditable", "true");
          var content = document.getElementById("content");
          content.appendChild(p_tgh);
        }
		</script>	

	<script id="js" contenteditable >
function createArticleHeader(text= "Article Heading") {
  var p_ah = document.createElement("p");
//    alert{"p_ah"};
  p_ah.innerHTML = text;
  p_ah.setAttribute('contenteditable', 'true');
  var content = document.getElementById('content');
  content.appendChild(p_ah);
}
</script>
</body></html></script>

Thanks for help

January 25, 2019

I am still working on the same html, css and js, problem (contenteditable & creating Articleheader/TexrArea) full code here:

http://vmars.us/ShowMe/DIY-Html-Master-WIP-02.html


<!DOCTYPE html>
<html> 
<!--  Go To  https://www.google.com/search?num=20&newwindow=1&hl=en&authuser=0&ei=XetDXJKlG46GtQXV1J9Q&q=html5+css+js&oq=html5+css+js&gs_l=psy-ab.12..35i39j0j0i22i30l6j0i22i10i30j0i22i30.239301.283270..287372...2.0..0.112.3082.19j14......0....1..gws-wiz.....6..0i71j0i13i30j0i8i13i30j0i131j0i20i263.RsTbO1V_iYY  -->
<!--  Go To  file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/DIY-Html-Master-WIP-01.html  -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
<title>DIY-Html-Master-WIP-01.html</title>
		<style >
		
			body {
				margin:0;
				padding:0;
				font-family: Sans-Serif;
				line-height: 1.5em;
			}
			
			#header  {
				background: #ccc;
<!-- 				height: 100px;  -->
				text-align: center;
			}
			
			#header {
				margin: 0;
				padding-top: 0px;
				padding-bottom: 15px;
    text-align: center;
				font-size: 12px;
			}

			p {
				font-size: 18px;
    font-style: normal;
    }

			#p_tgh {
				font-size: 12px;
    font-style: normal;
			}

			#p_ah {
				font-size: 18px;
    font-style: bold;
    }
			
			#section {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 100%;
			}
			
			#nav {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 230px;
				margin-left: -100%;
				background: #eee;
			}

			#footer {
				clear: left;
				width: 100%;
				background: #ccc;
				text-align: center;
				padding: 4px 0;
			}
	
			#wrapper {
				overflow: hidden;
			}
						
			#content {
				margin-left: 230px; /* Same as 'nav' width */
			}
			
			.innertube {
				margin: 15px; /* Padding for content */
				margin-top: 0;
			}
		
			li {
   list-style-type:none;

<!--   				color: #555555;  -->
			}
	
			nav ul {
				list-style-type: none; 
				margin: 0;
				padding: 0;
			}
			
			nav ul a {
				color: darkgreen;
				text-decoration: none;
        }
		
        </style>
	
	</head>
	
	<body>		

		<header id="header">
			<div class="innertube">
			    <br>
				<h1 contenteditable >DIY-Html-Master-WIP-01.html</h1>
			</div>
		</header>
		
		<div id="wrapper"> <!--    -->
			<section id="section">
				<div id="content">
					<div class="innertube">
						<p contenteditable id="p_ah" >Article Heading</p>
						<p contenteditable id="p_tgh" >Text paragraph</p>
					</div>
				</div>
			</section>
			
			<nav id="nav">
				<div class="innertube">
					<h2 contenteditable >URL Links</h2>
					<ul>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li>
					</ul>
				</div>
			</nav>
		
		</div>
		
		<footer id="footer">
			<div class="innertube">
				<p contenteditable >Footer...</p>
			</div>
		</footer>

      <div>
         <!--  Buttons Header  createNewLink  -->
         <button onclick="createNewLink()">Add New Link</button>
         <button onclick="createArticleHeader()">Add New Article Heading</button>
         <button onclick="createTextArea()">Add New Text Area</button>
      </div>
      <!--  Buttons Header  -->

	<script id="js" contenteditable >
function createNewLink(text= "NewLink") {
          var li_nl = document.createElement("li");
<!--		  alert("I am an alert box!");  -->
          li_nl.innerHTML = text;
          li_nl.setAttribute("contenteditable", "true");
          var nav = document.getElementById("nav"); 
          nav.appendChild(li_nl);
        }
		</script>	

	<script id="js" contenteditable >
function createTextArea(text= "Text paragraph") {
          var p_tgh = document.createElement("p");
          p_tgh.innerHTML = text;
          p_tgh.setAttribute("contenteditable", "true");
          var content = document.getElementById("content");
          content.appendChild(p_tgh);
        }
		</script>	

	<script id="js" contenteditable >
function createArticleHeader(text= "Article Heading") {
  var p_ah = document.createElement("p");
//    alert{"p_ah"};
  p_ah.innerHTML = text;
  p_ah.setAttribute('contenteditable', 'true');
  var content = document.getElementById('content');
  content.appendChild(p_ah);
}
</script>

<!DOCTYPE html>
<html> 
<!--  Go To  https://www.google.com/search?num=20&newwindow=1&hl=en&authuser=0&ei=XetDXJKlG46GtQXV1J9Q&q=html5+css+js&oq=html5+css+js&gs_l=psy-ab.12..35i39j0j0i22i30l6j0i22i10i30j0i22i30.239301.283270..287372...2.0..0.112.3082.19j14......0....1..gws-wiz.....6..0i71j0i13i30j0i8i13i30j0i131j0i20i263.RsTbO1V_iYY  -->
<!--  Go To  file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/DIY-Html-Master-WIP-01.html  -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
<title>DIY-Html-Master-WIP-01.html</title>
		<style >
		
			body {
				margin:0;
				padding:0;
				font-family: Sans-Serif;
				line-height: 1.5em;
			}
			
			#header  {
				background: #ccc;
<!-- 				height: 100px;  -->
				text-align: center;
			}
			
			#header {
				margin: 0;
				padding-top: 0px;
				padding-bottom: 15px;
    text-align: center;
				font-size: 12px;
			}

			p {
				font-size: 18px;
    font-style: normal;
    }

			#p_tgh {
				font-size: 12px;
    font-style: normal;
			}

			#p_ah {
				font-size: 18px;
    font-style: bold;
    }
			
			#section {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 100%;
			}
			
			#nav {
				padding-bottom: 10010px;
				margin-bottom: -10000px;
				float: left;
				width: 230px;
				margin-left: -100%;
				background: #eee;
			}

			#footer {
				clear: left;
				width: 100%;
				background: #ccc;
				text-align: center;
				padding: 4px 0;
			}
	
			#wrapper {
				overflow: hidden;
			}
						
			#content {
				margin-left: 230px; /* Same as 'nav' width */
			}
			
			.innertube {
				margin: 15px; /* Padding for content */
				margin-top: 0;
			}
		
			li {
   list-style-type:none;

<!--   				color: #555555;  -->
			}
	
			nav ul {
				list-style-type: none; 
				margin: 0;
				padding: 0;
			}
			
			nav ul a {
				color: darkgreen;
				text-decoration: none;
        }
		
        </style>
	
	</head>
	
	<body>		

		<header id="header">
			<div class="innertube">
			    <br>
				<h1 contenteditable >DIY-Html-Master-WIP-01.html</h1>
			</div>
		</header>
		
		<div id="wrapper"> <!--    -->
			<section id="section">
				<div id="content">
					<div class="innertube">
						<p contenteditable id="p_ah" >Article Heading</p>
						<p contenteditable id="p_tgh" >Text paragraph</p>
					</div>
				</div>
			</section>
			
			<nav id="nav">
				<div class="innertube">
					<h2 contenteditable >URL Links</h2>
					<ul>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li>
						<li><a  href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li>
					</ul>
				</div>
			</nav>
		
		</div>
		
		<footer id="footer">
			<div class="innertube">
				<p contenteditable >Footer...</p>
			</div>
		</footer>

      <div>
         <!--  Buttons Header  createNewLink  -->
         <button onclick="createNewLink()">Add New Link</button>
         <button onclick="createArticleHeader()">Add New Article Heading</button>
         <button onclick="createTextArea()">Add New Text Area</button>
      </div>
      <!--  Buttons Header  -->

	<script id="js" contenteditable >
function createTextArea(text= "Text paragraph") {
          var p_tgh = document.createElement("p");
          p_tgh.innerHTML = text;
          p_tgh.setAttribute("contenteditable", "true");
          var content = document.getElementById("content");
          content.appendChild(p_tgh);
        }
		</script>	

	<script id="js" contenteditable >
function createArticleHeader(text= "Article Heading") {
  var p_ah = document.createElement("p");
//    alert{"p_ah"};
  p_ah.innerHTML = text;
  p_ah.setAttribute('contenteditable', 'true');
  var content = document.getElementById('content');
  content.appendChild(p_ah);
}
</script>
</body></html></script>

Thanks for help

January 23, 2019

Hello & Thanks ;

I did read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

But it was too much info , I couldn't understand it .

I have heard that using global variables is bad practice .

Is that true here ?

It all runs fine .

I read thru w3Schools js css html Tutorials years ago .

So yesterday & today , i read thru this series of Tutorials :

https://www.digitalocean.com/community/tutorial_series/understanding-the-dom-document-object-model

I highly recommend it to newbies or oldies like me .

Thanks All

Sign In

vmars316

Posts

Joined

Last visited

Content Type

Profiles

Forums

Events

Posts posted by vmars316

How to Make <body> Take Up 100% of the Browser Height ?

How to Make <body> Take Up 100% of the Browser Height ?

How to Make <body> Take Up 100% of the Browser Height ?

How to Make <body> Take Up 100% of the Browser Height ?

window.addEventListener("keyup", onPress_ENTER, false) ??

window.addEventListener("keyup", onPress_ENTER, false) ??

window.addEventListener("keyup", onPress_ENTER, false) ??

html5 How to force a 'Download File prompt' ?

html5 How to force a 'Download File prompt' ?

html5 How to force a 'Download File prompt' ?

html5 How to force a 'Download File prompt' ?

html5 How to force a 'Download File prompt' ?

How to eliminate verticle space between Divs ?

How to eliminate verticle space between Divs ?

How to eliminate verticle space between Divs ?

Created TextArea & ArticleHeader loose their css styles ?

Created TextArea & ArticleHeader loose their css styles ?

Created TextArea & ArticleHeader loose their css styles ?

Created TextArea & ArticleHeader loose their css styles ?

Created TextArea & ArticleHeader loose their css styles ?

Created TextArea & ArticleHeader loose their css styles ?

Created TextArea & ArticleHeader loose their css styles ?

Created TextArea & ArticleHeader loose their css styles ?

Created TextArea & ArticleHeader loose their css styles ?

Trouble with alert placement ?

Browse

Activity