JavaScript Application Object:
Periodic Table

This web page describes a JavaScript object that can be inserted easily into any web page. The periodic table can be static (no mouse action allowed) or it can be used to get user input or display properties of the elements using colors. See also data for nuclides.

As used in CoolMolecules: A Molecular Structure Explorer.

Authors: Bob Hanson hansonr@stolaf.edu and Melanie Casavant casavant@stolaf.edu
Data: Jon Holmes jlholmes@chem.wisc.edu

Color by:
[select all]  [unselect all]  [show selected atomic numbers]  [show selected symbols]
requirements:
<script type=text/javascript src=divs.js> </script> provides browser-dependent functions
<script type=text/javascript src=ptable.js> </script> provides the user and programmer interface
<script type=text/javascript src=ptldata.js> </script> provides periodic table data
JavaScript Code Examples:
<script language=javascript> document.write(PTgetTable())
</script> 		the simplest way to generate a table in the document
<script language=javascript>
PT=PTcreateNew()
PT.xxx=zzx
PT.xxy=zzy
PT.xxz=zzz
document.write(PTgetTable(PT))
</script> 		a more general way to proceed. Here we create a new table (with default parameter values), then we set various parameters to our liking and dump the HTML code to the page.
example functions:

PTsetDefaults(PT) set default values (see below); best to do this explicitly
PTgetTable(PT)
PTgetTable(PT,1) 		returns HTML code for the table for use in document.write(). Optional parameters include PT (an already-created periodic table object) and "islinear" (to create a linear table)
PTselectElements(0,0,'*') select all the selectable elements; returns the number of elements selected
PTselectElements(0,0,'_') unselect all the elements; returns 0
PTselectElements(0,0,'C;N;O') select specific elements; returns the number of selected elements
PTselectElements(2,0,'') select just the second row; returns the number of elements selected
PTselectElements(0,2,'') select just the second column; returns the number of elements selected
PTselectElements(0,2,'_') unselects just the second column; returns the number of elements selected
PTsetSelectable('C;N;O;F;Ne')
PTsetSelectable('*')
PTsetSelectable('_') 		set the given list of elements as selectable (but unselected); returns the number of selectable elements
PTgetSelectedList(0)
PTgetSelectedList(1) 		returns the list of the selected elements as symbols (mode=1) or as atomic number (mode=0)
PTshowElementsByProperty('atmass')
PTshowElementsByProperty('atno')
PTshowElementsByProperty('heat of vap') 		shows elements in color from red to blue based on a property defined in the newElemProp() function in newelem.js; optionally, one may specify the range of values considered. Elements with no such property or a value outside this range will be colored according to the value of PT.nosuchpropertycolor. Returns an array containing the minimum and maximum values.
PTshowElementsByScheme(0)
PTshowElementsByScheme(1) 		shows elements in color based on a predefined scheme. No return value.

options--default value shown; set anytime after PTgetDefaults(PT)
PT.name=name name for this periodic table. For internal use only.
PT.bgcolor="#CCCCCC" background color for the table
PT.tmbgcolor="#000000" backgound color behind "transition metal" phrase
PT.unselectablecolor="#000000" color of frame around element if element is set "not clickable"
PT.nosuchpropertycolor="#FFFFFF" color of an element if PTshowElementsByProperty() is used, and the element's property doesn't exist or is out of range
PT.miniversion=false set true for a small no-labels periodic table
PT.cellwidth=(ismini?3:36) cell width for elements
PT.borderwidth=(ismini?1:3) borderwidth for elements
PT.cellwidth2=PT.cellwidth-PT.borderwidth-1 inner cell width
PT.thisscheme=0 set to various predefined color schemes
PT.havemini=false not currently used
PT.largesymbols=1 set to 0 for atomic symbol and atomic number on the periodic table.
PT.PickBtns=[] List of buttons to put on the right-hand side of the table.
PT.Blockcolor=0 really an array showing the block color of the element. Set in PT.setScheme()
PT.mouseenabled=(!PT.miniversion) set to false if you don't want the clicking and moving to do anything.
PT.allowmultiple=1 set to false if only one element can be selected at a time
PT.rowcolbuttonsenabled=1 set to false if you don't want the row/col labels to be active.
PT.mouseoverCallback="" set to the function name to run when the mouse moves over an element
PT.mouseoutCallback="" set to the function name to run when the mouse moves away from an element
PT.mouseclickCallback="" set to the function name to run when the mouse clicks an element
PT.clickColCallback="" set to the function name to run when the mouse clicks a column number
PT.clickRowCallback="" set to the function name to run when the mouse clicks a row number
PT.openCallback="" set to the function name to run when a table is opened
PT.closeCallback="" set to the function name to run when a table is closed
//static properties:
PT.divid="" the division id for the div containing this table.
PT.formid="" the form id for the table if it has buttons attached.
PT.lineardivid="" the division id for the linear table if it is present.
PT.linearformid="" the form id for the linear table if it is present.