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) full code here:

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Thanks for help

Funce · January 27, 2019

Hi there!

Just a few issues things to fix up and you're good to go!

You've got a bunch of HTML comments inside your CSS and your JS, you'll need to change them to proper styles.
CSS uses /* code */ for commenting
JS uses /* code */ for multiline comments and // code for single line comnments.

Your added elements on your page never have the styling classes added to them. Have a look here for more of the technical details:

https://www.w3schools.com/howto/howto_js_add_class.asp

An example for CreateArticleHeader

function createArticleHeader(text = "Article Heading") {
  var p_ah = document.createElement("p");
  //    alert{"p_ah"};
  p_ah.innerHTML = text;
  p_ah.setAttribute("contenteditable", "true");
  // Add class for styling
  p_ah.classList.add("p_ah"); 
  var content = document.getElementById("content");
  content.appendChild(p_ah);
}

In terms of compatibility, as long as you add only one class per use of classList.add, you'll be able to support IE.

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Now because of the way this works, you'll need to change your styling to use

.p_ah instead of #p_ah and change the original Article Heading attributes from id="p_ah" to class="p_ah"
And the same for p_tgh and the original Text Paragraph

<p contenteditable class="p_ah">Article Heading</p>

.p_ah {
  font-size: 18px;
  font-style: bold;
}

Edited January 27, 2019 by Funce

Sign In

Created TextArea & ArticleHeader loose their css styles ?

Recommended Posts

vmars316

Funce

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity