Jump to content
vmars316

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) 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 by vmars316
typo

Share this post


Link to post
Share on other sites

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 .  :) 

Share this post


Link to post
Share on other sites

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 by vmars316
typo

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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 !

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by vmars316
typo

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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 .

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


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...