innerHTML not working on mobile [solved]
1,022 views
Skip to first unread message
spamd...@gmail.com
Sep 4, 2014, 5:48:43 PM9/4/14
to mathja...@googlegroups.com
Managed to solve the problem, but thought I would share.
This page: http://users.telenet.be/derick/test.htm will display x^3 correctly on firefox and internet explorer, but will display as `x^3` on chrome, safari mobile. To fix the problem, the Math.Jax.Hub.queue line needs to be added. With the fix added on http://users.telenet.be/derick/test2.htm it will display correctly on mobile.
This is explained on http://docs.mathjax.org/en/latest/typeset.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>
</head>
<body onload="my_onloadfunction()">
<p>`x^2`</p>
<p id="onload_paragraph"></p>
<script>
function my_onloadfunction() {
var x = document.getElementById("onload_paragraph");
x.innerHTML = "`x^3`";
MathJax.Hub.Queue(["Typeset",MathJax.Hub,x]);//This line is not needed for firefox, iexplore, only needed for chrome, safari.
}
</script></body></html>
This page: http://users.telenet.be/derick/test.htm will display x^3 correctly on firefox and internet explorer, but will display as `x^3` on chrome, safari mobile. To fix the problem, the Math.Jax.Hub.queue line needs to be added. With the fix added on http://users.telenet.be/derick/test2.htm it will display correctly on mobile.
This is explained on http://docs.mathjax.org/en/latest/typeset.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>
</head>
<body onload="my_onloadfunction()">
<p>`x^2`</p>
<p id="onload_paragraph"></p>
<script>
function my_onloadfunction() {
var x = document.getElementById("onload_paragraph");
x.innerHTML = "`x^3`";
MathJax.Hub.Queue(["Typeset",MathJax.Hub,x]);//This line is not needed for firefox, iexplore, only needed for chrome, safari.
}
</script></body></html>
Davide P. Cervone
Sep 4, 2014, 7:27:26 PM9/4/14
to mathja...@googlegroups.com
MathJax is triggered by the DOMContentLoaded signal, which typically fire before the page onload signal. Thus MathJax will already have run before your my_onloadfunction() is called, and when you change the content of that paragraph, it is after MathJax has already completed, and so it is left unprocessed. Of course, the timing of DOMContentLoaded and onload compared to other things (like loading the files needed for MathJax to run) depends on the browser, and also on the contents of the browser cache, the speed of your network connection, whether you are loading files locally, etc.
But yes, you are right, you need to do a typeset call in order to make sure the changed content is processed. If you are planning to make such changes, you might want to prevent MathJax from making its initial pass over the page using the skipStartupTypeset configuration parameter. Then the Typeset call you make in your onload handler will take care of both expressions.
Davide
--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
Reply all
Reply to author
Forward
0 new messages