Compatibility

MathJax Compatibility

MathJax works by first loading a web page, then, after that is complete, editing the special mark-up on the page to turn those marks into beautiful math expressions. The problem is that both Jmol and MathJax are competing for the AJAX processing after a page is loaded. Fortunately, MathJax was designed with this issue in mind, and there is a way of monitoring its progress. We need to start creating Jmol objects only after MathJax completes its job.

For compatibility with MathJax, make sure you:

1) are using dynamic loading of JSmol

   -- use  $(document).ready() to create all JSmol objects
   -- no <script> tags that use Jmol.getApplet() within the body

2) set the jQuery $(document).ready event to monitor MathJax loading and only start in on the AJAX until that is done. For example:

$(document).ready(function(){
 loadJmol();
});

loadJmol = function() {
 // we are checking evey 10 milliseconds
 if (!$("#MathJax_Message")[0] || $('#MathJax_Message:contains("Loading")')[0]) {
   setTimeout(loadJmol, 10);
   return;
 }
 var Info = {
   width: 300,
   height: 300,
   debug: false,
   color: "0xFFFFFF",
   addSelectionOptions: true,
   use: "HTML5",
   j2sPath: "./j2s",
   jarPath: "./java",
   jarFile: "JmolAppletSigned.jar",
   isSigned: true,
   script: "set antialiasDisplay;load $caffeine",
   serverURL: "http://chemapps.stolaf.edu/jmol/jsmol/php/jsmol.php",
   readyFunction: jmol_isReady,
   disableJ2SLoadMonitor: false,
   disableInitialConsole: true,
   allowJavaScript: true
 }
 $("#appletplace").html(Jmol.getAppletHtml("jmol", Info));
}

...

<div id="appletplace"></div>

Contributors

Hansonr, AngelHerraez