Page 295 - DCAP109_GRAPHIC_TOOLS
P. 295
Graphic Tools
Notes This element div has many classes applied to it. This allows us to identify each element
and to wrap lines correctly as well as to filter easily.
<div tabindex=”{No}” id=”div_{No}” class=”elementBlock {Element_Type}
{Period} {Name} {Group}” spry:if=”({No} < 58 || ({No} > 71
&& {No} < 90) || {No} > 103)”
onmouseover=”ds1.setCurrentRow(‘{ds_RowID}’);” spry:hover=”hover”> <span
class=”number”>{No}</span> <span class=”group”> {Group} </span> <p
align=”center”>{Symbol}</p> <span class=”weight”>{Atomicweight}</span>
</div> </div>
The bulk of the code above is the actual content: The <span> tags and the <p> contain the
Spry data references for Atomic Number {No}, Group Number {Group}, the element
symbol {Symbol}, and the atomic weight {Atomicweight}. The CSS classes number,
group, and weight are defined in atom.css to position these data references within the
element div.
The logic for the element div is in the attributes of the div tag.
z tabIndex=”{No}” is used to allow tabbing between elements for accessibility
reasons. This gives the tabindex a unique number {No} to allow tabbing in atomic
order.
z id=”div_{no}” provides a unique ID for each of the element divs. These are used
in the filter functions to gray out the other elements.
z class=”elementBlock {Element_Type} {Period} {Name} {Group}”
elementBlock is defined in atom.css. It sets the size of the element div, the
border, padding, and font size. Key here is the float:left that lines up the
divs horizontally.
{Element_Type} are all defined in atoms.css. The data reference that adds
the class name that sets the background colors you see on the table.
{Period} and {Group} are added so we can filter on them. They are not
defined in atoms.css. They are only used for logic in filtering the periods and
groups.
{Name} are used so we can define classes for specific elements. For example,
we use specific classes like .Hydrogen to great the gap between it and Helium
correctly.
onmouseover=”ds1.setCurrentRow(‘{ds_RowID}’);” is used for the
tooltip to update the tooltip spry:detailregion. This ensures that the tooltip
always shows details for the current element.
spry:hover=”hover” sets the hover class for changing the text color when
mousing over an element.
The spry:if takes some explanation. The two blue rows at the bottom are special. They
are the Lanthanide and Actinide series. They are always displayed in separate columns
below the main table, but numerically, they are out of order. Note that they have a
Number (upper left corner) of 58–71 and 90–103. Note that on Periods six and seven (click
the Periods filter to highlight them), the number jumps from 57 straight to 72, and from 89
to 104.
Contd...
288 LOVELY PROFESSIONAL UNIVERSITY
