From 8f8c4453cf5d1d06d033853143ed336be9d8d6bf Mon Sep 17 00:00:00 2001
From: "Davide P. Cervone" <dpvc@union.edu>
Date: Mon, 7 Mar 2011 21:11:05 -0500
Subject: [PATCH] Improve example to avoid some flickering of the box when the
 math changes

---
 test/sample-dynamic.html | 41 ++++++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 18 deletions(-)
diff --git a/test/sample-dynamic.html b/test/sample-dynamic.html
index c328197f3..17a7c377f 100644
--- 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>
