We Keep Coding

Only apply styling to selected text in content editable <p>

Problem
Hi, I have some code that when a button is clicked, all of the content in a contentEditable <p> tag will have a font-weight of 600 (bold).
What I'm wondering is how can I make it so when the button is pressed, rather than style all the content in the p tag to 600 font weight, only style the selected text. For example, if you only highlight the first two words of the p tag and press the button, only the first two words will have their font-weight changed.
Image example
In the example, when the button is pressed, only the first two words would have their font-weight changed.
Link to the fiddle containing code: https://jsfiddle.net/AidanYoung/9tg4oas5/

here is your solution.
function changeBold() {
const text = window.getSelection().toString();
var btn = document.createElement('span');
btn.innerHTML = text;
btn.style.fontWeight = 'bold';
document.execCommand('insertHTML', false, btn.outerHTML);
}
<p contenteditable="true" id="contenttxt">
Some text in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>

You can use the span label and add ID
function changeBold() {
document.getElementById("strongC").style.fontWeight = "600";
}
<p contenteditable="true" id="contenttxt">
<span id="strongC">Some text</span>
in this paragraph tag
</p>
<button onclick="changeBold()">Bold selected text</button>

How to get paragraph data in textarea in angularjs?

how can I get paragraph content text in textarea value
<p ng-model="extrap" >Some parragraph content</p>
<textarea ng-model="oneps"></textarea>
<script>
(function() {
angular
.module("TextAngularDemo", ['textAngular'])
.controller("DemoController", ['$scope', 'textAngularManager', DemoController]);
function DemoController($scope, textAngularManager) {
$scope.oneps = {{extrap}}
};
})();
</script>
I want paragraph text in textarea box with prefilled paragraph text

I think you need to load a paragraph and text area with the same content, but you don't need to update the paragraph while the textarea value is changed. In that case you can go for one way data binding in angular js.
This can be achieved by adding :: inside your interpolation symbol like {{::yourModalValue}}
See the example below to see the implementation.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.myParagraphContent = "Some initial content.";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<b>Change the text area fild and see the change in me</b>
<p>{{myParagraphContent}}</p>
<b>Change the text area fild and see I won't be changes</b>
<p>{{::myParagraphContent}}</p>
<textarea ng-model="myParagraphContent"></textarea>
</div>

How to make text hidden or revealed when inside or outside a <div>?

I have some text like this:
Once upon a time, <div class="light">there lived</div> a cat.
The <div class="light">cat liked</div> to watch fish swim.
I need to place some text, in a <div> e.g. <div class="hidden_when_inside">text</div> which is hidden if placed inside <div class="light">, but not hidden when outside. E.g.:
Once upon a time, <div class="light">there <div class="hidden_when_inside">this text is invisible</div> lived</div> a cat.
The <div class="light">cat liked</div> to watch <div class="hidden_when_inside">this text is visible</div>fish swim.
Similarly, some text placed in <div class="hidden_when_outside"> will be hidden only when outside of <div class="light">.
Here hidden means:
The text cannot be seen.
The text cannot be selected.
The text occupies no space.
The text does not interfere with the formatting of the other text.
Is there any way to hide or reveal text depending on whether or not it appears within another <div>?

Use the parent selector to hidden the inside element like below.
.light .hidden_when_inside{display:none}
FIDDLE DEMO

This can be done using pure css using the child selector > (note this will only effect immediate children so if the use case is that .hidden_when_inside can be nested several layers deep inside a .light then go with .light .hidden_when_inside)
.light > .hidden_when_inside{
display:none
}
Once upon a time, <div class="light">there <div class="hidden_when_inside">this text is invisible</div> lived</div> a cat.
The <div class="light">cat liked</div> to watch <div class="hidden_when_inside">this text is visible</div>fish swim.

If you want to display it later, you need to dive into JavaScript, for instance:
document.getElementByTagName('hidden_when_inside').onclick = function() {
var className = ' ' + myButton.className + ' ';
this.className = ~className.indexOf(' active ') ?
className.replace(' active ', ' ') :
this.className + ' active';
}

Mouse wheel scroll event

What I want is : when mouse points on a div, page's scroll bar doesn't scroll. Is this impossible? When I do this, the page's scroll bar always scrolls. Here is a piece of the javascript code:
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome/Safari
How to do that?

Here you go:
var noscroll = document.getElementById('noscroll');
var locked, lockedX, lockedY;
noscroll.addEventListener('mouseover', function (){
locked = true;
lockedX = window.scrollX;
lockedY = window.scrollY;
}, false);
noscroll.addEventListener('mouseout', function (){
locked = false;
}, false);
window.addEventListener('scroll', function (e){
if(locked === true){
window.scrollTo(lockedX, lockedY);
e.preventDefault();
}
}, false);
Change the variable noscroll to whichever element you don't want to allow scrolling on.
Demo

You can basically achieve it through css by specifying width, height and overflow properties for your div:
<div style="width:100px; height:100px; overflow: auto;" >
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
text text text text text text text text text
</div>

Show/hide text by spiting it with html comment in div

How can i split some text in div using html comment.
Lats say i haw:
<div id="id1">Some first text <!--more--> here.</div>
<a id=id1>Show/Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a id=id1>Show/Hide</a>
I wont a jquery or javascript to show or hide text after<!--more-->.
Thanks

You can try something like this:
Given markup:
<div id="id1">Some first text <!--more--> here.</div>
<a>Hide</a>
<div id="id2">Some second text is <!--more--> right here.</div>
<a>Hide</a>​
Add the following javascript:
//1. On page load, wrap text to be hidden in <span>
$(function() {
$("div").each(function() {
var html = $(this).html();
$(this).html(html.replace('<!--more-->', '<span class="hiddenText">', html) + '</span>');
});
// 2. Toggle visibility of span tags when clicking link
$('a').click(function() {
if ($(this).html() == 'Hide') {
$(this).prev('div').children('.hiddenText').hide();
$(this).html('Show');
} else {
$(this).prev('div').children('.hiddenText').show();
$(this).html('Hide');
}
});
});
Check my jsFiddle for a working example.
UPDATE: Updated solution to not rely on separate CSS class to hide/show text.