Jump to content

vmars316

Members
 View Profile  See their activity

  • Posts

    480

  • Joined

  • Last visited

 Content Type 

Everything posted by vmars316

  1. vmars316
    No I am just adding to the code . And I have tried many times . ??
  2. vmars316
    Hello & Thanks ; Please , What's the diff between these two codes , other than the fact that 'my attempt' doesn't work : ================ from w3Schools: <!DOCTYPE html> <html> <head> <style> div { background-color: yellow; padding: 20px; display: none; } span:hover + div { display: block; } </style> </head> <body> <span>Hover over me!</span> <div>I will show on hover</div> </body> </html> my attempt : <!DOCTYPE html> <html> <head> <style> p.borderShow1 { background-color: yellow; padding: 20px; display: none; } div :hover + p.borderShow1{ display: block; } </style> </head> <body> <div>Hover over me!</div> <p class="borderShow1">I will show on hover</p> </body> </html>
  3. vmars316
    dsonesuk Here's what I mean , see image :
  4. vmars316
    Great support : Thanks
  5. vmars316
    Thanks this prompted me to start an .html page for this sort of thing , called: QA-for-html5-css-js.html Hopefully I'll remember there is such a page
  6. vmars316
    Plz , let me ask a more basic question: For a function like this: (btw: this editor has no 'code icon ' option, so I'll use quotes .) That uses .id , #mydiv , I want to use .mydiv instead . And I will have multiple <div class="mydiv"> elements . So how can I translate ' ev.target.id) ' into ev.target.class) ? How can I identify which .mydiv was actually clicked . Is there a different syntax or format or properties that I can use ? Or is there away to set up an ' id array ' so that when a click on a <div> I know which was clicked ? Thanks
  7. vmars316
    Hello & Thanks , Sorry so many questions at once , they are all part of one project . Referring to the article: 'Draggable DIV Element' here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable I would like to have multiple movable <div>s . But having problems . Here is the code so far: <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; cursor: move; } #mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div id="mydiv"> <!-- <div id="mydivheader">Click here to move div1</div> --> <p>Move</p> <p>this</p> <p>DIV</p> </div> <!-- <div class="mydiv"> <!-- <div id="mydivheader">Click here to move div2</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> --> <script> //Make the DIV element draggagle: dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id)) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id).onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> I tried many things: For one , When I tried changing '#item & id="mydiv" ' to '.item & class="mydiv" . I don't understand why that doesn't work . class= vs id= ? Also , I tried adding a second <div class="mydiv"> . But it never displayed . When I do get multiple <div>s working , How can I detect which one was clicked . There will be many <div> <>s . Thanks for your help !
  8. vmars316
    Hello & Thanks , In the "howto/tryit.asp?" page the 'Your Code has Been Saved File has been saved to:' pop doesn't give any filename. Is there something I am doing wrong What do I need to do to get it working ?? Thanks
  9. vmars316
    Thanks Ingolme , Very cool ! I scooped it . I use KompoZerPortable to create tables . & still using Notepad++
  10. vmars316
    dsonesuk Just curious , how does one know if something has been answered successfully ? There doesn't seem to be an 'answered icon' any where . Thanks
  11. vmars316
    <!DOCTYPE html> <html> <head> <title> Test </title> <link rel="stylesheet" type="text/css" href="css/styles.css"> </head> <body> <div style="border: 4px solid blue ; min-width: 200px; max-width:350px;"> <table style="border: 4px solid red ;"> <tr> <td width="200" bgcolor="#F0f0f0">asdfgh </td> </tr> </table> </div> </body> </html>
  12. vmars316
    I tend to use my own fake Tables : <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>vmTemplate-2row2col.html</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body { font-family: "Tahoma", Times, serif; font-size: 14px; } .Table { border-style: solid; text-align: center; border-color: #282A36; border-width: 2px; padding: 24px; */ } .Title { text-align: center; } .Heading { font-weight: bold; text-align: center; } .Row { border-style: solid solid solid solid; border-width: 2px; border-color: #D9B04E; } .Cell { text-align: left; vertical-align: middle; display: inline-block; padding-left: 5px; padding-right: 5px; border-style: solid solid solid solid; border-width: 1px; border-color: #D9B04E; } .StackCell {} .StackRow {} .button { background-color: #282A36; border: none; color: #C8982B; color: #D9B04E; text-align: center; text-decoration: none; display: inline-block; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: "Comic Sans MS", cursive, sans-serif; font-size: 24px; cursor: pointer; } span.RedTxt { color: red; } </style> </head> <body style="background-color:#EbE8E4; font-family: Tahoma; font-size:18px; color:black;"> <br> <div class="Table"> <div class="Title"> <p> <button class="button"> vmTemplate-2row2col.html</button> <br> </p> </div> <!-- <div class="Title"> --> <p></p> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell------------------ --> <div class="Cell"> <p style="text-align:center;"> row1 col1 </p> <br> </div> <!-- ---------------------End of Cell------------------ --> <!-- ---------------------NewCell------------------ --> <div class="Cell"> <p style="text-align:center;"> row1 col2 </p> <br> </div> <!-- ---------------------End of Cell------------------ --> <br> </div> <!-- <div class="Row" --> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell------------------ --> <div class="Cell"> <p style="text-align:center;"> row2 col1 </p> <br> </div> <!-- ---------------------End of Cell------------------ --> <!-- ---------------------NewCell------------------ --> <div class="Cell"> <p style="text-align:center;"> row2 col2 </p> <br> </div> <!-- ---------------------End of Cell------------------ --> <br> </div> <!-- <div class="Row" --> </div> <!-- div class="Table"> --> <div> <p style="text-align:center;"> <span style="font-size: 14pt; font-family: &quot;Avenir Next&quot;;"> <br><br> <a href="http://vmars.us/"> http://vmars.us/ </a> </span> <br> <br>"All things in moderation , except for love and forgiveness" <br> </p> </div> </body></html> hth
  13. vmars316
    Hello & Thanks ,When typing into <input> field , I prefer its behavior . It has a nice smooth scrolling effect . The other examples have jumpy , stacking or stretching behavior . How can I 'Duplicate <input> behavior for <p> or <span> ?' . The reason I don't use <input> is because I need the "contenteditable="true" ability so that I can I can 'SaveAs' htmlPage and all is entered data . Thanks I tried to save this code from https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_input but it's not working . <!DOCTYPE html> <html> <style> p { display: inline-block; height: 20x; font-size: 12px; min-width: 100px } input { width: 100px; } div { display: inline-block; // width: 300px; // border: 1px solid black; height: 20px; font-size: 12px; } span.a { display: inline-block; overflow: hidden; text-align:right; width: 50px; height: 20px; font-size: 12px; } #inputColor { border: 1px solid black; background: #ffe9cc; } span.b { display: inline-block; overflow: hidden; width: 100px; height: 20px; font-size: 12px; border: 1px solid black; background: #ffe9cc; } </style> <body> <br> Input example: <br> Enter your name: <input style="background: #ffe9cc;" name="firstname" type="text" placeholder="First name"> <br><br> span example: <br> <span class="a">Name:</span> <span class="b" contenteditable="true" style="background: #ffe9cc; border: 1px solid black;">&nbsp;&nbsp;&nbsp;&nbsp;</span> <br><br> Paragraph example: <br> <p>Enter your name: </p> <p contenteditable="true" style=" min-width: 100px; border: 1px solid black; background: #ffe9cc;"> </p> <br><br> Div-Paragraph example: <br> <div> <p>Enter your name: </p> <p contenteditable="true" style="background: #ffe9cc; border: 1px solid black;"> </p> </div> </body> </html>
  14. vmars316
    Aha you were right from the beginning . I uninstalled my Chrome adBlocker but that didnt solve problem . I didn't realize that Chrome has an internal blocker. Turns out Chrome has under 'Advanced Settings' something called 'Content Settings' and under there is a settings called 'Pop-ups and redirects' once I reset that to 'Allowed' all is well . Edge also has an 'Advanced Setting' called 'Block pops-ups' that needs to be turned off . Likewise InternetExplorer has a check box under 'Internet Options' that needs to be UNchecked called 'Turn on Pop-up Blocker' . Having changed , the page still doesn't work properly . Must be something more needs to be tweaked . Anyways , Thanks for your help !
  15. vmars316
    Thanks I uninstalled popup-blocker and tried <!DOCTYPE HTML> <head> <title>myFavs-starter.html</title> <meta name="Generator" content="PureBasic"> <meta name="Description" content="...Created by myFavs % PureBasic..."> <style type="text/css"> </style> </head> <body text="#000000" style="background-color:rgb(90,105,125); text-align:center;"> <br> <br> <br> <!--dd <div style=--> <table width="100%" border="0" style="text-align:center" cellspacing="0" cellpadding="0"> <tr style="text-align:center"><td> <!-- EXAMPLE: <form name="Arduino"> --> <!-- rgb(250,240,255) --> <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();"> <option selected value="">aaMost-Used</option> <option value="http://alternativeto.net/">AlternativeToSoftwares</option> <option value="http://www.portablefreeware.com/">Portable Freeware</option> <option value="www.hotmail.com/">hotmail.com</option> <option value="http://jsdo.it/vmars316/8D5g/edit">jsdo.it javascript</option> </select> <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();"> <option selected value="">Arduino</option> <option value="http://garagelab.com/">arduino electronics robotics hacking</option> <option value="http://www.makershed.com/category_s/211.htm">Arduino products/MakerShed</option> <option value="http://diydrones.com/profiles/blogs/ardupilot-main-page">ArduPilot</option> </select> <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();"> <option selected="selected" value="">Best_COLOR_Sites</option> <option value="http://kuler.adobe.com/">Adobe colors schemes themes</option> <option value="http://colorschemedesigner.com/">Best Color Tool Schemes</option> <option value="http://www.makeuseof.com/dir/cloudcanvas-html5-image-editor/">CloudCanvas & other Editor Links</option> <option value="http://jrm.cc/color-palette-generator/index.php?image=rec/girl-with-umbrella.jpg&steps=3&method=precise">Color Palette Generator(upload an image)</option> <option value="http://www.asptemplate.net/Default.aspx">Color Schemes Palettes Codes Photos</option> </select> <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();"> <option selected="selected" value="">Games-html-js</option> <option value="http://FreeSound.org.">FreeSound.org</option> <option value="https://github.com/dgsprb/quick/wiki/API#gameobject">github Quickjs Wiki API#gameobject</option> <option value="http://liesandcowpies.com">lies and Ccowpies Games</option> </select></td></tr></table><br></body></html> Tried it in Chrome, Edge, and IE , still no-go ? I can't figure it out? Thanks for your help...
  16. vmars316
    Hello & Thanks , I am having a prob with Years old html5 page stopped working ? html5 'select dropDown menu, go to site : I have been using this code with success for years , now no-go ? I need help to figure it out , Thanks. <!DOCTYPE HTML> <head> <title>myFavs-starter.html</title> <meta name="Generator" content="PureBasic"> <meta name="Description" content="...Created by myFavs % PureBasic..."> <style type="text/css"> </style> </head> <body text="#000000" style="background-color:rgb(90,105,125); text-align:center;"> <br> <br> <br> <!--dd <div style=--> <table width="100%" border="0" style="text-align:center" cellspacing="0" cellpadding="0"> <tr style="text-align:center"><td> <!-- EXAMPLE: <form name="Arduino"> --> <!-- rgb(250,240,255) --> <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();"> <option selected="0" value="">aaMost-Used</option> <option value="http://alternativeto.net/">AlternativeToSoftwares</option> <option value="http://www.portablefreeware.com/">Portable Freeware</option> <option value="www.hotmail.com/">hotmail.com</option> <option value="http://jsdo.it/vmars316/8D5g/edit">jsdo.it javascript</option> </select> <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();"> <option selected="0" value="">Arduino</option> <option value="http://garagelab.com/">arduino electronics robotics hacking</option> <option value="http://www.makershed.com/category_s/211.htm">Arduino products/MakerShed</option> <option value="http://diydrones.com/profiles/blogs/ardupilot-main-page">ArduPilot</option> </select> <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();"> <option selected="0" value="">Best_COLOR_Sites</option> <option value="http://kuler.adobe.com/">Adobe colors schemes themes</option> <option value="http://colorschemedesigner.com/">Best Color Tool Schemes</option> <option value="http://www.makeuseof.com/dir/cloudcanvas-html5-image-editor/">CloudCanvas & other Editor Links</option> <option value="http://jrm.cc/color-palette-generator/index.php?image=rec/girl-with-umbrella.jpg&steps=3&method=precise">Color Palette Generator(upload an image)</option> <option value="http://www.asptemplate.net/Default.aspx">Color Schemes Palettes Codes Photos</option> </select> <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();"> <option selected="0" value="">Games-html-js</option> <option value="http://FreeSound.org.">FreeSound.org</option> <option value="https://github.com/dgsprb/quick/wiki/API#gameobject">github Quickjs Wiki API#gameobject</option> <option value="http://liesandcowpies.com">lies and Ccowpies Games</option> </select></td></tr></table><br></body></html>
  17. vmars316
    Hmm... This is pretty cool too (double whamy): <p contenteditable="" id="p_ah1" onfocus="{has_Focus = 'p_ah1'}; console.log(has_Focus); " onclick="{has_Focus = 'p_ah1'}">Heading</p>
  18. vmars316
    Thanks
  19. vmars316
    Please let me know if you find out why it acts that way . Thanks
  20. vmars316
    Thanks Ingolme I checked it out , but I don't want to dabble with tabindex . I came up with a workaround that works for me: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- https://www.freeformatter.com/html-validator.html --> <title>How to do lots of stuff:</title> <style type="text/css"> </style> </head> <!-- --> <!-- body onload="documentURL()" . --> <!-- Get & Display Current page's address . --> <body onload="documentURL()"> <!-- --> <p contenteditable="" id="currentPage_Address" style="font-size: 8px; color: #34495E;" onclick='{has_Focus = "currentPage_Address"; whohasFocus();};'> </p> <p contenteditable="" style="color: darkgreen;" id="examplesIntro" onclick='{has_Focus = "examplesIntro"; whohasFocus();};'> These examples (work in progress) demonstrate 'How to': <br> <br>body onload="documentURL()" . <br>Get & Display Current page's address . <br>Make a paragraph contentEditable . <br>Change Paragraph content innerHTML (press Enter_Key) . </p> <!-- Make a paragraph contentEditable . --> <br> <p contenteditable="" id="p_tgh1" onclick='{has_Focus = "p_tgh1"; whohasFocus();};'>This is Paragraph id= p_tgh1</p> <p contenteditable="" id="p_ah1" onclick='{has_Focus = "p_ah1"; whohasFocus();};'>This is Paragraph id= p_ah1</p> <br> <p style="color: darkgreen;" id="showMe" onclick='{has_Focus = "showMe"};'>Show'em Who has Focus ?</p> <script> var someDots = "...."; var origContents = "."; var newContents = "."; var document_URL; var has_Focus = "none-yet"; var allHtml = document.documentElement.outerHTML; var document_URL; function documentURL() { document_URL = document.URL; document.getElementById("currentPage_Address").innerHTML = document_URL; window.addEventListener("keydown", checkForEnterKeyDown, false); } </script> <script> function whohasFocus() { var focusPocus = "."; console.log("49 has_Focus= " + has_Focus); // document.getElementById(showMe).innerHTML = "."; focusPocus = has_Focus + " has focus."; console.log("54 has_Focus= " + has_Focus); document.getElementById("showMe").innerHTML = "Paragraph&nbsp; &nbsp;" + has_Focus + "&nbsp; &nbsp;Has Focus"; } </script> <script> function checkForEnterKeyDown(event){ var keyPressed = event.keyCode || event.which; if(keyPressed==13) { // Change Paragraph content (innerHTML) . console.log("66 has_Focus= " + has_Focus); origContents = document.getElementById(has_Focus).innerHTML ; newContents = origContents + someDots; document.getElementById(has_Focus).innerHTML = newContents; // Cancel onEnterKeyDown . event.preventDefault(); event.stopImmediatePropagation(); } else { return false; } } </script> </body> </html> Thanks
  21. vmars316
    Notepad++
  22. vmars316
    https://www.w3schools.com/code/tryit.asp?filename=G19MDT6C3HPE Thank you for doing that ! Now we are getting somewhere , I think . Note image below: This is what I see from same html . Perhaps it has something to do with you are connected with a Server , I am not . In debugging , I find that : If I copy my code from the 'w3schools link' you gave me , I get my same results , not yours . However , If while at your 'w3schools link' , I click 'RUN' and then click [Add Text] a couple times , Then click [Save This Page] , and let it download to my computer . Then it does show exactly as yours does . How can we account for that ?? Thanks
  23. vmars316
    Thanks, .Table {/* wrapper */ min-height:100%; text-align: center; margin: 0 auto; padding:0; background: #FF0000 ; } Hmm... Sorry , I have to ask , did you test my whole code ? I am confused . On Chrome what it does is make a red line at the bottom , just below id="Row3Cell1" . And the rest of the page is blank . I want to fill up the whole visible screen . You are saying I can use vh to fill up the whole visible page ? Thanks
  24. vmars316
    How to tell which <p> 'id=' has focus ? Hello & Thanks , The problem with 'document.activeElement.tagname' is that for p element it returns 'BODY' . But I want to know which p has focus . Pls, How can this be done ? Here is the prototype function I was working on . <!DOCTYPE html> <html> <title>Which Element Has Focus</title> <!-- --> <body onload="documentURL()" onclick="myFunction()" > <p>Click anywhere in the document to display the active element.</p> <input type="text" value="An input field"> <button>A Button</button> <p id="demo">Who dunnit ?</p> <br> <p id="currentPage_Address" style="fontsize: 12px; color: #34495E;">Current Page Address</p> <script> function myFunction() { var x = document.activeElement.tagName; document.getElementById("demo").innerHTML = x; } </script> <script> var p_tgh = ""; var pp_tgh = ""; var p_tghCount = 1; var p_ah = ""; var pp_ah = ""; var p_ahCount = 1; var ArticleHeading = "Heading"; var TextParagraph = "Text Paragraph"; var ButtonParagraph = "New Link"; var document_URL; const filename = "myStory.html"; var allHtml = document.documentElement.outerHTML; var document_URL; function documentURL() { document_URL = document.URL; document.getElementById("currentPage_Address").innerHTML = document_URL; // window.addEventListener("keydown", onPress_ENTER, false); } </script> </body> </html> And I would like to put some working code in here: 'function onPress_ENTER(event)' Triggered by this: 'window.addEventListener("keydown", onPress_ENTER' Here is the full code where I want to put "WhichParaHasFocus". <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MyStory.html</title> <!-- file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/ https://www.freeformatter.com/html-validator.html <a href="https://developer.mozilla.org/en-US/" target="_blank"> <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" /> </a> still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it . --> <style type="text/css"> body { font-family: Comic Sans MS; height: 100%; margin: 0 auto; padding:0; } html { height: 100%; margin: 0 auto; padding:0; border: 0; } .Table {/* wrapper */ min-height:100%; text-align: center; margin: 0 auto; padding:0; } #mainHeading { color: #566573 ; text-align: center; width: 100%; background: #BCCE98; vertical-align: top; margin: 0 auto; padding:0; } #container { padding-bottom: 1001em; margin-bottom: -1000em; overflow: hidden; margin: 0 auto; padding:0; } #Row1 { display: block; width: 100%; vertical-align: top; margin: 0 auto; padding:0; } #Row2 { display: block; width: 100%; margin: 0 auto; padding:0; } #Row3 { width: 100%; margin: 0 auto; padding:0; display: inline; } #Row1Cell1 { color: #4C4C4C; display: inline-block; text-align: center; width: 100%; font-size: 18px } #Row2Cell1 { display: inline-block; background-color: #DAE9BC; width: 20%; margin: 0 auto; float: left; padding-bottom: 1001em; margin-bottom: -1000em; } #Row2Cell2 { display: inline-block; text-align: left; width: 60%; background-color:#F8F8FF; margin: 0 auto; float:left; padding-bottom: 1001em; margin-bottom: -1000em; } #Row2Cell3 { display: inline-block; width: 20%; background: #e9f2d7; margin: 0 auto; float: right; padding-bottom: 1001em; margin-bottom: -1000em; } #Row3Cell1 { display: inline-block; width: 100%; background: #BCCE98; margin: 0 auto; overflow: auto; text-align: center; } div{ text-align: left; font-size: 14px } .p_bn { text-align: left; } .p_ah { color: DarkGreen; text-align: left; font-size: 16px } .p_tgh { color: #566573; text-align: left; font-size: 14px } #left_note { color:#5886BC; } #left_note { color:#576C15; } #currentPage_Address { color:#e9f2d7; } </style> </head> <body onload="documentURL()"> <!-- Run me 1st --> <div class="Table"> <!-- ============NewRow============== --> <div id="Row1"> <div id="Row1Cell1"> <p contenteditable="true" id="mainHeading">MainHeading</p> </div> <!-- <div class="Cell" --> </div> <!-- <div class="Row" --> <!-- ============NewRow============== --> <div id="container"> <div id="Row2"> <div id="Row2Cell1"> <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p> </div> <!-- <div class="Cell" --> <div id="Row2Cell2"> <p contenteditable="" class="p_ah">Heading</p> <p contenteditable="" class="p_tgh">Text</p> </div> <!-- <div class="Cell" --> <div id="Row2Cell3"> <p contenteditable="true" class="right_note" style="color:#576C15">notes</p> </div> <!-- <div class="Cell" --> </div> <!-- <div class="Row" --> </div> <!-- id="container" --> <!-- ============NewRow============== --> <div id="Row3"> <div id="Row3Cell1"> <br> <button onclick="createLeftNote()">Add Left Note</button> <button onclick="createArticleHeading()">Add Heading</button> <button onclick="createTextArea()">Add Text Paragraph</button> <button onclick="createRightNote()">Add Right Note</button> <form action="http://google.com" target="_blank" style="display: inline;"> <input type="submit" value="Search Google" /> </form> <button onclick="saveAs(filename, allHtml)">Save This Page</button> <p id="currentPage_Address" > </p> </div> <!-- id="Row3Cell1" --> </div> <!-- <div class="Row" --> </div> <!-- <div class="Table"> --> <script> var LeftNote = "LeftNote"; var ArticleHeading = "Heading"; var TextParagraph = "Text"; var RightNote = "RightNote"; var ButtonParagraph = "New Link"; var document_URL; var filename = "myStory.html"; var allHtml = document.documentElement.outerHTML; var document_URL; function documentURL() { document_URL = document.URL; document.getElementById("currentPage_Address").innerHTML = document_URL; window.addEventListener("keydown", onPress_ENTER, false); } </script> <script> function onPress_ENTER(event){ var keyPressed = event.keyCode || event.which; //if ENTER is pressed if(keyPressed==13) { // alert('enter pressed'); event.preventDefault(); stopImmediatePropagation(); } else { return false; } } </script> <script contenteditable=""> function createTextArea() { var p_tgh = document.createElement("p"); p_tgh.innerHTML = TextParagraph; p_tgh.setAttribute("contenteditable", "true"); p_tgh.setAttribute("class","p_tgh"); var content = document.getElementById("Row2Cell2"); content.appendChild(p_tgh); } </script> <script contenteditable=""> function createArticleHeading() { var p_ah = document.createElement('p'); p_ah.innerHTML = ArticleHeading; p_ah.setAttribute('contenteditable', 'true'); p_ah.setAttribute("class","p_ah"); var content = document.getElementById('Row2Cell2'); content.appendChild(p_ah); } </script> <script> function saveAs(filename, allHtml) { allHtml = document.documentElement.outerHTML; var blob = new Blob([allHtml], {type: 'text/csv'}); if(window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveBlob(blob, filename); } else{ var elem = window.document.createElement('a'); elem.href = window.URL.createObjectURL(blob); elem.download = filename; document.body.appendChild(elem); elem.click(); document.body.removeChild(elem); } } </script> <script contenteditable=""> function createNewButton() { var p_bn = document.createElement("li"); p_bn.innerHTML = ButtonParagraph; p_bn.setAttribute('contenteditable', 'true'); p_bn.setAttribute("id","li-Default"); var content = document.getElementById("nav-01"); content.appendChild(p_bn); } </script> </body> </html> Thanks
  25. vmars316
    Ouch ! Been there done that , it doesn't help . body { font-family: Comic Sans MS; height: 100%; margin: 0 auto; padding:0; } html { height: 100%; margin: 0 auto; padding:0; border: 0; } .Table {/* wrapper */ min-height:100%; text-align: center; margin: 0 auto; padding:0; } As a matter of fact I tried min-height:100% ; in Body , Html and Table . None of it works ! I must be cancelling it out in other ways . Speaking of your common sense remark reminds me of an incident with my dad when I was 10yrs old . He had just purchased a mechanical lawn trimmer . Each time he sent me out I came back saying . "It doesn't work" . So finally I said "Why don't you show me how". So he tried and tried , cursing all time . Finally , he threw it down and said "This piece of **** doesn't work". Anyways , here is the full code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MyStory.html</title> <!-- file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/ https://www.freeformatter.com/html-validator.html <a href="https://developer.mozilla.org/en-US/" target="_blank"> <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" /> </a> still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it . --> <style type="text/css"> body { font-family: Comic Sans MS; height: 100%; margin: 0 auto; padding:0; } html { height: 100%; margin: 0 auto; padding:0; border: 0; } .Table {/* wrapper */ min-height:100%; text-align: center; margin: 0 auto; padding:0; } #mainHeading { color: #566573 ; text-align: center; width: 100%; background: #BCCE98; vertical-align: top; margin: 0 auto; padding:0; } #container { padding-bottom: 1001em; margin-bottom: -1000em; overflow: hidden; margin: 0 auto; padding:0; } #Row1 { display: block; width: 100%; vertical-align: top; margin: 0 auto; padding:0; } #Row2 { display: block; width: 100%; margin: 0 auto; padding:0; } #Row3 { width: 100%; margin: 0 auto; padding:0; display: inline; } #Row1Cell1 { color: #4C4C4C; display: inline-block; text-align: center; width: 100%; font-size: 18px } #Row2Cell1 { display: inline-block; background-color: #DAE9BC; width: 20%; margin: 0 auto; float: left; padding-bottom: 1001em; margin-bottom: -1000em; } #Row2Cell2 { display: inline-block; text-align: left; width: 60%; background-color:#F8F8FF; margin: 0 auto; float:left; padding-bottom: 1001em; margin-bottom: -1000em; } #Row2Cell3 { display: inline-block; width: 20%; background: #e9f2d7; margin: 0 auto; float: right; padding-bottom: 1001em; margin-bottom: -1000em; } #Row3Cell1 { display: inline-block; width: 100%; background: #BCCE98; margin: 0 auto; overflow: auto; text-align: center; } div{ text-align: left; font-size: 14px } .p_bn { text-align: left; } .p_ah { color: DarkGreen; text-align: left; font-size: 16px } .p_tgh { color: #566573; text-align: left; font-size: 14px } #left_note { color:#5886BC; } #left_note { color:#576C15; } #currentPage_Address { color:#e9f2d7; } </style> </head> <body onload="documentURL()"> <!-- Run me 1st --> <div class="Table"> <!-- ============NewRow============== --> <div id="Row1"> <div id="Row1Cell1"> <p contenteditable="true" id="mainHeading">MainHeading</p> </div> <!-- <div class="Cell" --> </div> <!-- <div class="Row" --> <!-- ============NewRow============== --> <div id="container"> <div id="Row2"> <div id="Row2Cell1"> <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p> </div> <!-- <div class="Cell" --> <div id="Row2Cell2"> <p contenteditable="" class="p_ah">Heading</p> <p contenteditable="" class="p_tgh">Text</p> </div> <!-- <div class="Cell" --> <div id="Row2Cell3"> <p contenteditable="true" class="right_note" style="color:#576C15">notes</p> </div> <!-- <div class="Cell" --> </div> <!-- <div class="Row" --> </div> <!-- id="container" --> <!-- ============NewRow============== --> <div id="Row3"> <div id="Row3Cell1"> <br> <button onclick="createLeftNote()">Add Left Note</button> <button onclick="createArticleHeading()">Add Heading</button> <button onclick="createTextArea()">Add Text Paragraph</button> <button onclick="createRightNote()">Add Right Note</button> <form action="http://google.com" target="_blank" style="display: inline;"> <input type="submit" value="Search Google" /> </form> <button onclick="saveAs(filename, allHtml)">Save This Page</button> <p id="currentPage_Address" > </p> </div> <!-- id="Row3Cell1" --> </div> <!-- <div class="Row" --> </div> <!-- <div class="Table"> --> <script> var LeftNote = "LeftNote"; var ArticleHeading = "Heading"; var TextParagraph = "Text"; var RightNote = "RightNote"; var ButtonParagraph = "New Link"; var document_URL; var filename = "myStory.html"; var allHtml = document.documentElement.outerHTML; var document_URL; function documentURL() { document_URL = document.URL; document.getElementById("currentPage_Address").innerHTML = document_URL; window.addEventListener("keydown", onPress_ENTER, false); } </script> <script> function onPress_ENTER(event){ var keyPressed = event.keyCode || event.which; //if ENTER is pressed if(keyPressed==13) { // alert('enter pressed'); event.preventDefault(); stopImmediatePropagation(); } else { return false; } } </script> <script contenteditable=""> function createTextArea() { var p_tgh = document.createElement("p"); p_tgh.innerHTML = TextParagraph; p_tgh.setAttribute("contenteditable", "true"); p_tgh.setAttribute("class","p_tgh"); var content = document.getElementById("Row2Cell2"); content.appendChild(p_tgh); } </script> <script contenteditable=""> function createArticleHeading() { var p_ah = document.createElement('p'); p_ah.innerHTML = ArticleHeading; p_ah.setAttribute('contenteditable', 'true'); p_ah.setAttribute("class","p_ah"); var content = document.getElementById('Row2Cell2'); content.appendChild(p_ah); } </script> <script> function saveAs(filename, allHtml) { allHtml = document.documentElement.outerHTML; var blob = new Blob([allHtml], {type: 'text/csv'}); if(window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveBlob(blob, filename); } else{ var elem = window.document.createElement('a'); elem.href = window.URL.createObjectURL(blob); elem.download = filename; document.body.appendChild(elem); elem.click(); document.body.removeChild(elem); } } </script> <script contenteditable=""> function createNewButton() { var p_bn = document.createElement("li"); p_bn.innerHTML = ButtonParagraph; p_bn.setAttribute('contenteditable', 'true'); p_bn.setAttribute("id","li-Default"); var content = document.getElementById("nav-01"); content.appendChild(p_bn); } </script> </body> </html> Thanks
×
×
  • Create New...