Develop Reference

LineBreak with HTML Tag

How can I split a string at its line breaks.
The Code below works fine. But I am looking for different solution without using "dangerouslySetInnerHTML".
Maybe someone knows.
<div> <div dangerouslySetInnerHTML={{__html: String.split("\n").join("<br />")}} </div>

You can use CSS to use white-space: pre;, which will respect the line breaks in the text, within the targetted element.
.respect-line-breaks {
border: 1px solid #444;
white-space: pre;
}
<div class="respect-line-breaks">This
is
spread
over
multiple
lines
</div>
Is an example.
You can also use the HTML <pre> tag, instead of a <div> if you'd prefer, which negates the need for the CSS. <pre> is also supported in much older browsers too, if that's something you need.
One thing to be aware of though is that if later on when developing your application, you loop through all of your <div> elements, it won't pick up the <pre> elements, which is why I would personally use the CSS solution, if at all possible.
This also means that you can use something like a <p> tag, instead of a <div>, and keep all your normal text styling, etc., in place.

Texts with same color code is different when loaded with ajax

I'm working on a webshop with green as a primary color.
Everything works great, but I noticed that text within a ajax loaded div is brighter then it should be. The regular loaded text is noticeably less bright but both texts have the exact same color code.
I don't think I can reproduce it here without posting the entire CSS and HTML file, but here is a HTML snippet of text on normal page load:
<div class="primary-product-text vis-product-name">Knie-insteekkoppeling, kunststof zwart, M6</div>
And a snippet from the dynamically loaded content:
<span class="primary-product-text">Knie insteekkoppeling, kunststof zwart, M6</span>
CSS:
.primary-product-text {
color: #01a85e;
}
.vis-product-name {
display: block;
height: 38px;
}
Link: https://www.technicomponents.nl/nl/p/pneumatiek/insteekkoppelingen/knie-koppelingen/
The shown products have a green color. If you click on the cart icon next to a product or search for "knie" you'll see that the same colorcode produces a brighter green color.

It might be browser rendering.
I noticed that even though the CSS seems the same, the pixels are not generated the same. This could be related to the font being relatively thin and -webkit-font-smoothing: antialiased; being turned on.
While looking at it, I also realized that the text in the popup is different, please my best guess would be to use the exact same text. (the minus between Knie and insteekkoppeling)
(the first one is the web-page, the second one from the popup)

Found the answer, it was because of CSS animations that caused some text rendering issues. I had several CSS animations like transform and scale on the container and individual divs.
The solution was to add the following CSS code to the main container class:
-webkit-backface-visibility: hidden;

tinymce, automatically add style attribute to content

I'm working on a project that uses tinymce as RTF editor where users insert formatted content that will be saved as text as is. With all HTML tags becouse the content will be used in varous parts as HTML.
I'd like that all generated HTML elements have a default style attribute, something like:
<p style="margin: 0 10px; line-height: 1">
Hello World
</p>
<h1 style="margin: 0 10px; line-height: 1">
Hello World Again
</h1>
I've tried to add content_style: "* { margin: 0 10px, line-height: 1 }" to tinymceOptions but it doesn't works

TinyMCE has no built in way to force all block elements to have a pre-defined set of styles. TinyMCE does fire a variety of events when things happen in the editor (e.g. inserting content, a new block is created, a key is pressed) and you could use those to try to identify any time a new block is being placed in the editor and add your styles.
https://www.tinymce.com/docs/advanced/events/
Here is a TinyMCE Fiddle that shows some events in action:
http://fiddle.tinymce.com/2fgaab
The hard part here is that there are lots of ways to modify what is in the editor and to get this 100% right you need to catch all those events/activities.
The alternative is to do this when the content is submitted to the server and iterate over the block elements at that time.

How do I unbold text beside javascript?

I've created a website: www.mvscaccounting.com and at the bottom of the website I have a search engine made from javascript. Beside it, I wanted to write all rights reserved. However whenever I write anything beside the search engine in dreamweaver, it turns bold!
Problem: I can't get it to unbold! it's not bold in dreamweaver, but on website it is
I tested it out, and the unintentional bold text starts when the javascript form is made. If you go to my website, and view page source you can see all the surrounding code.
**** UPDATE: THE PROBLEM HAS BEEN SOLVED, IT WAS A MISPLACED H3 TAG ****

It's bold because it is inside an <h3> element, which is rendered with bold text as defined by the default stylesheet for HTML.
Here's a snapshot of the document in Chrome:
There are several ways to override this. Try adding this to your stylesheet:
.red { font-weight: normal; }
This will cause all elements that are marked with class="red" to use the normal font-weight, even though they're embedded in an element that should be rendered in bold (like <h3>).

You could try adding this rule to the "red" class.
font-weight: initial;

JS/CSS/XHTML: Don't copy specific text during copy events

I'm looking for a way to disable the copying of a specific area of text when you use Ctrl + C, etc. Whether I have to write the text a different way or not.
http://gyazo.com/721a0a5b5af173beb1ad3305633beafb.png
Above is what this is for. It's a syntax highlighter I have been working on (3 languages supported so far). When the user selects ANY text in any way, I don't want the line numbers to be copied.
I can't think of a way to display line numbers, without them actually being there.

As long as the line numbers and the source code are mixed together, this is going to be tough to prevent programmatically, if not impossible.
The ideal way would be having the source code in an actual container of its own.
Open a document inspector and look at how Github do it, for example: https://github.com/jbrisbin/riak-exchange/blob/master/Makefile
they have a separate <pre> element containing the line numbers, and a <table> cell containing the code. (I assume selecting is a reason why they use tables here, but I do not know for sure.)

Give this a try...
Demo: http://jsfiddle.net/wdm954/UD8Dq/7
I layered the div so the code div is on top and the numbers are behind. When you copy and paste you should just get the code.
.lines {
position: absolute;
width: 80%;
color: #666;
}
.lines pre:nth-child(odd) {
background-color: #EEE;
}
.code {
position: absolute;
z-index: 2;
padding-left: 5%;
width: 80%;
}
<div class="box">
<div class="lines">
<pre>1</pre>
<pre>2</pre>
<pre>3</pre>
<pre>4</pre>
</div>
<div class="code">
<pre>
code
code
code
code
</pre>
</div>
</div>

Setting user-select, -moz-user-select, and -webkit-user-select to none might work. For IE, you will need to handle onselectstart and return false.
This will prevent people from selecting the text, but I don't know what happens when it's beside other text that you attempt to copy.

I know that this question is three years old, but with HTML5 you can store line numbers in a data attributes and use CSS2 to display the text. This should prevent line numbers from being copied.
HTML
<span data-line-number='1' class='line'></span>
CSS
.line:before {
content: attr(data-line-number);
}