Dynamically sized Jmol

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 applet 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. 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.
3. A Jmol panel that does not scroll, even with the page.
• This can be done very easily using CSS position:fixed, but this property is not supported in IE (at least, up to IE 6).
4. A text panel that scrolls naturally by keyboard, by mouse (wheel), and by scrollbars.
• (at least most of the time)
5. Avoid parallel scrollbars (div+page).

Extra requisite achieved in v.0.5 and later:

1. Automatic resizing of Jmol when browser window is resized. La crème de la crème!

Tested on:

• WinXP: (Jmol 11.0 and 11.1.22, Java 1.5.0_10) (up to v.0.7)
  • Firefox 1.5: OK (up to v.0.7)
  • Mozilla 1.7.12: OK (up to v.0.7)
  • Netscape 7.0: OK (v.0.7)
  • Opera 9.10 and 9.20: OK (up to v.0.7)
  • IE 7, IE 6, IE5.5: OK, but inactive scrollbar for page is visible (v.0.2); fixed on v.0.3.
  • IE 5.01 fails to show the applet (seems incompatible with something in Jmol.js since 10.2).
• MacOS X (10.4.8, 10.4.9)
  • Firefox 1.5.0.11: OK (v.0.7) ; Firefox 2.0: OK (v.0.3, 0.5)
  • Safari 2.0: OK (v.0.2, 0.3); Safari 2.0.4 (419.3): OK (v.0.7)
  • Opera 9.0: OK
• Linux
  • (Ubuntu 6.10) Firefox 2.0: OK (v.0.3, 0.5)
  • (Kurumin / Etch) Konqueror and Firefox: OK (v.0.1 to 0.5a)
  • (SUSE 10) Firefox 2.0.0.3: OK (v.0.7)
• Sun workstation, Solaris 10
  • Mozilla 1.7: OK (up to 0.5a)

Latest versions:

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 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

Old 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