HTML / Javascript - Textarea glitch? - javascript

With this code in my document,
<body>
<a style="font-family: Arial, Helvetica, sans-serif;">Text area:</a><br>
<textarea id="html_code" style="
font-family: 'Courier New', Courier, monospace;
width: 650px;
height: 400px;
padding: 7.5px;
margin-top: 5px;
resize: vertical;" spellcheck="false"></textarea>
<script>
document.getElementById("html_code").value = '<!doctype html>\n<html>\n<head>\n<meta charset="utf-8">\n</head>\n<body>\n<script>\n</script>\n</body>\n</html>';
</script>
</body>
there is an unexpected result. The text are not correctly displayed within the textarea.
Here is a preview of the result of the above code.
What is causing this to happen?

Because you are putting
<script>\n</script>
on
'<!doctype html>\n<html>\n<head>\n<meta charset="utf-8">\n</head>\n<body><script>\n</script>\n</body>\n</html>',
which is not treating as string in textarea but tag.
UPDATE
change from </script> to <\/script> does solve your problem.
DEMO

try this
document.getElementById("html_code").innerHTML = '<!doctype html>\n<html>\n<head>\n<meta charset="utf-8">\n</head>\n<body>\n<script>\n</script>\n</body>\n</html>';
make sure you escape the html from the string, it's not showing here. Click edit on the answer to see it.

Number one, first one foremost you do not want to add html markup code to a Textarea. If you need to add raw HTML to a container use a div or p. You can use the ContentEditable attribute option of the div for adding html markup to a container. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
You would add the markup to the contenteditable div like so: document.getElementById("html_code").innerHTML = '<!doctype html>\ If your adding this HTML to a div that is contenteditable that exist with-in a current DOM document you do not need the
'<!doctype html>\n<html>\n<head>\n<meta charset="utf-8">\n</head>\n<body>\n<
portions of your code because you're adding a new document and a new body to a current document. That is not right. The only thing I see you need to add is the script and if that is the case you just need to add that script to the head of the document.
What are you wanting the end result to be?

Related

How to Wrap Text in a Content Editable Div Per Line

I would like to understand if I can wrap text in a content editable div.
For example, if a user uses markup to type
### MY TITLE
can I somehow parse that line and create another div that outputs
<b>MY TITLE<b>
I've created a jsfiddle to observe the output, but I don't see much that tells me where a line ENDS to put the closing tag. In addition, the output looks pretty weird after hitting the return key a couple times. It seems difficult to work with and I was hoping there be better indicators of what the user had typed.
"
### test
<div><br></div>"
https://jsfiddle.net/rn2camL4/1/
If I'm understanding correctly, you just want to put bold tags around the output, if so, you can accomplish this with a simple concatenation.
I brought your jsfiddle over into the snippet below, please run it to see it in action.
When you console.log(boldHtml) you will see the output wrapped in <b></b>.
$('#editable').on('keydown', function(e) {
let html = $(this).html();
//concatenate bold tags around your html and declare new boldHtml variable
let boldHtml = '<b>' + html + '</b>'
$('#render').html(boldHtml) // replace test with <b>test</b>
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editable" contenteditable="true" style="background-color:white; outline: 0px solid transparent; width: 100%; padding: 16px;">
### test
</div>
<div id='render'>
</div>
Alternatively, if you're fine with using a library, you can use markdown-it for example and have it convert any type of markdown into HTML.
I've applied the logic to your code below.
When you console.log(markdown) you will see the correct HTML tags around your output.
const md = window.markdownit();
$('#editable').on('keydown', function(e) {
let html = $(this).html();
let markdown = md.render(html);
$('#render').html(markdown) // replace any markdown with proper html
//console.log(markdown);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it#10.0.0/dist/markdown-it.min.js"></script>
<div id="editable" contenteditable="true" style="background-color:white; outline: 0px solid transparent; width: 100%; padding: 16px;">
Enter ANY markdown here
</div>
<div id='render'>
</div>

How can I place two statements on same line?

Home
<p id="dt"></p>
<script>
document.getElementById("dt").innerHTML = "hello";
</script>
I just need both statements on the same line. This must be simple!! (but I cant do it!) Thanks
p is representing a paragraph and therefore is (usually) a block element. For what you are doing, you would be better served with using an inline element like span.
Making the element inline will lead to both being displayed on the same line. If switching the tag is not an option, use css to set display:inline on the paragraph.
The <p> tag will create a new line by default. One way to prevent this is CSS display: inline.
<style>
#dt {display: inline;}
</style>
Home
<p id="dt"></p>
<script>
document.getElementById("dt").innerHTML = "hello";
</script>
<a href="index.shtml" style=' white-space: nowrap;'>Home</a>
<div id="dt" style='display: inline-block;'></div>
<script >
document.getElementById("dt").innerHTML = "hello";
</script>
Reference

How do I embed a part of a webpage with a certain name attribute within my webpage?

There's a webpage. Let's call it Example.html. I can not control/change this webpage but I want to embed a particular portion of it in my webpage.
The Example.html webpage has an HTML code that looks something like this:
<!--[stuff I don't want]-->
<form action="/example/index.pl" method="post" enctype="multipart/form-data" name="windyNights">
<!--[stuff I want!]-->
<\form>
<!--[stuff I don't want]-->
So how do I include the stuff I want in my webpage without including that stuff I don't need? is there a way to use the name attribute to isolate it somehow?
You can use iframe and a specific id of that particular div that you want to show and set the height and width of the iframe according to your target div.
see the example:
#project_summary {
width: 600px;
height: 220px;
padding: 15px 10px;
background:black;
}
<iframe id="project_summary" src="https://towkir.github.io/projectindex/projects.html#rsp" scrolling="no" frameborder="0"></iframe>
visit the link in the iframe separately to understand what is going on.
You can try
$('#target-div').load('http://www.example.com/Example.html form[name="windyNights"]');

Line break adjustment of div tag and input tags

I have some problem working with DIV Tag and Form input fields. I get the value of input field using javascript. Javascript working fine. It gets the input field value and displays in a DIV tag. The problem is, when i give a long input or long sentence, it displays in the div tag as it is. I want it to be displayed not in a long single line but in the form of paragraph. Here is my code.
<script>
function myFunc(){
var str = document.myform.aaa.value;
document.getElementById('mydiv').innerHTML=str;
}
</script>
<form>
<input type="text" name="aaa" />
<input type="button" value="Post" onclick="myFunc();" >
</form>
<div id="mydiv" width="500px" height="300px">Old text</div>
If i give it an input for example:
hello there, how are you hello there, how are youhello there, how are youhello there.
it displays it in a single line instead of paragraph format. I want it to display the above sentence in this form:
hello there, how are you hello there,
how are youhello there, how are youhello
there.
I have somewhat sort it out myself. I mean to say, if i write a sentence with spaces, it works fine but if there is a long line of letters without any space, then it does not work. What i want is, either i can type with space and without space, it should work both ways.
This doesn't have anything to do with javascript. By default a DIV tag will expand to 100% of its parent element.
If you set the width of the div to a specific percentage or pixel width, then the contents of that div will wrap accordingly.
You can use CSS to define the width, but you'll have to know how wide you would like to set it.
#mydiv {
width:50%; //I just guessed at this number
}
or
#mydiv {
width:100px;
}
alternately, you could use javascript to set it. (though it's probably best to set it using CSS)
document.getElementById('mydiv').style = "width:50%';
Try using css to set the width and height of the <div> rather than attributes.
jsFiddle
<div id="mydiv" style="width: 200px; height: 200px;">Old text</div>
Better yet create a style:
.comments {
width: 200px;
height: 200px;
}
<div id="mydiv" class="comments">Old text</div>
Use the word-wrap to fix the issue where there is no spaces.
word-wrap:break-word

Inine CSS for Text inside DIV

Inside the DIV Tag
<div name="layer1" style="background-color:lightblue;">
<hr>Site:Downtown DataCenter Device: 2KBS</hr>
</div>
Hi ,
I am using Inline CSS Styling .
Inside the hr tag of my Div tag i want to have the text "site" and "Device" as bold and with big font ?
How can i have it
Please advice .
Try putting your content in a p. hr is a horizontal rule which is an empty element w3c specifcation. Put the text that you want into span elements and then apply styling font-weight:bold;font-size:20px or whatever size you want.
Firstly, <hr> is not intended to contain anything, much like <img> or <br />.
Try this:
<div class="layer1">
<strong>Site:</strong> Downtown DataCenter <strong>Device:</strong> 2KBS
</div>
<hr></hr>
The CSS might look like this:
.layer1
{
background-color: lightblue;
}
.layer1 strong
{
font-size: larger;
}

Categories

Resources