[HOME] jsMath (Authors/2.x) [Prev][Top][Up][Next]

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, as jsMath.Process runs asynchronously, and if you were to call it a second time while the first call is till running, jsMath will get confused.)

Note that this will cause jsMath to look through the entire web page for mathematics, and that may be inefficient, especial 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');
    div.innerHTML = 
      'If <SPAN CLASS="math">x = 3</SPAN> then <SPAN CLASS="math">x^2 = 9</SPAN>.'
creates a new DIV element and sets its contents, then processes the mathematics that it contains, and finally adds it to the end of the current document. 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, and then call jsMath.ProcessElement() on it. For example,

    var math = document.createElement('span');
    math.innerHTML = '\\sum_{i=1}^{n} i = {n(n+1)\\over 2}';
would create an in-line math element (since it is a SPAN), process it, and add it to the bottom of the page. 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.

Get jsMath at SourceForge.net. Fast, secure and Free Open Source software downloads [HOME] jsMath web pages
Created: 02 Aug 2005
Last modified: 02 Dec 2005 12:59:37
Comments to: dpvc@union.edu
[Next] Loading jsMath in the Document HEAD
[Up] Information for jsMath v2.x Authors
[Prev] Processing only Part of a Web Page