I have a script that takes text from a hidden div:
var content = column.find(".hidden").text().split('');, and splices it with random 1s and 0s to give a decryption effect. The script writes to another div: column.children(".code").text(content);
So I'm ripping text from .hidden, turning it into an array, splicing it (within setInterval() so it's animated) with a binary array, and putting it into a visible div. The problem here is I can't get any HTML inside the visible div, so I can't include linebreaks or any other useful things. I tried using .html() instead of .text(), but then it puts html into the visible div, instead of actually formatting the page with it. I tried to .append() the changes, but it never even showed up because I probably did it wrong. I was told I may be able to do this through node manipulation, but nothing I tried worked.
So the question is: How can I update the DOM so it shows the final HTML, change the text without destroying the html, insert properly formated HTML at the end, or some other solution I can't think of because I have no idea what I'm doing.
Edit: Here is a relevant fiddle. http://jsfiddle.net/13t31w5p/
The correct syntax to add content to an existing element is:
/**
* .append()
* {#link http://api.jquery.com/append/}
*/
$('div.mydiv').append('this text will be added at the end of the div. ')
Note that the .text() and .html() methods are more or less "conversion" scripts that manipulate existing content. Click the links to read more about them.
If this doesn't answer your question, please provide a bit more of a verbose example of what you're doing -- perhaps you could include the relevant code snippets and put them in something like JSFiddle or Gist.
Related
I've just learned about math MathJax. I've read some documentation, and it looks nice but If I understood it right it scans html page for equations and automatically replace them with HTML/SVG or whatever.
My concern is that I'm generating my page from raw text (simply strings) in JS and I would like to just simply pass certain parts of it to MathJax and get html string in return. I looked at the API but unless I'm missing something, there is no such option and I can only do things like MathJax.Hub.Process().
So it would look like
I'm creating and adding HTML elements to document based on my text.
I'm telling MathJax to search for the content I've just created.
MathJax is searching for text to parse and removing the content I've just added, striping out text, parsing....
MathJax is creating it's own elements add it to document.
Is there a way (without modifying the source code) to do something like this:
I'm passing text to MathJax, telling it what is the format.
MathJax is returning HTML text string.
I'm creating HTML element besed on that text and inserting it at desired place.
I hope I overlooked something.
Background
Based on today's XKCD I created the below script:
javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+)*/gmi,'curse').replace(/language/gmi,'word');
If you go to a site (e.g. http://en.wikipedia.org/wiki/Programming_language) and paste the above code (re-adding the javascript: if required) this performs a regex replace on the document's content, whilst preserving most formatting, creating some fun reading.
However, the look of the site is affected; presumably because I'm replacing innerHTML rather than just innerText (I guess; though not sure).
I can't simply replace innerText as all elements include their child's innerText in their own; doing this on the body element would remove all formatting, and doing it on every element would duplicate huge amounts of content.
Question
Is there a way to iterate through all nodes in an HTML document, via (minimal) javascript, replacing words in their immediate child text values whilst preserving their remaining content?
The Javascript that you have doesn't change the page at all. It reads the content of the body into a string, then changes the string. That doesn't affect the content.
The reason that the page changes is that the value of the script is the value of the string, so that is used as content for a new page. As that is just a HTML snippet without the head tag where all the styles and scripts are defined, you get an unstyled page with just the content.
If you want to change the page, you should put the string back as content in the body, then use void(0); as the last statement to prevent the creation of a new page:
javascript:var a=document.getElementsByTagName('body')[0].innerHTML;a=a.replace(/Program(\w\w+)*/gmi,'curse').replace(/language/gmi,'word');document.getElementsByTagName('body')[0].innerHTML=a;void(0);
for some reason when using mediaelement.js, it creates a div for the progress bar called "mejs-time-rail", but then proceeds to set the html width value to "0" through an inline style.
Since this div is created when the script runs, I cannot edit this property in the source code, but if I edit it (the inline style) in Firefox's inspector, I get the desired result. Also, it seems that this html property created by mediaelement.js overrides any css rules I set.
Any ideas how to circumvent this issue? Maybe editing the actual js script?
Thanks
I can't post a picture because I don't have enough reputation, but I can update this post with a screenshot when I do have enough and/or if it helps
First, it seems the issue is that as the DOM loads, the external script is setting that desired value to 0 like you said. Try adding a custom JavaScript/jQuery file that simply runs after the DOM is completed and
.find the element you want to edit. Then try
.attr('desiredAttr', 'new val');
this should find, and then reset the attribute to whatever you like. Even if the external script changed it on load.
We all know that MathJax renders elements on window onload by default (and can be refreshed using MathJax.Hub.Queue(["Typeset",MathJax.Hub]); Reference Link), but is there a way to 'unrender' the elements? So for example, after the page just loaded, I can click a button, and all the elements will turn back into their TeX code. Is that possible?
Well, the original TeX code is stored by MathJax, so you can use some javascript to put it back. There is an example of how to do this on the MathJax users forum that I think may be what you are looking for.
It seems that MathJax hides the original LaTeX code in an element called MathJax-Element-x, which contains the original code. So what I did was simply hide all elements with the class MathJax_Display, in which the formatted version appeared, and showed all elements starting with MathJax-Element-. Seemed to work fine.
EDIT: Instead of selecting MathJax_Display elements, I had to select all the elements inside MathJax_Display, like MathJax_Display *. I also had to change the type of element the LaTeX code was put in, as it was in a script.
I have two jsFiddles:
http://jsfiddle.net/kRyhw/3/
http://jsfiddle.net/kBMSa/1/
The first jsFiddle shows code which takes HTML and appends it to my ul element. Note that the svg's 'X' icon appears.
I tried to rewrite this code using jQuery's element creation technique, but the path never shows up. If I replace the appending iconPath code with .text("Hello") I see Hello appear. I do not see any CSS differences between the two versions, though.
Could someone shed some light on what is going on?
it's parsed as HTML using the browser's innerHTML property. innerHTML can't parse SVG or other non-HTML content...
I guess this article will put some shadow on your questions. It has an example you are looking for.
jquery's append not working with svg element?