Dynamically sized JSmol

Updated 2018

Requisites pursued:

1. A Jmol panel that is not fixed-size, but sized according to the available window space
   • Allows any screen resolution
   • Allows any window size (maximized or not)
   • Allows any number of browser toolbars or sidebars (chrome)
   • You may have a large Jmol panel and make profit of any window space available (important for projection in the classroom)
   • In the examples here, Jmol panel does not exceed the available height nor 60% of the available width (this figure can be changed, of course).
2. Automatic resizing of Jmol when browser window is resized.
3. A text panel, using the remaining width available, that responds to change of font size in browser (trivial) without interference or overlapping with Jmol panel.
4. A Jmol panel that does not scroll, even with the page.
5. A text panel that scrolls naturally by keyboard, by mouse (wheel), and by scrollbars.
6. Avoid parallel scrollbars (div+page).

Latest versions:

These use JSmol in the HTML5 modality by default. (They may be easily adjusted to use the Java or WebGL modalities, if you wish)

These templates (instructions enclosed) are offered under Creative Commons “Attribution-ShareAlike” licence.

Version 1.3

text  text text text	see it working download template A		text  text text text text	see it working download template B
title  text  text text text	see it working download template C		text  text text text	see it working download template D
text text	see it working download template E		text text text text	see it working download template F
title  text  text text text	see it working download template G

Old versions:

Version 1.2 Uses JSmol, by default in HTML5 mode (it may be adjusted to use Java).

text text text text

Model F. see it working

Version 1.1 (adapted to JSmol, updated) Uses JSmol in HTML5 mode by default (it may be adjusted to use Java).

text  text text text

Model A, using the Jmol2.js adapter library (keeps using the legacy syntax for applet and controls). see it working model A_js1 Model A, rewritten for the new JSO / JSmol syntax. see it working model A_js2

Version 0.7 (built on 0.5a) Automatic resizing of Jmol and text panels when page is resized. Needs Jmol 11.1.20 or later (can be used with 11.0 or 10.2, with a patched Jmol.js). Everything is sized in percent, and no "onResize()" business is involved. All of them can work with Jmol on the left or on the right side (top/bottom for E and F).

These templates (instructions enclosed) are offered under Creative Commons “Attribution-ShareAlike” licence.

text  text text text	see it working model A		text  text text text text	see it working model B
title  text  text text text	see it working model C		text  text text text	see it working model D
text text	see it working model E		text text text text	see it working model F
title  text  text text text	see it working model G

Even older versions:

The only difference between the following pairs is in the call insertJmol("left") or insertJmol("right") !

Version 0.3a (adds a border to indicate separation between text and model --a matter of tastes--)
Square Jmol panel:

text  text text text

see it working

text  text text text

see it working

Version 0.4 (built on 0.3; Jmol panel is reduced to include a tools/help/info panel below)
Square Jmol panel:

text  text text text text

see it working

text  text text text text

see it working

Version 0.5a (built on 0.3; adds automatic Jmol panel resizing when page is resized)
Rectangular Jmol panel
This needs Jmol 11.1.20 or later. Everything is sized in percent, and no "onResize()" business is involved.

text  text text text

see it working

text  text text text

see it working

For v. 0.6 I'm trying to work out an always-square-applet solution, but it's not easy, since we loose the automatic resizing. --abandoned for now--

Comments appreciated, to angel.herraez [at] uah [dot] es