Skip to content

More live preview examples

Jump to bottom Edit New page
Davide P. Cervone edited this page May 27, 2013 · 3 revisions

From https://groups.google.com/d/msg/mathjax-users/nDQ3PtJdaaM/UzYLI03oUtsJ

The example that Peter put together may be more complicated than what you need. The double-buffering that it uses is not really needed when you have a single expression that is being typeset. You could simply have changed the "onchange" to "onkeyup" in the original example I suggested in order to get the typesetting to occur for each letter typed. Here is a complete example:

<!DOCTYPE html>
<html>
<head>
<title>MathJax Dynamic Math Test Page with ASCIIMath Input</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>

<style>
input {margin-top: .7em}
.output {
  border: 1px solid black;
  padding: 1em;
  width: auto;
  position: absolute; top: 0; left: 2em;
  min-width: 20em;
}
.box {position: relative}
</style>
</head>
<body>

<script>
  //
  //  Use a closure to hide the local variables from the
  //  global namespace
  //
  (function () {
    var QUEUE = MathJax.Hub.queue;  // shorthand for the queue
    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
    });

    //
    //  The onchange event handler that typesets the math entered
    //  by the user.  Hide the box, then typeset, then show it again
    //  so we don't see a flash as the math is cleared and replaced.
    //
    window.UpdateMath = function (amath) {
      QUEUE.Push(HIDEBOX,["Text",math,amath],SHOWBOX);
    }
  })();
</script>

<p>
The page can include \(\rm\TeX\) code as well as ASCIIMath: `root(3)(x+1)`.
</p>

<p>
Type some ASCIIMath code and press RETURN:<br /> 
<input id="MathInput" size="80" onkeyup="UpdateMath(this.value)" />
</p>

<p>You typed:</p>
<div class="box" id="box" style="visibility:hidden">
<div id="MathOutput" class="output">` `</div>
</div>

</body>
</html>

Hope that helps.

Davide

OK, here is one that shows how to handle two separate input and output areas. I'll let you work out how to incorporate it into your slides.

<!DOCTYPE html>
<html>
<head>
<title>MathJax Dynamic Math Test Page with ASCIIMath Input</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_HTMLorMML"></script>

<style>
input {margin-top: .7em}
.box {position: relative}
.container {
  border: 1px solid black;
  padding: 10px;
}
</style>
</head>
<body>

<script>
  //
  //  Use a closure to hide the local variables from the
  //  global namespace
  //
  (function () {
    var slides = 2;                 // number of slides
    var QUEUE = MathJax.Hub.queue;  // shorthand for the queue
    var math = [], box = [];

    //
    //  Hide and show the box (so it doesn't flicker as much)
    //
    var HIDEBOX = function (i) {box[i].style.visibility = "hidden"}
    var SHOWBOX = function (i) {box[i].style.visibility = "visible"}

    //
    //  Get the element jax when MathJax has produced it.
    //
    QUEUE.Push(function () {
      for (var i = 1; i <= slides; i++) {
        math[i] = MathJax.Hub.getAllJax("MathOutput"+i)[0];
        box[i]  = document.getElementById("box"+i);
        SHOWBOX(i); // box is initially hidden so the braces don't show
      }
    });

    //
    //  The onchange event handler that typesets the math entered
    //  by the user.  Hide the box, then typeset, then show it again
    //  so we don't see a flash as the math is cleared and replaced.
    //
    window.UpdateMath = function (i,amath) {
      QUEUE.Push([HIDEBOX,i],["Text",math[i],amath],[SHOWBOX,i]);
    }
  })();
</script>

<p>
The page can include \(\rm\TeX\) code as well as ASCIIMath: `root(3)(x+1)`.
</p>
    
<div class="container">
<p>
Type some ASCIIMath code and press RETURN:<br /> 
<input id="MathInput1" size="80" onkeyup="UpdateMath(1,this.value)" />
</p>

<p>You typed:</p>
<div class="box" id="box1" style="visibility:hidden">
<div id="MathOutput1" class="output">` `</div>
</div>
</div>

<div class="container">
<p>
Type some ASCIIMath code and press RETURN:<br /> 
<input id="MathInput2" size="80" onkeyup="UpdateMath(2,this.value)" />
</p>

<p>You typed:</p>
<div class="box" id="box2" style="visibility:hidden">
<div id="MathOutput2" class="output">` `</div>
</div>
</div>

</body>
</html>

Davide

Add a custom sidebar
Clone this wiki locally