If you visit a page with MathJax on it, you will see raw latex for a moment, before is is processed and turned into nice "math". Is it possible to not show that raw source, and only display the math once it is ready?
Example page: http://www.mathjax.org/demos/tex-samples/
It depends what you mean by that. Naturally, what's in the page will be displayed and if you rely on JS to remove it then there's always a chance it will be visible for a minimal amount.
The straight-forward approach is to hide your content and tell MathJax to unhide it once typesetting is done. (This will depend on the complexity of your content and your design.)
This sample (which can be found in the main code repository) shows as simple approach:
a) set visibility:hidden on some global element
b) Add a function to the MathJax queue to change it back once MathJax layout is done. E.g.,
<script type="text/x-mathjax-config">
MathJax.Hub.Queue(function () {
document.getElementById("hide_page").style.visibility = "";
});
</script>
Related
I am new to coding and trying to write elementary math functions using MathML on MathJax 2.6.1. We recently acquired the function to be able to "carry" numbers in long addition, subtraction, etc.
Can someone show me how to implement this extension?
It is not clear if you are asking how to write MathML that includes <mcarries>, or if you are asking how to get MathJax to process <mcarries> elements. For the former, see the MathML specification examples. For the latter, you need to load the mml3 extension, which says to include
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
MathML: {
extensions: ["mml3.js"]
}
});
</script>
somewhere before the script that loads MathJax.js itself.
I understand that the background page of a Chrome extension is never displayed. It makes sense to me that a background page should contain only scripts. In what situations would HTML markup ever be needed?
At https://developer.chrome.com/extensions/background_pages there is an example with an HTML background page, but I haven't been able to get it to work (perhaps because I am not sure what it should be doing).
Are there any examples of simple Chrome extensions which demonstrate how HTML markup can be useful in a background page?
Historical reasons
The background page is, technically, a whole separate document - except it's not rendered in an actual tab.
For simplicity's sake, perhaps, extensions started with requiring a full HTML page for the background page through the background_page manifest property. That was the only form.
But, as evidenced by your question, most of the time it's not clear what the page can actually be used for except for holding scripts. That made the entire thing being just a piece of boilerplate.
That's why when Chrome introduced "manifest_version": 2 in 2012 as a big facelift to extensions, they added an alternative format, background.scripts array. This will offload the boilerplate to Chrome, which will then create a background page document for you, succinctly called _generated_background_page.html.
Today, this is a preferred method, though background.page is still available.
Practical reasons
With all the above said, you still sometimes want to have actual elements in your background page's document.
<script> for dynamically adding scripts to the background page (as long as they conform to extension CSP).
Among other things, since you can't include external scripts through background.scripts array, you need to create a <script> element for those you whitelist for the purpose.
<canvas> for preparing image data for use elsewhere, for example in Browser Action icons.
<audio> for producing sounds.
<textarea> for (old-school) working with clipboard (don't actually do this).
<iframe> for embedding an external page into the background page, which can sometimes help extracting dynamic data.
..possibly more.
It's debatable which boilerplate is "better": creating the elements in advance as a document, or using document.createElement and its friends as needed.
In any case, a background page is always a page, whether provided by you or autogenerated by Chrome. You can use all the DOM functions you want.
My two cents:
Take Google Mail Checker as an example, it declares a canvas in background.html
<canvas id="canvas" width="19" height="19">
Then it could manipulate the canvas in background.js and call chrome.browserAction.setIcon({imageData: canvasContext.getImageData(...)}) to change the browser action icon.
I know we could dynamically create canvas via background.js, however when doing something involving DOM element, using html directly seems easier.
I have some MathJax on my webpage and would like nothing to appear until the MathJax has finished processing my equations: no raw LaTeX and no loading progress indicator.
Is there a way to accomplish this with MathJax configuration settings?
Hey if you still need an answer, try the following.
If you call MathJax.Hub.Config(), pass the parameter preview: "none" to the tex2jax object in the config. Like so:
MathJax.Hub.Config({
tex2jax:
{
preview: "none"
}
});
This will not show any raw tex commands that MathJax will pick up. It will allow to you still display other elements in your markup so your page doesn't look blank as the browser renders it.
Hope this helps.
VisualForce pages can have the format:
<apex:page standardController="Case" >
<div id="content"></div>
<script>
... javascript to render a UI into #content ...
</script>
</apex>
which means it can appear on the "Case" layout. If you want a generic VisaulForce page (appearing all alone on a tab, let's say) you can remove the standardController parameter:
<apex:page>
...
</apex>
Is there a way to specify that a single VisualForce page can appear anywhere? (In our case, it's a javascript utility which is not layout-dependent).
I'm new to SalesForce, and the closest I could come up with would be to dynamically populate the standardController field (if that is supported) but I feel there must be a better way. Any help is greatly appreciated!
Do you mean it's a piece of javascript you can include in other pages? If so you should be doing it as a component, or you could put the JS in a static resource and include that in your pages.
If it's actually a page, you can include it in a page layout as well, though it's a little clunky and goes in an iFrame so that would probably cause problems for you.
I have a HTML document where the body contains dozens of divs, all listed sequentially. (It's a layout of small screenshots.)
The appearance and layout of each div is handled by CSS.
I wish to selectively hide some divs, depending on some state values. A javascript function "hideSomeDivs()" has been create to do this. (The function iterates over all divs, setting each element's style.display property to "none" as required.)
The problem: calling hideSomeDivs() function from will be too late: the page is already loaded and the visual changes will not be displayed. The original layout is maintained.
Q. how/where can I call this function such that the affected divs will be hidden, and all layout adjusted accordingly? Thanks.
Further information:
apart from javascript interactivity, the page is static (i.e. there's no server-side processing available).
also, I'm trying to avoid any "pop" where elements are shown/hidden after the page is loaded and drawn to the window.
also, I need for the layout to be re-evaluated and re-drawn. e.g. if I hide divs 1 to 4, but show div 5, then div 5 should appear at the top of the page.
Think about it the other way round - hide all your divs by default, and then use the javascript to show them as needed.
Of course you could just eliminate the need for the javascript if you have a server side language (i.e. PHP, ASP.NET) that is constructing the page, then you can just set their hidden state correctly to begin with.
In your HTML code put in a style code that hides the div by default. This will be evaluated much earlier than the Javascript.
Do you possibly want to maybe call the "hideSomeDivs()" function on the onload event of the body element.