jsMath (Authors/2.x)

Processing only Part of a Web Page

The jsMath.Process() and jsMath.ProcessBeforeShowing() commands cause jsMath to look through the document for SPAN and DIV tags of class "math", and then process the TeX code that these contain to produce typeset mathematics.

If you have a large page with mathematics isolated in a few sections, it may be inefficient to look through the whole page for mathematics, when only a small part really needs to be searched. Or you might be building content on the fly and only need to process the new section rather than the whole page. For cases like these, jsMath.Process() and jsMath.ProcessBeforeShowing() allow you to pass it an element whose content is to be processed.

If no element is specified, then the entire document is assumed. If a string is passed to either of these routines, then that string is taken to be the ID of an element to be processed, and that element is obtained using document.getElementById(), passing it the ID you have given. Otherwise, the passed value is taken to be a reference to the actual DOM object whose contents is to be processed.

For example,

    <P ID="has_math">
       If <SPAN CLASS="math">x = 3</SPAN> then <SPAN CLASS="math">x^2 = 9</SPAN>.
    </P>
    <SCRIPT> jsMath.ProcessBeforeShowing('has_math') </SCRIPT>

will cause only the single paragraph marked as "has_math" to be processed, while the rest of the document is left untouched. (Note that ID's must be unique, so only one element will be searched, though that element can contain many math tags.)

Similarly,

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

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.

The element that gets passed to jsMath.Process() or jsMath.ProcessBeforeShowing() can be as large or small as you like. For example, it could be a single paragraph, as in the example above, or a DIV that encloses all of the page excluding the header, footer and sidebar, which you know won't contain mathematics.

When you are creating dynamic content, in most cases you will want to call jsMath.ProcessBeforeShowing() rather than jsMath.Process(), since the later runs asynchronously (using setTimeout), so the mathematics would not be processed at the time you make the call. Indeed, making a second call to jsMath.Process() before all the mathematics from the first has been completed can cause serious problems. (Contact the author of jsMath if you really need to do this.)

jsMath web pages Created: 10 Jul 2005 Last modified: 02 Dec 2005 13:01:52 Comments to: dpvc@union.edu

Dynamic mathematics using jsMath Information for jsMath v2.x Authors Using jsMath without Image Fonts