I have a div in my HTML page as follows:
<div class="well editor" id="highlighted-text"
style="overflow: scroll; overflow-x:hidden;height:500px;" contenteditable></div>
When I select a portion of a text inside the div and click on a button, I want to highlight the selected text.
I understand that this can be done by adding a span with a class selector, around the selected text, but I am having trouble creating the span around the selected text:
var node = window.getSelection().focusNode;
$(node).wrapInner("<b></b>");
This doesn't work. Your help is appreciated. Thanks in advance.
I got it... I did this:
var selection= window.getSelection().getRangeAt(0);
var selectedText = selection.extractContents();
var span= document.createElement("span");
span.style.backgroundColor = "yellow";
span.appendChild(selectedText);
selection.insertNode(span);
Maybe you do not need to create such a SPAN by using the selection pseduo CSS attribute for styling:
https://css-tricks.com/overriding-the-default-text-selection-color-with-css/
Related
I need a simple and pure javascript script that toggle a custom tag (like <mytag>some text</my tag>) in a contenteditable div. Any ideas?
You cannot outright replace an element's tag with JavaScript.
However, you can create an element on the fly, and set the contents of that element to be the original element.
This can be seen in the following:
var e = document.getElementsByClassName('editable')[0];
e.onclick = function() {
var d = document.createElement('textarea');
d.innerHTML = e.innerHTML;
e.parentNode.replaceChild(d, e);
}
<div class="editable">Text</div>
As for toggling it, you'd need to set the element back to a <div>.
Hope this helps! :)
I want to select the p tag and style it within a content class div. Here is the example HTML:
<div class="content">
<p> this is paragraph </p>
</div>
I want to select and style the p which is immediately after the div. The p has no ID or class.
How can I select it via JavaScript?
This can be done using querySelector. You did not specify minimum browser requirement.
var p = document.querySelector(".content p");
p.style.color = "red";
http://jsfiddle.net/g35ec/
You can use querySelector
document.querySelector('.content p').style.color = 'red';
if you can get access to the div, you can use
var ps = divObject.getElementsByTagName('p'); //ps contains all of the p elements inside your div
var p = ps[0]; //take the first element
to style tag use it normally as you do
in the style tag or if you use a separate css file.
Have a look at this fiddle it might help you
http://jsfiddle.net/3uUjf/
p{
background-color: cyan;
}
I am appending the text to the div like
span.insertBefore("#text");
here span represents the text that is appending. How can i get the text on any other event like button click etc.
You need to use text() function of jquery element using selector
txt = $("#text").text(); //id selector
txt = $('.classOfElement').text() //class selector
You can also get the text by using javascript like:
var text = document.getElementById('#text').innerHtml();
Sorry, this may be kind of weird problem:
I have an existing HTML code, which I can not directly edit or delete parts of it. The problem is: Inside a div-element in this code, there is some text which I want to hide. There are also another element inside of this div, which I don't want to hide. It looks something like this:
<div>
....Text I want to hide....
<table> ... Text I don't want to hide...</table>
</div>
My question: Is it possible to hide the "....Text I want to hide...." while not hiding the "... Text I don't want to hide..."? (for example using javascript?)
var txt = div.childNodes[0];
var range = document.createRange();
range.selectNode(txt);
var span = document.createElement("span")
range.surroundContents(span);
span.style.display = "none";
See it here: http://jsfiddle.net/KZVDf/
If you want to remove the text, you can write:
div.removeChild(div.firstChild);
(where div is a variable referring to this <div> element).
If you want to wrap it in a <span> that you can then hide and unhide at will, you can write:
var span = document.createElement('span');
div.insertBefore(span, div.firstChild);
span.appendChild(div.firstChild);
(where div is as before).
Surround text which you want to hide with span and set to that span display:none. Example:
<div>
<span style="display:none">....Text I want to hide....</span>
<table> ... Text I don't want to hide...</table>
</div>
Or make it with hidden with script:
$('div span').show(); // Show hidden text in span
$('div span').hide(); // Hide text in span
I have appended a textbox to a div area. However I want it to goto a new line in that div after it does that, so my for loop prints a column of textboxes instead of a row.
I tried this:
<div id="timearea"> </div>
var br = '<br/>';
br.appendTo("#timearea");
However this does not work. What would the code be?
You would need to create the element using the createElement() method then append the child to the element using the appendChild() method
var br = document.createElement("br");
document.getElementById("timearea").appendChild(br);
I suggest you apply CSS styling to your divs to control how they are laid out. You can add attributes to style inline or (preferably) add classes to assign styles via JavaScript.
The display attribute controls the flow - display:block should do it.
.my_block_class {
display:block;
}
You can then add the class with JavaScript like so:
document.getElementById("timearea").className += "my_block_class";
Or, if you want to do it without classes:
document.getElementById("timearea").style.display = "block";
Not sure if you mean textarea or input type="text" but regardless, it is better to do this in CSS. In your CSS file or inline style description add:
#timearea input {
display:block;
}
If it's an input element you are adding, or:
#timearea textarea {
display:block;
}
If it's a textarea.