suzanne.soy/scribble-math
1
0
Fork 0
Code Issues 8 Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Improve example to avoid some flickering of the box when the math changes

Browse Source
This commit is contained in:
Davide P. Cervone 2011-03-07 21:11:05 -05:00
parent 951c14298a
commit 8f8c4453cf
1 changed files with 23 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
test/sample-dynamic.html
View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>MathJax Dynamic Math Test Page</title> <title>MathJax Dynamic Math Test Page</title>
<!-- Copyright (c) 2010 Design Science, Inc. --> <!-- Copyright (c) 2010-2011 Design Science, Inc. -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
@ -28,7 +28,6 @@ input {margin-top: .7em}
</head> </head>
<body> <body>
<script> <script>
// //
// Use a closure to hide the local variables from the // Use a closure to hide the local variables from the
@ -36,13 +35,21 @@ input {margin-top: .7em}
// //
(function () { (function () {
var QUEUE = MathJax.Hub.queue; // shorthand for the queue var QUEUE = MathJax.Hub.queue; // shorthand for the queue
var math = null; // the element jax for the math output. var math = null, box = null; // the element jax for the math output, and the box it's in
//
// Hide and show the box (so it doesn't flicker as much)
//
var HIDEBOX = function () {box.style.visibility = "hidden"}
var SHOWBOX = function () {box.style.visibility = "visible"}
// //
// Get the element jax when MathJax has produced it. // Get the element jax when MathJax has produced it.
// //
QUEUE.Push(function () { QUEUE.Push(function () {
math = MathJax.Hub.getAllJax("MathOutput")[0]; math = MathJax.Hub.getAllJax("MathOutput")[0];
box = document.getElementById("box");
SHOWBOX(); // box is initially hidden so the braces don't show
}); });
// //
@ -50,22 +57,9 @@ input {margin-top: .7em}
// math entered by the user // math entered by the user
// //
window.UpdateMath = function (TeX) { window.UpdateMath = function (TeX) {
QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]); QUEUE.Push(HIDEBOX,["Text",math,"\\displaystyle{"+TeX+"}"],SHOWBOX);
} }
})();
</script>
<p>
Type some $\rm\TeX$ code and press RETURN:<br />
<input id="MathInput" size="80" onchange="UpdateMath(this.value)" />
</p>
<p>You typed:</p>
<div class="box">
<div id="MathOutput" class="output">$${}$$</div>
</div>
<script>
// //
// IE doesn't fire onchange events for RETURN, so // IE doesn't fire onchange events for RETURN, so
// use onkeypress to do a blur (and refocus) to // use onkeypress to do a blur (and refocus) to
@ -76,7 +70,18 @@ if (MathJax.Hub.Browser.isMSIE) {
if (window.event && window.event.keyCode === 13) {this.blur(); this.focus()} if (window.event && window.event.keyCode === 13) {this.blur(); this.focus()}
} }
} }
})();
</script> </script>
<p>
Type some $\rm\TeX$ code and press RETURN:<br />
<input id="MathInput" size="80" onchange="UpdateMath(this.value)" />
</p>
<p>You typed:</p>
<div class="box" id="box" style="visibility:hidden">
<div id="MathOutput" class="output">$${}$$</div>
</div>
</body> </body>
</html> </html>