"How to delay the appearance of Jmol panel until the user requests it"

-- A template for building webpages that include JSmol panels --

Method B: pop-in, using divs.
Compatible with: JSmol 14 or later

Author: Angel Herráez.  Version 2019.11.28

This template is offered freely for anyone to use or adapt it, according to Creative Commons Attribution-ShareAlike 4.0 License,
http://creativecommons.org/licenses/by-sa/4.0/

Template available from Jmol Wiki pages, http://wiki.jmol.org

------------
FILES NEEDED:

- "pop_Jmol.htm": the webpage seen by users; you can change the filename freely, and have several pages based on it.

- "pop_Jmol.js" -filename unchanged, common to all possible pages-

------------
DESCRIPTION:

- This layout permits to show one or more molecular models in a page, in a fixed size JSmol panel. The 3D model only appears upon user's request.

- For each instance (molecule), it automatically inserts in the page an image of the molecule and instructions for the user. Upon user's click, a Jmol model will be shown in place of the image ("pop-in").

- Uses DIVs.

------------
WHAT YOU NEED TO PREPARE AND SETUP:

- For each molecule, a molecular coordinates file that will be read by Jmol.

- For each molecule, an image (can be a drawing, e.g. its formula, or a screenshot of the 3D model in Jmol). Filename must be the same as for the molecular coordinates file, but with extension .jpg.

- Your web page(s) will be based on "pop_Jmol.htm". You may want to change CSS and, of course, textual content. Each model will be handled by inserting a call to "putJmolDiv()", where you must specify an ID number for that div, the identifier that will be shown for the molecule and the filename of the molecular coordinates file (including extension).

- Edit "pop_Jmol.js" file and adjust to your needs:
	- value of "var JmolPath", to point to where you have the JSmol library files  **essential**
	- value of "var JmolSize", to choose a different size for JSmol objects (set at 300 pixels)