sample-dynamic.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>MathJax Dynamic Math Test Page</title>
  5. <!-- Copyright (c) 2010-2017 The MathJax Consortium -->
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1">
  9. <script type="text/javascript" src="../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  10. <style>
  11. input {margin-top: .7em}
  12. .output {
  13. border: 1px solid black;
  14. padding: 1em;
  15. width: auto;
  16. position: absolute; top: 0; left: 2em;
  17. min-width: 20em;
  18. }
  19. .box {position: relative}
  20. </style>
  21. </head>
  22. <body>
  23. <script>
  24. //
  25. // Use a closure to hide the local variables from the
  26. // global namespace
  27. //
  28. (function () {
  29. var QUEUE = MathJax.Hub.queue; // shorthand for the queue
  30. var math = null, box = null; // the element jax for the math output, and the box it's in
  31. //
  32. // Hide and show the box (so it doesn't flicker as much)
  33. //
  34. var HIDEBOX = function () {box.style.visibility = "hidden"}
  35. var SHOWBOX = function () {box.style.visibility = "visible"}
  36. //
  37. // Get the element jax when MathJax has produced it.
  38. //
  39. QUEUE.Push(function () {
  40. math = MathJax.Hub.getAllJax("MathOutput")[0];
  41. box = document.getElementById("box");
  42. SHOWBOX(); // box is initially hidden so the braces don't show
  43. });
  44. //
  45. // The onchange event handler that typesets the math entered
  46. // by the user. Hide the box, then typeset, then show it again
  47. // so we don't see a flash as the math is cleared and replaced.
  48. //
  49. window.UpdateMath = function (TeX) {
  50. QUEUE.Push(
  51. HIDEBOX,
  52. ["resetEquationNumbers",MathJax.InputJax.TeX],
  53. ["Text",math,"\\displaystyle{"+TeX+"}"],
  54. SHOWBOX
  55. );
  56. }
  57. })();
  58. </script>
  59. <p>
  60. Type some \(\rm\TeX\) code and press RETURN:<br />
  61. <input id="MathInput" size="80" onchange="UpdateMath(this.value)" />
  62. </p>
  63. <p>You typed:</p>
  64. <div class="box" id="box" style="visibility:hidden">
  65. <div id="MathOutput" class="output">$${}$$</div>
  66. </div>
  67. <script>
  68. //
  69. // IE doesn't fire onchange events for RETURN, so
  70. // use onkeypress to do a blur (and refocus) to
  71. // force the onchange to occur
  72. //
  73. if (MathJax.Hub.Browser.isMSIE) {
  74. MathInput.onkeypress = function () {
  75. if (window.event && window.event.keyCode === 13) {this.blur(); this.focus()}
  76. }
  77. }
  78. </script>
  79. </body>
  80. </html>