vmars316
-
Posts
480 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by 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>
-
- 1
-
Great support :
QuoteHey there vmars, your issue here is that getElementByID only ever gets one element. getElementsByClassName gets a collection of elements, so some things needs to be adjusted.
You'll need to apply the DragElement function to all of the Elements in the collection. (For loop might work well)
Your headers will no longer work as they use the passed element's id. You'll need to apply a "header" custom class, one that will exist on all the headers. You can then access this header element for dragging purposes by using the below code.
ev.target evaluates into the element that has been activated using the event (onmousedown, onmousemove etc). That will always evaluate to the .mydiv that was clicked.So rather than document.getElementById, you use ev.target inside this function.
Thanks
-
On 8/2/2019 at 9:40 AM, dsonesuk said:
They don't show on smaller devices, you are then stuck with using [ code ]....[ /code ] (without spaces);
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
-
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 .)
Quotefunction dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
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)
' intoev.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
-
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_draggableI 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 !
-
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
-
Thanks Ingolme ,
Very cool !
I scooped it .
I use KompoZerPortable to create tables .
& still using Notepad++
-
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
-
<!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>
-
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: "Avenir Next";"> <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
-
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;"> </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>
-
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 !
-
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...
-
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>
-
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>
-
-
Please let me know if you find out why it acts that way .
Thanks
-
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 " + has_Focus + " 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
-
-
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
-
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
-
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
-
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
"Your Code has Been Saved" page Isn't working ??
in HTML/XHTML
Posted
No I am just adding to the code .
And I have tried many times .
??