Dynamically sized Jmol

Requisites pursued:

  1. A Jmol panel that is not fixed-size, but sized according to the available window space
  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.
  4. A text panel that scrolls naturally by keyboard, by mouse (wheel), and by scrollbars.
  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:

Latest versions:

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

text
text
text
text
   

 

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
  • Template A, using the Jmol2.js adapter library (keeps using the legacy syntax for applet and controls).
    see it working
    download template A.zip (js1)
  • Template A, rewritten for the new JSO / JSmol syntax.
    see it working
    download template A.zip (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

download template A.zip

 
 text 
text
text
text
text

see it working

download template B.zip

         
title
 text 
text
text
text

see it working

download template C.zip

 
 text 
text
text
text

see it working

download template D.zip

         
text
text

see it working

download template E.zip

 
text
text
text
text

see it working

download template F.zip

         
title
 text 
text
text
text

see it working
template G

   

 

 

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