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