Processing only Part of a Web Page
jsMath.ProcessBeforeShowing()commands cause jsMath to look through the document for
DIVtags 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.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
DIVelement 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.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
DIVthat 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.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.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.