Hello & Thanks ,
I have applied your method from your article:
https://www.kirupa.com/html5/make_body_take_up_full_browser_height.htm
But it isn’t working for me .
I must be cancelling it out in some way .
Below is the code , pls show me wherein my error is.
Thanks
<!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-Cancel-EnterKey-Green-WORKING-RESTART.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%;
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 {
// min-height: 100%;
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
{
// height: 100%;
// min-height: 100%;
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
{
// min-height: 100%;
display: inline-block;
background-color: #DAE9BC;
width: 20%;
margin: 0 auto;
float: left;
padding-bottom: 1001em;
margin-bottom: -1000em;
}
#Row2Cell2
{
// min-height: 100%;
display: inline-block;
text-align: center;
width: 60%;
background-color:#F8F8FF;
margin: 0 auto;
float:left;
padding-bottom: 1001em;
margin-bottom: -1000em;
}
#Row2Cell3
{
// min-height: 100%;
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_ah1 {
color: #4C4C4C; /* color: #555555; */
text-align: left;
font-size: 16px
}
#p_tgh1 {
/* 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="" id="p_Ln1" style="text-align: left;" style="color:#5886BC;" onfocus="{has_Focus = 'p_Ln1'};" onclick="{has_Focus = 'p_Ln1'}">leftNotes</p>
</div>
<!-- <div class="Cell" -->
<div id="Row2Cell2">
<p contenteditable="" id="p_ah1" style="text-align: left;" onfocus="{has_Focus = 'p_ah1'}; " onclick="{has_Focus = 'p_ah1'}">Heading</p>
<p contenteditable="" id="p_tgh1" style="text-align: left;" onfocus="{has_Focus = 'p_tgh1'}; " onclick="{has_Focus = 'p_tgh1'}">Text</p>
</div> <!-- <div class="Cell" -->
<div id="Row2Cell3">
<p contenteditable="true" id="p_Rn1" style="text-align: left;" style="color:#576C15" onfocus="{has_Focus = 'p_Rn1'};" onclick="{has_Focus = 'p_Rn1'}">rightNotes</p>
</div>
<!-- <div class="Cell" -->
</div>
<!-- <div class="Row" -->
</div>
<!-- id="container" -->
<!-- ============NewRow============== -->
<div id="Row3">
<div id="Row3Cell1">
<br>
<button onclick="createNote1Area()">Add Left Note</button>
<button onclick="createArticleHeading()">Add Heading</button>
<button onclick="createTextArea()">Add Text Paragraph</button>
<button onclick="createNote2Area()">Add Left Note</button>
<!-- <button onclick='createTextArea(); {p_tghCount = p_tghCount +1; p_tgh = "p_tgh" + p_tghCount; p_id = p_tgh;}; return false;'>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">file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory-Cancel-EnterKey-Green-WORKING-RESTART.html</p>
</div>
<!-- id="Row3Cell1" -->
</div>
<!-- <div class="Row" -->
</div>
<!-- <div class="Table"> -->
<script>
var ArticleHeading = "Heading";
var ButtonParagraph = "New Link";
var current_p_ah = "p_ah1";
var current_p_tgh = "p_tgh1";
var document_URL;
var document_URL;
var has_Focus = "none yet" ;
var LeftNote = "leftNotes";
var next_p_tgh = "p_tgh2";
var p_ah = "";
var p_ahCount = 1;
var p_id = "";
var p_Ln1 = "p_Ln1";
var p_Ln1Count = 1;
var p_Ln2 = "p_Ln1";
var p_Ln2Count = 1;
var p_tgh = "";
var p_tghCount = 1;
var pp_ah = "";
var pp_tgh = "";
var RightNote = "rightNotes";
var TextParagraph = "Text";
var allHtml = document.documentElement.outerHTML;
const filename = "myStory.html";
function documentURL() {
document_URL = document.URL;
document.getElementById("currentPage_Address").innerHTML = document_URL;
window.addEventListener("keydown", checkForEnterKeyDown, false);
}
</script>
<script>
var fourSpaces = ". .";
var origContents = "";
var newContents = "";
function checkForEnterKeyDown(event){
var keyPressed = event.keyCode || event.which;
//if ENTER is pressed
if(keyPressed==13)
{
// console.log('has_Focus= ' + has_Focus);
// Change Paragraph content (innerHTML) .
// To append something to text paragraph activate next 3 lines
// origContents = document.getElementById(has_Focus).innerHTML ;
// newContents = origContents + "";
// document.getElementById(has_Focus).innerHTML = newContents;
// Cancel onEnterKeyDown .
event.preventDefault();
event.stopImmediatePropagation();
}
else
{
return false;
}
}
</script>
<script contenteditable="">
function createNote1Area() {
// console.log('has_Focus= ' + has_Focus);
// console.log('p_tghCount= ' + p_tghCount);
p_Ln1Count = p_Ln1Count +1;
p_Ln1 = "p_Ln1" + p_Ln1Count;
current_p_Ln1 = p_Ln1;
p_id = p_Ln1;
next_p_Ln1 = "p_tgh" + (p_Ln1Count +1);
// console.log('p_tghCount= ' + p_tghCount);
// console.log('current_p_tgh= ' + current_p_tgh);
// console.log('next_p_tgh= ' + next_p_tgh);
var pp_Ln1 = document.createElement("p");
pp_Ln1.innerHTML = TextParagraph;
pp_Ln1.setAttribute("contenteditable", "true");
pp_Ln1.setAttribute("id", current_p_Ln1);
pp_Ln1.setAttribute("style", "text-align: left");
var content = document.getElementById("Row2Cell2");
content.appendChild(pp_Ln1);
}
</script>
<script contenteditable="">
function createTextArea() {
// console.log('has_Focus= ' + has_Focus);
// console.log('p_tghCount= ' + p_tghCount);
p_tghCount = p_tghCount +1;
p_tgh = "p_tgh" + p_tghCount;
current_p_tgh = p_tgh;
p_id = p_tgh;
next_p_tgh = "p_tgh" + (p_tghCount +1);
// console.log('p_tghCount= ' + p_tghCount);
// console.log('current_p_tgh= ' + current_p_tgh);
// console.log('next_p_tgh= ' + next_p_tgh);
var pp_tgh = document.createElement("p");
pp_tgh.innerHTML = TextParagraph;
pp_tgh.setAttribute("contenteditable", "true");
pp_tgh.setAttribute("id", current_p_tgh);
pp_tgh.setAttribute("style", "text-align: left");
var content = document.getElementById("Row2Cell2");
content.appendChild(pp_tgh);
}
</script>
<script contenteditable="">
function createArticleHeading() {
var pp_ah = document.createElement('p');
pp_ah.innerHTML = ArticleHeading;
pp_ah.setAttribute('contenteditable', 'true');
pp_ah.setAttribute("id","p_ah");
pp_ah.setAttribute("style", "text-align: left");
var content = document.getElementById('Row2Cell2');
content.appendChild(pp_ah);
}
</script>
<script contenteditable="">
function createNote1Area() {
// console.log('has_Focus= ' + has_Focus);
// console.log('p_tghCount= ' + p_tghCount);
p_Ln1Count = p_Ln1Count +1;
p_Ln1 = "p_Ln1" + p_Ln1Count;
current_p_Ln1 = p_Ln1;
p_id = p_Ln1;
next_p_Ln1 = "p_tgh" + (p_Ln1Count +1);
// console.log('p_tghCount= ' + p_tghCount);
// console.log('current_p_tgh= ' + current_p_tgh);
// console.log('next_p_tgh= ' + next_p_tgh);
var pp_Ln1 = document.createElement("p");
pp_Ln1.innerHTML = TextParagraph;
pp_Ln1.setAttribute("contenteditable", "true");
pp_Ln1.setAttribute("id", current_p_Ln1);
pp_Ln1.setAttribute("style", "text-align: left");
var content = document.getElementById("Row2Cell2");
content.appendChild(pp_Ln1);
}
</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>