Dear all,
Unfortunately, I am not sure to understand anything to javascripts,
jquery and all this kind of thing. As a consequence, I don't know
whether my question falls under typical javascripts issues or under
wrong calls to JSmol. Any help would be greatly appreciated.
I am trying to get some inspiration on forums in order to make a
personal website which architecture is based on a main page that
contains a vertical accordion navbar and a div container in which
external html pages are loaded. Each html file uses JSmol, including the
main one. Everything works fine in the main page, the problem is with
the loaded ones. So far, in the external page, I am commanding to JSmol
with links (such as <a href="javascript:Jmol.script(JmolPG,'select
*;cartoons off;spacefill only')">spacefill</a>), the applet and the rest
of the external file appear in the div container, as desired. But it is
not the case any more when I am trying to use other commands, such as
jmol.Checkbox. After several unsuccessful tests, including attemps to
control the synchronous vs. asynchronous loading of the page, I turn to
the Jmol community.
Regards
Romuald
######################################################################################################################
The (simplified) main page, which also invokes JSmol, looks like this:
<!DOCTYPE html>
<html>
<head>
<title> Chemistry in 3D </title>
<!-- ________________________ JQUERY
_____________________________________________ -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- ________________________ META TAGS
____________________________________________ -->
<meta name="Format" content="text/html" />
<meta name="Language" content="en" />
<meta charset="UTF-8">
<!-- ________________________ LOAD HTML
____________________________________________ -->
<script type="text/javascript">
$(function () {
$('#vmenu a').on('click', function (e) {
e.preventDefault();
var page = $(this).attr('href');
$('#contentmain').load(page);
});
});
</script>
<!-- ________________________ JMOL
_____________________________________________________ -->
<script type="text/javascript" src="JSmol.min.js"></script>
<script type="text/javascript">
// every page will need one variable and one Info object for each applet
object
var InfoMain = {
width: 350,
height: 350,
debug: false,
color: "0xC0C0C0",
addSelectionOptions: true,
serverURL: "php/jsmol.php",
use: "HTML5",
j2sPath: "j2s",
disableJ2SLoadMonitor: true,
disableInitialConsole: true,
allowJavaScript: true,
script: "load Chem3D-data/c60.xyz; spin on",
}
//$(document).ready(function() {
// Jmol.setDocument(0);
// Jmol.getApplet("JmolMain", Info1)
// $("#JmolIsHere1").html(Jmol.getAppletHtml(JmolMain))
//})
</script>
<!-- ______________________ End of HEAD section
________________________________________ -->
</head>
<body class="s_page">
<!-- ______________________ Header
_____________________________________________________ -->
<div id="header">
<table border="0">
<tbody>
<tr valign="middle">
<td>
<a id="UPS-link" href="http://www.univ-tlse3.fr/"; title="Paul
Sabatier University - Toulouse III">
<img src="Chem3D-IMAGES/UT3_PRES_logoQ.png" alt="Paul Sabatier
University" id="logoUPS" width=300px"/>
</a>
</td>
<td class="s_MainTitle">
Chemistry in 3D
</td>
</tbody>
</table>
</div>
<!-- -->
<!-- ______________________ Vmenu
______________________________________________________ -->
<div id="vmenu">
<ul>
<li><a href="Chem3D.html">Home</a></li>
<li><a href="PGnew.html">PGnew</a></li>
</ul>
</div>
<!-- ______________________ Main Content
_______________________________________________ -->
<div align="center" id="contentmain">
<br/>
<p class="s_title">Home Page</p><br/>
<br/>
<!-- ___________________ -->
<table border="0">
<tbody>
<tr valign="top">
<td nowrap="nowrap">
<div id="JmolIsHere1">
<script type="text/javascript">
Jmol.getApplet("JmolMain", InfoMain);
</script>
</div>
<br>
</td>
<td>
<script>
Jmol.jmolRadioGroup(JmolMain,
[
["select *; wireframe 0.15; spacefill 23%;", "Ball and Stick Model",
"checked"],
["select *; spacefill;", "CPK Model"],
["select *; spacefill 0 ; wireframe on;", "Wireframe"],
["select protein or nucleic;cartoons only", "Cartoons (proteins only)"],
],
"<br/>");
Jmol.jmolBr(JmolMain);
Jmol.jmolBr(JmolMain);
Jmol.jmolRadioGroup(JmolMain,
[
["select *; isosurface vdw; isosurface translucent", "Isosurface vdw"],
["isosurface delete;", "no Isosurface", "checked"],
],
"<br/>");
Jmol.jmolBr(JmolMain);
Jmol.jmolBr(JmolMain);
Jmol.jmolRadioGroup(JmolMain,
[
["select * ; labels off;", "Labels off", "checked"],
["if (_fileType == 'Pdb'){select *.CA;label %n%r}else{select *;label
%a};select *;", "Labels on"],
],
"<br/>");
Jmol.jmolBr(JmolMain);
Jmol.jmolBr(JmolMain);
Jmol.jmolRadioGroup(JmolMain,
[
["Spin on;", "Spin On", "checked"],
["Spin off;", "Spin Off"],
],
"<br/>");
</script>
<br/>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
######################################################################################################################
Whereas an example of secondary page is given below. Empirically, I saw
that the JSmol.min.js script must not be called in the external html
file (owing to its initialization?). Calling again Jsmol.min.js makes
this external page work independently.
<!DOCTYPE html>
<html>
<head>
<title> Chemistry in 3D - POINT GROUPS </title>
<!-- ________________________ LINKS
________________________________________________ -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- ________________________ META TAGS
____________________________________________ -->
<meta name="Format" content="text/html" />
<meta charset="UTF-8">
<!-- ________________________ INITIALIZE JMOL
______________________________________ -->
<script type="text/javascript">
var JmolPG;
var use = "HTML5" // JAVA HTML5 WEBGL IMAGE are all otions
var s = document.location.search;
Jmol.debugCode = (s.indexOf("debugcode") >= 0);
jmol_isReady = function(applet) {
document.title = (applet._id + " - Jmol " + ___JmolVersion)
Jmol._getElement(applet, "appletdiv").style.border="0px"
}
var InfoPG = {
width: 350,
height: 350,
debug: false,
color: "0xC0C0C0",
addSelectionOptions: false,
serverURL: "php/jsmol.php",
use: "HTML5",
j2sPath: "j2s",
readyFunction: jmol_isReady,
disableJ2SLoadMonitor: true,
disableInitialConsole: true,
allowJavaScript: true,
script: "load Chem3D-data/nh2cl.xyz;",
}
$(document).ready(function() {
$("#JmolappPG").html(Jmol.getAppletHtml("JmolPG", InfoPG))
})
</script>
</head>
<body>
<table>
<tr><td colspan=2 style="font-size:8pt">
</td></tr>
<tr><td valign="top">
<div id="JmolappPG"></div>
</td>
<td>
<a href="javascript:Jmol.search(JmolPG,'=caffeine?')">=caffeine? (RCSB)</a>
<a href="javascript:Jmol.script(JmolPG,'select *;cartoons off;spacefill
only')">spacefill</a>
<a href="javascript:Jmol.script(JmolPG,'select *;cartoons off;wireframe
-0.1')">wire</a>
<a href="javascript:Jmol.script(JmolPG,'select *;cartoons off;spacefill
23%;wireframe 0.15')">ball&stick</a>
<br/>
<script type="text/javascript">
Jmol.jmolCheckbox(JmolPG,"spacefill on","spacefill off","toggle
display as spheres");
</script>
</td>
</tr></table>
</body>
</html>
------------------------------------------------------------------------------
Rapidly troubleshoot problems before they affect your business. Most IT
organizations don't have a clear picture of how application performance
affects their revenue. With AppDynamics, you get 100% visibility into your
Java,.NET, & PHP application. Start your 15-day FREE TRIAL of AppDynamics Pro!
http://pubads.g.doubleclick.net/gampad/clk?id=84349831&iu=/4140/ostg.clktrk
_______________________________________________
Jmol-users mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/jmol-users
