jsMath (Authors)

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 them 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');
      document.body.appendChild(div);
      div.innerHTML = 
        'If <SPAN CLASS="math">x = 3</SPAN> then <SPAN CLASS="math">x^2 = 9</SPAN>.'
      jsMath.ProcessBeforeShowing(div);
    </SCRIPT>

creates a new DIV element and adds it to the document, then sets its contents, and finally processes the mathematics that it contains.

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 latter sets the progress display, and you probably don't want that for small chunks of math. Before version 3.0, you had to use jsMath.processBeforeShowing(), since jsMath would become confused if you called jsMath.Process() a second time while the first call was still processing the page; now with the asynchronous queuing method that is part of version 3.0 and above, this is easily handled, so you can use jsMath.Process() as many times as you like without worry.

On the other hand, prior to version 3.0, after the call to jsMath.ProcessBeforeShowing(), the mathematics was guaranteed to be in place. This is no longer the case with version 3.0 and later. That is because file loading (and other actions) can occur asynchronously, so both jsMath.Process() and jsMath.ProcessBeforeShowing() both just queue their actions until jsMath is ready to process them. This might be immediately, but it might not. For example, if a file load is already in progress, these commands will return immediately without the mathematics being processed (it will be handled later when the file has finished loading). This means you can not count on the mathematics actually being in place when jsMath.ProcessBeforeShowing() returns. If you need to perform actions that rely on the mathematics being processed (e.g., looking up the size of the typeset mathematics), you will need to use the jsMath queuing mechanism for your own code as well. See the information on synchronizing with jsMath for more details.

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

Dynamic mathematics using jsMath Browser Support for jsMath Information for jsMath Authors Loading Extensions in jsMath