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.
Related
I am using highlight.js for syntax highlighting in a webpage.
When I change the content by setting the relevant innerHTML using JavaScript, the content output on the page updates as expected. However the changed content is not highlighted in the browser.
What is the correct way to deal with this situation, generally or with highlight.js using only JavaScript, HTML and CSS?
I found a solution thanks to #Afsar's insightful comment.
The function initHighlighting from highlight.js:
initHighlighting()
Applies highlighting to all <pre><code>...</code></pre> blocks on a page.
... contains an internal check to see whether it has already been run. Since I was attempting to run it more than once, highlighting was not working correctly.
So one possible solution to updating highlighting after updating content via JavaScript with no page reload is:
var element = document.querySelector(".class_that_contains_code_blocks");
var blocks = element.querySelectorAll('pre code');
blocks.forEach(hljs.highlightBlock);
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.
I am trying to perform a jquery load of a html page into the main body of a page.
Using a div named sidebar_menu that is in the middle of the page,
i am performing a jquery load at the end(bottom) of the page.
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
This kinda works... the content is displayed, but the menu does not have the javascript functionality (expand, collapse, etc) applied to it. The styles have been applied, but the functionality of the menu is not there.
I can copy the contents of the html in place of the div, and the menu operations work.
Am i loading the included file too late in the stack? currently using the
jQuery(document).ready(function(){
$("#sidebar_menu").load("/sitemenu.html");
$("#sidebar_menu").page();
});
but is there better area to load the html file into the DOM, as the .ready seems to be too late in the page assembly stack to be operational.
thank you
There are many JQuery methods that strip Javascript. I learned it the hard way. Look into that. It may not be the problem you are guessing. The way around it is to not get the JS generated on the server side but to have it on the client side with parameter, config, etc. values passed as some DATA- element values from the server side for some HTML elements. That string that you assign to DATA- can be a JSON string too.
You should use jQuery .on() method see http://api.jquery.com/on/
I am not sure how your code looks like. But here is the idea. Take the closest container (that exists in DOM) of the element that will be loaded (not in DOM at that moment) and on that asign selector and action for elements to be loaded.
At the moment I'm working on a mobile website that stores pages in a local database. At the bottom are some basic buttons to navigate to other pages and when you press them I wanted to use jquery's .html function to replace the body content with other html strings from the database. The problem I found is when we go to our contact form page the user can't really use the form fields. They show up, but they're not clickable. I've also noticed that you can't execute javascript functions that are loaded in trough the .html function.
Hopefully you can help me with this problem or suggest a workaround. Thanks
Some jQuery functions strip out script and style tags (e.g. .replace()). That isn't a bug but documented somewhere – unfortunately I can't find that piece of documentation right now.
But that should be no problem in the case of form fields. They should get inserted without any problems.
Here is an example that illustrates your problem.
Explanation:
jQuery html seems to not process some tags, although it does. The problem is when trying to execute jQuery UI related functions on an element not within the DOM
the exemple above shows the difference between calling button jqueryUI function after and before appending the element to the DOM
a generic workaround to solve this problem is:
var div = $('<div></div>').hide().appendTo('body');
then do whatever you want with the div
I just discovered that the iframe version of the Facebook Like button doesn't honor its query parameters when the iframe is created with JavaScript, rather than included directly in the document's HTML.
Please have a look at this jsFiddle that I created:
http://jsfiddle.net/qQsCC/
I generated a Like button at the URL linked above and first included the HTML exactly as it was provided. Then, I broke it down into the JavaScript code needed to create and append an identical element to the DOM.
In the "Result" window, you'll see the HTML version of the button on top, and the JavaScript-created version below. While the value of the src attribute is identical for both (as well as all other HTML attributes), the lower button doesn't appear to honor any of the parameters that I've passed, such as colorscheme or font.
Does anyone know why this is happening, or have any suggestions for how I might avoid this behavior?
The use case here is that I'm creating HTML ads that will include the iframe version of the "Like" button; a requirement is that the ad can only load 50KB of data initially, then up to 1MB after window.onload has fired. Since the "Like" button weighs in over 50KB alone, I need to construct the iframe using JavaScript after window.onload rather than just including the <iframe> element in the ad's HTML.
When you add url using HTML, html entities are automatically decoded. This doesn't nappen in javascript. So you need to decode the url before passing it to javasript eg:
like.src = 'http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2F&send=false&layout=standard&width=450&show_faces=false&action=like&colorscheme=dark&font=arial&height=35';
Hope this helps
Updated JSfidle:
http://jsfiddle.net/qQsCC/1/