commit 8f8c4453cf5d1d06d033853143ed336be9d8d6bf
parent 951c14298a0c670e97d98636d5ade83b671997ae
Author: Davide P. Cervone <dpvc@union.edu>
Date: Mon, 7 Mar 2011 21:11:05 -0500
Improve example to avoid some flickering of the box when the math changes
Diffstat:
1 file changed, 23 insertions(+), 18 deletions(-)
diff --git a/test/sample-dynamic.html b/test/sample-dynamic.html
@@ -2,7 +2,7 @@
<html>
<head>
<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="X-UA-Compatible" content="IE=EmulateIE7" />
@@ -28,7 +28,6 @@ input {margin-top: .7em}
</head>
<body>
-
<script>
//
// Use a closure to hide the local variables from the
@@ -36,13 +35,21 @@ input {margin-top: .7em}
//
(function () {
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.
//
QUEUE.Push(function () {
math = MathJax.Hub.getAllJax("MathOutput")[0];
+ box = document.getElementById("box");
+ SHOWBOX(); // box is initially hidden so the braces don't show
});
//
@@ -50,7 +57,18 @@ input {margin-top: .7em}
// math entered by the user
//
window.UpdateMath = function (TeX) {
- QUEUE.Push(["Text",math,"\\displaystyle{"+TeX+"}"]);
+ QUEUE.Push(HIDEBOX,["Text",math,"\\displaystyle{"+TeX+"}"],SHOWBOX);
+ }
+
+ //
+ // IE doesn't fire onchange events for RETURN, so
+ // use onkeypress to do a blur (and refocus) to
+ // force the onchange to occur
+ //
+ if (MathJax.Hub.Browser.isMSIE) {
+ window.MathInput.onkeypress = function () {
+ if (window.event && window.event.keyCode === 13) {this.blur(); this.focus()}
+ }
}
})();
</script>
@@ -61,22 +79,9 @@ Type some $\rm\TeX$ code and press RETURN:<br />
</p>
<p>You typed:</p>
-<div class="box">
+<div class="box" id="box" style="visibility:hidden">
<div id="MathOutput" class="output">$${}$$</div>
</div>
-<script>
-//
-// IE doesn't fire onchange events for RETURN, so
-// use onkeypress to do a blur (and refocus) to
-// force the onchange to occur
-//
-if (MathJax.Hub.Browser.isMSIE) {
- window.MathInput.onkeypress = function () {
- if (window.event && window.event.keyCode === 13) {this.blur(); this.focus()}
- }
-}
-</script>
-
</body>
</html>
