Spacing different in original html rendering vs dynamic JS rendering - javascript

Here is a small part of my page:
<a href="#" onclick="PolicyViolation(<%: ViewBag.DeviceData[i].DeviceID%>); return false;">
<span class="policyViolationsNumber"><%= ViewBag.DeviceData[i].ViolationCount%></span>
<span>Policy Violations</span>
</a>
This renders out to have some space between the two spans.
In code, we update this in JS:
var spanViolationNumber = $('<span>')
.html(statusModel.Violations)
.addClass('policyViolationsNumber');
var spanViolationString = $('<span>')
.html('<%=ServiceSite.Resources.Resources.DEVICES_POLICY_VIOLATIONS%>');
var imageTag = $('<img>')
.attr('src', '/Content/images/error_error.png')
.attr('align', 'absmiddle');
var anchorTag = $('<a href="#">')
.append(spanViolationNumber)
.append(spanViolationString);
cell.empty();
cell.append(imageTag)
.append(anchorTag);
However, this renders out with no space between the spans. I've seen small issues like this before but never figured out what it is. You can ignore the image tag stuff, it is irrelevant.
EDIT:
Didn't know about this, I guess it's expected behaivor: http://jsfiddle.net/2MMuA/

The extra space is happening because of the way you are formatting your HTML.
The "span" tag is an inline HTML element. This basically means you need to treat it just as you would treat text on the page.
<span>Hello</span> <span>World</span>
<!-- Prints Hello World -->
<span>Hello</span>
<span>World</span>
<!-- Prints Hello World
The line break is where your extra space is coming from. -->
<span>Hello</span><span>World</span>
<!-- prints HelloWorld
This is how the ".append()" function is formatting the HTML.
It adds it literally right after the last character in the HTML. -->
In order to normalize this across the two different techniques, you either have to butt your "span" tags right up next to each other so the HTML doesn't add an extra space...
<span></span><span></span>
..or you need to manually add the space in your ".append()" function.
obj.append(' ' + spanTag);
I hope that helps!

Perhaps you could clarify .. are you talking about there being space between these spans?
<span class="policyViolationsNumber">12</span>
<span>Policy Violations</span>
Either way I would look at adding some padding or margin to your css to insure you get the space that you want OR at minimum (though not recommended) use an HTML encoded space like so

There is most likely spaces between your spans. If you put the spans exactly next to each other then there should be no spaces.
<span></span><span></span>

Related

Textarea.value doesn't manipulate the HTML

Setting the value of the textarea, won't be reflected in the HTML.
For instance,
If you have <textarea></textarea> in your HTML, and set its value to 'Hello' the HTML will remain unchanged and not <textarea>Hello</textarea>
I think this is what you want, use this to your w3schools example
<script>
function myFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
myTextarea.onkeyup=()=>myTextarea.innerText=myTextarea.value;
</script>
You seem to be working off some misconceptions. I take it you're expecting that line breaks in the text area will be reflected as line breaks in a paragraph if you insert it as the HTML of the paragraph. In HTML, all whitespace is collapsed into spaces, and line breaks in HTML source do not normally translate to breaks in HTML text flows. If you do want newlines to work in HTML, use a <pre></pre> element instead. Otherwise you'll need to convert newlines to <br> elements.
There's also the white-space CSS style that can change the way that whitespace is rendered.

How to wrap text within contenteditable with <em> tag when exceeding the character limit

Trying to handle the content of a reactive form control driven by contenteditable and the help of github.com/KostyaTretyak/ng-contenteditable directive.
Please see the StackBlitz where I'm at currently.
<div class="textarea"
formControlName="description"
contenteditable="true">
</div>
The contenteditable div is working great as a form control and I have its content as I type with:
this.form.controls['description'].valueChanges.subscribe(
data => {
console.log(data)
})
How can I wrap the typed content that is over the character limit with <em> exactly as Twitter's tweet-box version?
UPDATE:
Here's some sudo logic I would be applying to the contenteditable content as the user types
characters = 'Lorem ipsum dolor... ' (about 200 characters for testing)
inLimit = characters.substring(0, 140);
outLimit = characters.substring(141);
tagged = '<em>' + outLimit + '</em>';
final = inLimit + tagged;
console.log(final); // over the limit characters wrapped in <em> tag
That was quite fun :) See result https://stackblitz.com/edit/angular-b4mzej . It still have some weird bug with jumping cursor after first application and characters count once you added value then cleared it and try adding again starting from the point when 0 characters left, but when I debugged it I realized that stackblitz itself changing code slightly, so I believe it should work fine under normal conditions.
Main trick was to use proper propValueAccessor, see https://github.com/KostyaTretyak/ng-contenteditable#options
This is not possible using ng-contenteditable.
You should fork this library and extend it to support size limit and automatic inserting/removing of DOM nodes (callOnChange method).
See Insert html at caret in a contenteditable div which provides pure JS example http://jsfiddle.net/jwvha/1/.
You can enclose your content editable area under a css class (say .break_word), then specify a css code having the class style_
.break_word em {word-break : break-all}
Try if it can help you.

replace content of div with another content

I've been building a list of links, all of which should change the content of a div to another specific content (about 4 lines of stuff: name, website, contact etc.) upon a click.
I found this code:
<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
and used it in such a way:
<li class="pl11">
superlink')">Pomorskie</a>
</li>
And it doesn't work as I expected.
It changes hyperlinks text from 'Pomorskie' to 'superlink'.
The plain text works just fine but I need links.
here's the http://xn--pytyfundamentowe-jyc.pl/projektanci/kontakty-p/ (only two of them show anything)
But after trying all of your recomendations, I think I'd jump to different divs with #links, cause nothing worked with this :/
Thanks a lot for trying, and cheers :)
Just as a completely sideways look at this, I'd suggest avoiding the nesting weirdness / complexity, and reducing the problem down.
Setup the content in a hidden (ie. <div id="replacements">...</div>) Grab the innerHTML from the node you want, and be done with it.
Much easier to get replacement content from non-devs that way too, kinda works great if you're in a team.
// Probably better in a separate helpers.js file.
function replaceContentInContainer(target, source) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
Control it with: (lose that href=javascript: and use onClick, better as an event handler, but for brevity I'll inline it as an onClick attribute here, and use a button.)
<button onClick="replaceContentInContainer('target', 'replace_target')">Replace it</button>
We have our target somewhere in the document.
<div id="target">My content will be replaced</div>
Then the replacement content sits hidden inside a replacements div.
<div id="replacements" style="display:none">
<span id="replace_target">superlink</span>
</div>
Here it is in JSBin
Improve the dynamic nature of this by using Handlebars or another nice JS templating library, but that's an exercise for the OP.
edit: Note, you should also name functions with a leading lowercase letter, and reserve the leading uppercase style for Class names e.g. var mySweetInstance = new MySpecialObject();
The quotes are mismatched! So when you click you are getting a JavaScript error.
The browser sees this string:
href="javascript:ReplaceContentInContainer('wojewodztwo', 'superlink')">Pomorskie<
as:
href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="
Chnage the " inside to #quot;
<li class="pl11">
Pomorskie
</li>
Example fiddle.
Also note, using the href tag for JavaScript is a BAD practice.
You've got a problem with nested quotes. Take a look in your DOM inspector to see what the HTML parser built from it! (in this demo, for example)
You either need to HTML-escape the quotes inside the attribute as " or ", or convert them to apostrophes and escape them inside the JS string with backslashes:
<a href="j[…]r('wojewodztwo', '<a href="http://address.com">superlink</a>')">…
<a href="j[…]r('wojewodztwo', '<a href=\'http://address.com\'>superlink</a>')">…
See working demos here and here.
Better, you should use a onclick attribute instead of a javascript-pseudo-url:
<a onclick="ReplaceContentInContainer('wojewodztwo', …)">Pomorskie</a>
or even a javascript-registered event handler:
<li class="pl11">
<a id="superlink">Pomorskie</a>
</li>
<script type="text/javascript">
function replaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
document.getElementBId("superlink").onclick = function(event) {
replaceContentInContainer('wojewodztwo', 'superlink');
event.prevenDefault();
};
</script>
(demo)

jquery rearranging page elements

I have a body of text which is about 12 paragraphs long... inside the text are a couple of blockquotes which I would like to automatically highlight and rearrange throughout the document (every 3rd paragraph) and afterwards removing the blockquote so that the text appears twice. Once as a highlighted snippet in an automatically ordered position, and second in the original location without the block...
It sort of works, but I feel like I'm missing something because it doesn't follow the order. I would think it'd be (3,6,9, etc.) but it seems to be thrown off by something?
jQuery ->
content = $('article.city-review div')
content.find('blockquote').each (index) ->
line_space = (index+1)*3
quote_tag = '<span class=\"quote_left\">'+$(this).text()+'</span>'
content.find('p:nth-child('+line_space+')').prepend(quote_tag)
$(this).contents().unwrap().wrap('<p></p>')
UPDATE:
Input looks like:
<p>Text</p>
<p>More Text</p>
<p>Text</p>
<p>More Text</p>
<blockquote>Text</blockquote>
<p>Text</p>
<p>More Text</p>
<blockquote><p>Sometimes these appear</p></blockquote>
The output gives me empty p tags <p></p> and nested p tags <p><p>Something</p></p>
jQuery ->
content = $('article.city-review div')
content.find('blockquote').each (index) ->
position = [2,6,10]
line_space = position[index]
text = $(this).text()
quote_tag = '<span class=\"quote_left\">'+text+'</span>'
content.find('p:nth-child('+line_space+')').after(quote_tag)
$(this).replaceWith('<p>'+text+'</p>')
Making an array is an easy way to test out the spacing and unless you need an unlimited length could work. Remove the unwrap and use replacewith, maybe simpler for you and after instead of prepend unless you want the new quotes inside another tag.

Javascript or jQuery for Adding Style to Phrases on Page

I'm applying a style to a certain phrase on our website over and over again. Is there a way to search the page for instances of that phrase and apply that style automatically?
Example:
<div>
This is what you get from <span class="comp">Company Name</span>.
We do all kinds of things here at <span class="comp">Company Name</span>.
</div>
You could take a look at these questions:
Highlight a word with jQuery
How to highlight certain words with jQuery
Both of the top answers point to the highlight plugin for jQuery.
sure...
http://docs.jquery.com/Selectors/contains#text
$("div:contains('Conpany Name')").css("text-decoration", "underline");
var body = document.getElementByTagName("body")[0].innerHTML;
body.replace(/Company Name/g, '<span class="comp">Company Name</span>');
document.getElementByTagName("body")[0].innerHTML = body;
The above should get everything in the body and replace it with your span and that doesnt need jQuery.

Categories