jsMath (Authors)

Dynamic Mathematics using jsMath

If you are developing a web page where mathematics may be generated on the fly (using JavaScript) after the page has been displayed, you will need to have jsMath process that mathematics once it has been created. One way would be simply to create the new SPAN or DIV elements (with CLASS="math") and then call jsMath.ProcessBeforeShowing() after they have been inserted into the page. (You should use jsMath.ProcessBeforeShowing() not jsMath.Process() in this case in order to avoid the progress messages from being displayed.)

Note that this will cause jsMath to look through the entire web page for mathematics, and that may be inefficient, especially for large pages or ones that already have substantial math content (since the typeset mathematics contains lots of SPAN tags that would have to be scanned to see if they are of class math). Instead, you may wish to restrict the action of jsMath.ProcessBeforeShowing() to just the new material. To do this, enclose the new text to be scanned in a SPAN or DIV and pass that to jsMath.ProcessBeforeShowing(). For example,

    var div = document.createElement('div');
    document.body.appendChild(div);
    div.innerHTML = 
      'If <SPAN CLASS="math">x = 3</SPAN> then <SPAN CLASS="math">x^2 = 9</SPAN>.';
    jsMath.ProcessBeforeShowing(div);

creates a new DIV element and adds it to the page, then sets its contents, and finally processes the mathematics that it contains. See also the section on the tex2math plugin for how to process text containing dollar signs automatically.

It is also possible to create an element that contains just mathematics and then ask jsMath to process it directly (rather than look through it for math tags). In this case, create a SPAN or DIV that contains the TeX code you want to typeset, set its class to be "math", and then call jsMath.ProcessElement() on it. For example,

    var math = document.createElement('span');
    math.className = "math";
    math.innerHTML = '\\sum_{i=1}^{n} i = {n(n+1)\\over 2}';
    document.body.appendChild(math);
    jsMath.ProcessElement(math);

would create an in-line math element (since it is a SPAN), add it to the bottom of the page, and then process it. Note the doubling of the backslashes: this is because in a JavaScript string, the backslash is an escape character, so you need to escape it (double it) to actually get a slash within the string itself.

jsMath web pages Created: 02 Aug 2005 Last modified: Feb 17, 2010 6:37:45 AM Comments to: dpvc@union.edu

Loading jsMath in the Document HEAD Browser Support for jsMath Information for jsMath Authors Processing only Part of a Web Page