sample-dynamic.html 2.2 KB

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