resizing MarvinView

User 870ab5b546

19-01-2010 04:03:35

Suppose I load a page that contains a MarvinView applet.  It is possible to change the contents of the applet after the page has been loaded with the Javascript command setMol().  Is there a comparable Javascript command that resizes the applet? 

ChemAxon 7c2d26e5cf

21-01-2010 10:23:06

Applet can not change its size itself. So there is no method in MarvinSketch/View Applet API to do this.


But resizing of an applet is not impossible in html, you have to add some javascript code to your page to do it. We have an example among Marvin Applets examples that demonstrates it:


Resizeable sketcher

User 870ab5b546

21-01-2010 14:38:13

Thanks, that's helpful.  Next question: Is it possible to use Javascript to start up MarvinView in a part of a page that has already been loaded?  For example, suppose I have this:


<table>
<tr><td id="showMol">Click <a onclick="loadMView()">here</a> to see the structure.</td></tr>
</table>

When the user clicks on "here", I want loadMView() to start up MarvinView in the cell whose id="showMol".


I tried this, but it doesn't initiate the applet:


<script type="text/javascript">
function loadMView() {
var startup = '<script type="text\/javascript">'
+ 'mview_name = "marvinView"; '
+ 'mview_begin("\/nosession\/marvin", 250, 250); '
+ 'mview_param("mol", "CCCCC"); '
+ 'mview_end();'
+ '<\/script>';
document.getElementById('showMol').innerHTML = startup;
}
</script>

ChemAxon 7c2d26e5cf

21-01-2010 14:53:26

After the page is loaded in, you can not write anything with JavaScript into the html source.


Instead of that, insert a DIV tag (identify by an id) in your web page where you would like to modify the content.


JavaScript can refer to the DIV tag by ID and you can write into this div document or load a new page into this "frame" anytime.

User 870ab5b546

21-01-2010 15:55:39

Thanks, I figured out how to do it.  Instead of using the Marvin Javascript library to start the applet, I use the HTML that the Javascript library produces behind the scenes.  I write it to the innerHTML of the element, which can be a div, span, or table cell.   


<html>
<head>
<script src="/nosession/marvin/marvin.js" type="text/javascript"></script>
<script type="text/javascript">
function loadMView() {
var startup = '<applet CODEBASE="/nosession/marvin/" '
+ 'ARCHIVE="appletlaunch.jar" CODE="JMViewLaunch" '
+ 'WIDTH=200 HEIGHT=200>'
+ '<param NAME="mol" VALUE="CCCCC">'
+ '</applet>';
document.getElementById('showMol').innerHTML = startup;
}
</script>
</head>
<body style="overflow:auto;">
<table>
<tr><td id="showMol">Click <a onclick="loadMView()">here</a> to see pentane.</td></tr>
</table>
</body>
</html>

User 870ab5b546

22-01-2010 19:14:48

The method in my previous post is not general for all browsers and file formats.  Instead, use as usual the Javascript library that ChemAxon provides, except, instead of finishing with:


mview_end();

finish with:


document.getElementById('appletLocn').innerHTML = mview_end_to_string();

The same can be done with MarvinSpace and MarvinSketch, I believe.

ChemAxon 7c2d26e5cf

25-01-2010 13:14:01

Yes, we have introduced mview_end_to_string() method to be able to get applet generated code. It is useful when you do not want to write applet code directly into the current html page.