Jump to content

Created TextArea & ArticleHeader loose their css styles ?


Recommended Posts

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

Link to post
Share on other sites

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 by Funce
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...