Created TextArea & ArticleHeader loose their css styles ?

vmars316 · January 25, 2019

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks for help

Edited January 25, 2019 by vmars316
typo

vmars316 · January 26, 2019

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

So I am working on a miniature version of this .

I'll be back .

vmars316 · January 26, 2019

Here is page code minified .

What is troubling me , is that the style settings for ArticleHeading(#p_ah) & TextHeading(p_tgh) are not working .

Here is the working page online: Pls, show me how to fix this .

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

Thanks for your help !

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Master-WIP-Mini.html</title>
    <style>
      body {margin:0; padding:0; font-family: Sans-Serif; line-height: 1.5em; }
      #header,  h1 {	margin: 0; padding-top: 10px; text-align: center; background: #ccc; height: 50px; }
      #wrapper { overflow: hidden; }
      #section { padding-bottom: 10010px; margin-bottom: -10000px; float: left; width: 100%; }
      #content { margin-left: 230px; /* Same as 'nav' width */ }
      .innertube {margin: 15px; /* Padding for content */ margin-top: 0; }
      p {
      color: #000555;
      }
      #p_bn {
      text-align: left;
      }
      #p_ah {
      color: #555555; 
      text-align: left;
      font-size: 18px
      }
      #p_tgh {
      color: #999999;
      text-align: left;
      font-size: 12px
      font-size: 12px
      }
      #footer { clear: left; width: 100%; background: #ccc; text-align: center; padding: 4px 0; }
    </style>
  </head>
  <body onload="documentURL()">
    <p id="CurrentPageAddress" align="center">Html-MasterWIP-Mini.html</p>
    <header id="header">
      <div id="innertube-01">
        <br>
        <h1 contenteditable="">my Main Header</h1>
      </div>
    </header>
    <div id="wrapper">
    <section id="section">
      <div id="content">
      <div id="innertube-02">
        <!--  div.section.content.innertube.p  -->
        <p contenteditable="" id="p_ah">Article Heading</p>
        <p contenteditable="" id="p_tgh">Text paragraph</p>
      </div>
    </section>
    <nav id="nav-01">
      <h1 contenteditable="">Go To Links</h1>
      <ul>
      <div id="innertube-03">
        <li><a id="li-01" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-01.html">Link 1</a></li>
        <li><a id="li-02" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-02.html">Link 2</a></li>
        <li><a id="li-03" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/DIY-Html-03.html">Link 3</a></li>
        <li><a id="li-Last" href="file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/Hey-Buddy.html">Hey Buddy !</a></li>
    </nav>
    </div>
    <footer id="footer">
      <div id="innertube-04">
        <p contenteditable="">Footer...</p>
      </div>
    </footer>
    <div id="buttonDiv" align="center">
      <!--  Buttons Header  createNewLink  -->
      <button onclick="createNewButton()">Add New Button</button>
      <button onclick="createArticleHeading()">Add New Article Heading</button>
      <button onclick="createTextArea()">Add New Text Area</button>
    </div>
    <script id="js" contenteditable="">
      function createTextArea() {
                var p_tgh = document.createElement("p");
                p_tgh.innerHTML = TextParagraph;
                p_tgh.setAttribute("contenteditable", "true");
                var content = document.getElementById("innertube-02");
                content.appendChild(p_tgh);
              }	
    </script>	
    <script id="js" contenteditable="">
      function createArticleHeading() {
        var p_ah = document.createElement('p');
        p_ah.innerHTML = ArticleHeading;
        p_ah.setAttribute('contenteditable', 'true');
        var content = document.getElementById('innertube-02');
        content.appendChild(p_ah);
      }
    </script> 
    <script>
      var  ArticleHeading = "Article Heading"
      var  TextParagraph = "Text Paragraph"
      var  ButtonParagraph = "New Link"
      var  document_URL
      function documentURL() {
      document_URL = document.URL;
      document.getElementById("CurrentPageAddress").innerHTML = document_URL; 
      }
    </script>
    <script id="js" contenteditable="">
      function createNewButton() {
        var p_bn = document.createElement('li-Last');
        p_bn.innerHTML = ButtonParagraph;
        p_bn.setAttribute('contenteditable', 'true');
        var content = document.getElementById('innertube-03');
        content.appendChild(p_bn);
      }
    </script> 
  </body>
</html>

Edited January 26, 2019 by vmars316
typo

Funce · January 28, 2019

Apologies vmars, I may have replied to an earlier thread you made..

vmars316 · January 29, 2019

Hi Funce ,

Those are all cleared up the link below .

Kindly go to :

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

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

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

all subsequent 'Text Paragraph's are black .

I want them all to be Grey .

Pls , how can I correct that ?

Thanks for your help !

dsonesuk · January 29, 2019

First off, validate your html, you have misplaced opening & closing tags.

Try using create textnode for created elements, instead of innerHTML and append that textnode to created element.

https://www.w3schools.com/jsref/met_document_createtextnode.asp

Edited January 29, 2019 by dsonesuk

vmars316 · January 31, 2019

Thanks dsonesuk :
Oops , I forgot all about :

https://www.freeformatter.com/html-validator.html

Quote

Try using create textnode for created elements, instead of innerHTML and append that textnode to created element.

I would like to try that later .
Right now my mind set is on 1st working it out with <p> .

I put a new example here:

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

Pls , take a look at the source .
So there is something I would like to add within each created <p> element .
And that is its id="p_ah" and id="p_tgh" elements repectively .

I tried:

p_tgh.setAttribute("contenteditable", "true" , "id="p_tgh"");

But its a no go .

Pls, how can I do this ?
Thanks

vmars316 · January 31, 2019

Ah... finally , I got it:

However , still 1 problem left:

//        var content = document.getElementById('ul');
//        var content = document.getElementById('nav-01.ul');
        var content = document.getElementById('nav-01');
        content.appendChild(p_bn);

The content.appendChild(p_bn); only works for var content = document.getElementById('nav-01'); .

Which puts it AFTER <ul></ul> .

But I want it to be put within <ul> as an appendChild .

Pls , How can I put the child within <ul> ?

Here is the whole mini-mini code"

<!DOCTYPE html>
<!-- saved from url=(0065)file:///C:/Users/vmars/Desktop/Downloads/Html-MasterWIP-Mini.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>Html-MasterWIP-Mini.html</title>
    <!--  https://www.freeformatter.com/html-validator.html  -->
    <style>
      body {margin:0; padding:0; font-family: Sans-Serif; line-height: 1.5em; }
      #header,  h1 {	margin: 0; padding-top: 10px; text-align: center; background: #ccc; height: 50px; }
      #content { margin-left: 230px; /* Same as 'nav' width */ }
      #p_bn {
      text-align: left;
      }
      #li-Default{
      text-align: left;
      }
    </style>
  </head>
  <body onload="documentURL()"><!-- Run me 1st -->
    <p id="CurrentPageAddress" align="center">file:///C:/Users/vmars/Desktop/Downloads/Html-MasterWIP-Mini.html</p>
    <div id="nav-01">
      <ul>
        <li><a  contenteditable id="li-Default" href="https://www.google.com/">Search Google</a>
        </li>
      </ul>
    </div>  
    
    <div id="buttonDiv" align="center">
      <button onclick="createNewButton()">Add New Button</button>
    </div>
    <script>
      var  ButtonParagraph = "New Link"
      var  document_URL
      function documentURL() {
      document_URL = document.URL;
      document.getElementById("CurrentPageAddress").innerHTML = document_URL; 
      }
    </script>

    <script contenteditable=""> 
      function createNewButton() {
//      alert("function createNewButton()");
        var p_bn = document.createElement("li");
        p_bn.innerHTML = ButtonParagraph;
        p_bn.setAttribute('contenteditable', 'true');
        p_bn.setAttribute("id","li-Default");
//        var content = document.getElementById('ul');
//        var content = document.getElementById('nav-01.ul');
        var content = document.getElementById('nav-01');
        content.appendChild(p_bn);
      }
    </script> 
  
</body></html>

Thanks

Edited January 31, 2019 by vmars316
typo

dsonesuk · February 1, 2019

Give the ul a id ref and use that, to append li child, OR use

	var inner_parent = content.getElementsByTagName('ul')[0]

And append to inner_parent variable.

Edited February 1, 2019 by dsonesuk

vmars316 · February 1, 2019

Hi dsonesuk ;

Using your

var inner_parent = content.getElementsByTagName('ul')[0]

It's not working for me . I must have coded it wrong.

With the code below I expected to get two "New Link" s .

But only got 1 . Pls , tell me what is my mistake ?

Thanks

    <script contenteditable=""> 
      function createNewButton() {
//      alert("function createNewButton()");
        var p_bn = document.createElement("li");
        p_bn.innerHTML = ButtonParagraph;
        p_bn.setAttribute('contenteditable', 'true');
        p_bn.setAttribute("id","li_Default");
        var content = document.getElementById('ul_01');
        content.appendChild(p_bn);
        var  inner_parent = content.getElementsByTagName('ul')[0];
        inner_parent.appendChild(inner_parent);
      }
    </script>

It's the same code as in my last Post ,

except for the last two lines .

I can Post the whole code it you like .

dsonesuk · February 1, 2019

1) You are appending ul element within the same ul element?

2) You are not creating a anchor link but a li element

The correct sequence is

1) Create li element.

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

3) Append anchor to created li element

4) Assign div with id="ul_01" to variable content

5) Get ref to first ul child of div reference by variable content using var inner_parent = content.getElementsByTagName ('ul')[ 0] ;

6) Append p_bn variable (that includes both li and child anchor elements) to inner_parent variable which is the first ul element.

vmars316 · February 3, 2019

Thanks ,

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

Quote

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

Is this the anchor? :

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

Thanks

dsonesuk · February 4, 2019

"li" ="list-item"=<li>...</li>

"a"="anchor"=<a href="#">link 1</a>

Created TextArea & ArticleHeader loose their css styles ?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in