Jump to content

vmars316

Members
 View Profile  See their activity

  • Posts

    480

  • Joined

  • Last visited

 Content Type 

Everything posted by vmars316

  1. vmars316
    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
  2. vmars316
    Sorry I don't understand what you are saying : Do I use min-height: 100% or not ? And where should I put it ? Thanks
  3. vmars316
    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
  4. vmars316
    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 .
  5. vmars316
    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
  6. vmars316
    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
  7. vmars316
    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
  8. vmars316
    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>
  9. vmars316
    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>
  10. vmars316
    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
  11. vmars316
    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
  12. vmars316
    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 !
  13. vmars316
    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
  14. vmars316
    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>
  15. vmars316
    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>
  16. vmars316
    Thanks , Sorry , I am getting hung up on the term 'anchor ' . Is this the anchor? : var p_bn = document.createElement("li"); Thanks
  17. vmars316
    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 .
  18. vmars316
    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
  19. vmars316
    Thanks dsonesuk : Oops , I forgot all about : https://www.freeformatter.com/html-validator.html 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
  20. vmars316
    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 !
  21. vmars316
    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>
  22. vmars316
    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 .
  23. vmars316
    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
  24. vmars316
    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
  25. vmars316
    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
×
×
  • Create New...