How to display a javascript string with style - javascript

When I set a paragraph element to a javascript variable with innerHTML, the paragraph element is displayed without any CSS of its divs. I am also using bootstrap.
I have tried applying style to the paragraph itself, but it is not registered/displayed with the javascript variable.
Here is the HTML with the bootstrap styling and paragraph element
<div class="col-lg-3 col-xs-6">
<!-- small box -->
<div class="small-box bg-green">
<div class="inner">
<h3><p font="38px" id="bounce_rate"></p></h3>
<p>Bounce Rate</p>
</div>
<div class="icon">
<i class="ion ion-stats-bars"></i>
</div>
</div>
</div>
Here is the JS that sets the variable using innerHTML
var bounce_rate = document.getElementById('bounce_rate');
// response.result["values"][0][0] is from JSON and works as intended
bounce_rate.innerText = response.result["values"][0][0];
I expected the styling tags applied to the paragraph element to be applied to the javascript string. The string is displayed, it just does not have styling.

The element does not have a 'font' attribute, so if your intend is to give the <p> element a font-size, the styling should be like this:
<h3><p style="font-size:38px" id="bounce_rate"></p></h3>
Additionally, nesting a paragraph text inside a heading text is not the right convention. If you wish to have a specific text inside <h3> tag to have a font-size of 38px, use <span> tag instead:
<h3><span style="font-size:38px" id="bounce_rate"></span></h3>

Related

Append a div with dynamic text to another div without losing the data - javascript

I have a question that might seems easy but I can't seem to find a solution.
<div class="text">
<p class="paragraph">
<span>The main text is this one </span>
<span class="bold">with bold text near</span>
</p>
<p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p>
</div>
So basically, I have to unite all these paragraphs + spans together on one line without losing the dynamic content I am getting in the 3rd paragraph.
The final message should look like: "The main text is this one with bold text near, add me near the other paragraph without losing the dynamic content."
How can I achive this? I can't use innerText/innerHTML, appendchild and I can't harcode the paragraph with the dynamic content. Many thanks.
Without innerText, innerHTML and DOM manipulation functions there is not really any way to change the document?
I am assuming that you can use them, but that you've not managed to make it work?
Please add more detail to your question if this is not the case.
Without knowing what your desired markup is, I've just removed all the p.paragraph and replaced them with a textNode with their innerText. Also setting the display: inline to p.bold-dynamic to remove the new line(s)
I've updated the code to now just insert lots of display: inline
// find all p.paragrah inside div.text
document.querySelectorAll("div.text > p.paragraph").forEach((element) => {
// insert a textNode with the innerText of the p.paragraph
//element.parentNode.insertBefore(document.createTextNode(element.innerText), element)
// set p.bold-dynamic display: inline
//element.parentNode.querySelector("p.bold-dynamic").setAttribute("style", "display: inline;")
// remove the p.paragraph
//element.parentNode.removeChild(element)
element.setAttribute("style", "display: inline;")
element.querySelectorAll("*").forEach((tag) => {
tag.setAttribute("style", "display: inline;")
})
element.parentNode.querySelector("p.bold-dynamic").setAttribute("style", "display: inline;")
})
<div class="text">
<p class="paragraph">
<span>The main text is this one </span>
<span class="bold">with bold text near</span>
</p>
<p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p>
</div>
<div class="text">
<p class="paragraph">
<span>The main text is this one </span>
<span class="bold">with bold text near</span>
</p>
<p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p>
</div>
<div class="text">
<p class="paragraph">
<span>The main text is this one </span>
<span class="bold">with bold text near</span>
</p>
<p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p>
</div>

Can I add div contents after defining a div child using JavaScript?

Can I add div contents (innerText / textContent) after adding a div in the parent class using JavaScript. I know it's confusing and also I am not sure whether my demand is correct or not.
Can someone just help how to achieve below HTML results using JS.
<div class="container">
<div class="mesg left">
<div class="username">
You
</div>
The main content goes here
<span id="time">08:23am</span>
</div>
</div>
I had tried to achieve this but I my case the content comes up... Like(see the output html from what I have did from JS)
<div class="container">
<div class="description">
The main content goes here
<div class="name">
James
</div>
<span id="time">08:23am</span>
</div>
</div
You can use Node.insertBefore to place the text before the timestamp.
Given your HTML this would work:
const time = document.getElementById("time")
const content = document.createElement("p")
content.innerText = "The main content goes here"
document.getElemenstByClassName("mesg left")[0]
.insertBefore(content, time)

Select span tag nested inside multiple div blocks

How can i select this specific span tag and change the color of the text to white, without using id's? This is the friend section on the page younow, i try to inject a code to change the css of the page, so i am not able to add any id's..
<div id="leftsidebar">
<div class="channel-menu-content">
<div class="left-panel">
<div class="panel-title nowrap short-text" ng-if="leftSidebar.session.user.userId !== 0" ng-click="leftSidebar.friendsCollapsed = !leftSidebar.friendsCollapsed">
<span translate="sidebar_online_friends">Freunde</span>
</div>
</div>
</div>
</div>
I found this, and tried it like this:
$("div#leftsidebar .channel-menu-content.left-panel.panel-title span").css("color","white");
$("div#leftsidebar .channel-menu-content.left-panel.nowrap span").css("color","white");
$("div#leftsidebar .channel-menu-content.left-panel.short-text span").css("color","white");
But no success.
You dont have spaces between class names
$('#leftsidebar .channel-menu-content .left-panel .panel-title span')
You can use attribute equals selector
$("span[translate=sidebar_online_friends]").css("color", "white")
Assuming Jquery is loaded in the page you can select the span element using:
$("span[translate='sidebar_online_friends']")
you could then change the colour by doing:
$("span[translate='sidebar_online_friends']").css("color","#FFF")

jquery changing clone style changes original style

I am trying to add change the inline-style property of my html. For this, I cloned a div and append it to another div. I am also trying to display the HTML contents in textarea after stripping the inline-style. Here's my code
//Store html in temp div
$("#html_code").clone().appendTo("#temp_html");
//remove style attribute
$("div.animation-1 span.front").removeAttr('style');
//clone this and attach to textarea
var html_extracted = $("#temp_html").clone().html();
$("#show_html").text(unescape(escape(html_extracted)));
Here is the #html_code:
<div id="html_code">
<!--HTML Code-->
<div class='animation-1'>
<span id="box" class='letter hidden'>
<span class='back'>Android</span>
<span class='front'>T</span>
</span>
</div>
</div>
Here is the #temp_html:
<!--Stores cloned html to remove its style-->
<div id="temp_html"></div>
Here is the #show_html:
<!-- HTML Code display -->
<div id ="html-code-area" class="codearea">
<textarea id="show_html" cols="58" rows="20">
HTML will be displayed here
</textarea>
</div>
But when the clone is changed, it changes the original too. Is there a way to change the clone only without changing the original?
Also, the text in textarea keeps adding the same code again and again. How can I replace everything in the textarea with new contents?
I checked your code in a fiddle, - it works as expected with clone(), except that you remove the style attr from both nodes. You should select only the temp html:
$("#temp_html div.animation-1 span.front").removeAttr('style');
and about replacing the text in the textarea - you need to empty #temp_html before doing a new copy, like this:
$('#temp_html').empty();
The text inside #show_html is always replaced, it's just that #temp_html had several nodes attached.
here's the new fiddle: http://jsfiddle.net/WdTum/3/

How to make a template content non editable in tinymce

I've crated html template file, I put some elements inside that template are non editable.
template.html contains
<body>
<div>This is a sample template </div>
<div contenteditable="false" style="color:red">Read Only Text</div>
</body>
on inserting this template file into the textarea the second div is editable, while inspecting over that div I've seen that the attribute contenteditable="false" is not there on insert, but its there on the preview before the insert of template.
Any help gratefully received!
From this page: http://www.tinymce.com/tryit/noneditable_content.php
Its using a textarea:
<textarea name="content" style="width:100%">
<p>Text with a <span class="mceNonEditable">[non editable]</span> inline element.</p>
<p class="mceNonEditable">Noneditable text block with <span class="mceEditable">[editable]</span> items within.</p>
<p>Text with tokens that isn't [[editable]] since they match the noneditabe_regexp.</p>
</textarea>
The key here is putting a class of mceNonEditable in your element:
span class="mceNonEditable"
Then whatever non-editable content you have, wrap it in greater than and less than:
>You cannot edit me<
Then finally close the element:
/span
I think you can also change the mode (in the example they're using textareas, so I guess you can also use divs or spans) when initializing tinymce:
tinyMCE.init({
mode : "textareas",
noneditable_regexp: /\[\[[^\]]+\]\]/g
});
There's also noneditable_regexp which lets you specify a regular expression of non-editable contents.
I think this is easier than using html entities.
I haven't actually tried it but that's the way I interpret the example in the page.

Categories

Resources