Why this <p> is childNodes[3] in this DOM? - dom

Guys I got confused about DOM hierarchy. I have read that some browsers reads spaces and texts as nodes which is called Junk Artifacts of DOM.
So I want to understand how this <p>P1</p> is childNodes[3] in this DOM:
<div>
<p>P0</p>
<p>P1</p>
</div>
<button onclick="hideFn();">hideBtn</button>
<script>
function hideFn()
{
document.getElementById("myDiv").childNodes[3].style.background="red";
}
</script>

Your div contains:
0. A text node consisting of white space.
1. A p element node containing a text node consisting of P0.
2. Another text node consisting of white space.
3. A p element node containing a text node consisting of P1.
4. Another text node consisting of white space.
It's not that "some browsers read text as nodes" and that's somehow "junk" - text nodes are simply part of the DOM.
(And newlines, space characters, and all other forms of whitespace are text.)

Related

How to make the height of a list dynamic in jaspersoftt studio?

Good evening,
I have a list type element that contains two text boxes, when the first text box is empty it shows me the white space between the previous text box and the new one that is going to be printed.
However I would like to know If there is a way to reduce that blank space, that is to say that it is printed as if that record did not exist. As I mentioned above and probe with the print when expression and only "hide" but the blank space is not disappeared.

Redactor - Move back from li element to p element not possible

I use redactor for a textfield.
When I add a list inside the redactor field and underneath I want to commence with a normal paragraph text then its not possible to leave a bullet list.
Not with clicking 'enter' two times.
Not with clicking the li button and not even with highlighting the last li element and choose paragraph text in the toolbar.
There is just no way to move back to paragraph text. The same is with block quotes.
Does anyone experience a similar behavior?
Try to update Redactor because the last change-log fix your problem : http://imperavi.com/redactor/log/

Stop nicEdit from creating <p> tags?

I have nicEdit implemented in the backend for uploading news items, and in the frontend each newsitem has a square in front of the beginning of the text body (image attached). This only occurs in the first paragraph of the text.
Due to the paragraph tags added by nicEdit, the text is displayed on a different line than the square. I have searched in the nicEdit docs and in previously answered questions on here but could not find a solution. Is there any way to change the paragraph formatting in nicEdit to use br at the end of a paragraph instead of having it wrap the text with p tags? Or if not, to have Nicdit automatically add the square to the beginning of each text?
Thank you in advance for any help!!
http://i.stack.imgur.com/dxxtu.png
Edit: Turns out the p tags were not caused by the nicedit but by the users copy-pasting the articles. I have used this to remove formatting from pasted text, but the tags are still there (it seems to only remove font properties).
As a temporary fix I have added the square to the nicedit wysiwyg as initial text, so that it is sent to the db along with the rest of the text and inside the same paragraph.
I realized there's a line in the code you modified that specifies all the unwanted tags. You should add the paragraph there.
Search for
/* remove undwanted tags */
newSnippet = newSnippet.replace(/<(div|span|style|meta|link){1}.*?>/gi,'');
in the nicEditorInstance class, and change it to
/* remove undwanted tags */
newSnippet = newSnippet.replace(/<(div|p|span|style|meta|link){1}.*?>/gi,'');
Notice the "p" has been added. That will prevent nicEdit to wrap the paragraphs in tags.

CodeMirror : Start and end line numbers of the rendered DOM

As far as i know, codemirror renders only few lines into the DOM, if a file has lots of lines. Is there any variable or function that could give me start and end line numbers in the rendered DOM?
For example, if i have 1000 lines in my file and if i am in mid of my file, code mirror might have rendered only lines from 400 to 500 into the DOM. How can i get those start and end line numbers?
You can get the line numbers range of the visible area by calling cm.getViewport().
From the docs:
cm.getViewport() → {from: number, to: number}
Returns a {from, to} object indicating the start (inclusive) and
end (exclusive) of the currently rendered part of the document. In big
documents, when most content is scrolled out of view, CodeMirror will
only render the visible part, and a margin around it. See also the
viewportChange event.

In Tritium, how do I remove text from a node?

I have some HTML content structured like this:
<div>
random text I want to remove
<span>Important Text #1</span>
more text I want to remove
<span>Important Text #2</span>
</div>
How do I remove the text in this div while keeping the important content?
Use remove_text_nodes() to remove text.
Please check this url for solution :- http://tritium.moovweb.com/c3387d70958324469350596c6ef334a7da4ac4f1