Layers
Layers can also be used to layout objects on a page and provide more flexibility an options than tables and layout grids. Layers use cascading style sheets (CSS). Prior to the development of CSS, frames were used to carry out some the same functions as layers, however, when working with Jmol images, frames do not work. Among other things, layers allow text in one region of a page to be scrolled independently of a Jmol image located elsewhere on the page. This allows the Jmol image to remain in view while scrolling past it text that does no fit onto the page. Layers can also be overlayed, made visible and invisible, and animated.
To use layers to layout Jmol images and text on a page:
- Set up the page as you did before to include the following items:
- A JavaScript in the <HEAD> section that points to the Jmol.js library file.
- A <FORM> ...</FORM> tag that will hold the content of the the page.
- A JavaScript at the top of the page that calls the jmolInitialize( ) function and which points to the directory containing the jmolApplet#.jar files.
- This will place a small yellow square in the <FORM>...</FORM> box, along with a larger square, which is the later.
- The yellow box is the anchor for the layer. As long as it is located in the <FORM>...</FORM> box, the layer is contained within the <FORM> tags, regardless of where the layer is visually placed on the page.
- The yellow box is also used for selecting the layer.
- The layer boxes can be resized the moved to any location
- Text can be typed directly into a layer box.
- JavaScripts for Jmol images and control objects can be placed into a layer box
Using Scroll Bars with Layers
When text and graphics are placed in a layer box, the box will automatically expand in the layout view to show the entire contents of the layer. There are two places where you can fixs the dimensions of the layout box, one affects how it will look in the layout view, the other how it will look when viewed from a browser.
- To change the dimensions of a layout box as it will look in the layout view, select the layout box by clicking on its border, and change the dimensions in the Inspector pallet.
- Typically, you will want the layout box to expand automatically when you are entering content, and then fix it when you want to work on page layout. To allow the layout box to expand, set on of the dimensions to "Unchanged":
To adjust the size the of the layout box as it will be seen from a web browser, you need to use the Cascading Style Sheet (CSS) Editor window. This window offers many formating options, we will focus on the clipping option, which also gives you the option of including scroll bars.
- Open the CSS Editor window by clicking on the CSS icon in the upper right-hand corner of the web page when in the layout mode.