Page 297 - DCAP109_GRAPHIC_TOOLS

Graphic Tools

Notes elements line up correctly vertically. To do this, we take advantage of having the {Name}
class on every element div.
Creating the Horizontal Spacing

In any periodic table, the first three rows (Periods) have a gap between elements because
they need to line up vertically in the correct column (Group). To do this , we create classes
that use a specific element name and contain simple CSS.
To position these three rows correctly, we simply add a large margin to the correct elements.
This pushes the elements to the right so they line up right. The float ensures it stays in line
horizontally.
The atoms.css file contains classes called .Hydrogen, .Beryllium, and .Magnesium. (Note that
they are uppercase because CSS and JavaScript are case sensitive.). The code is:
.Hydrogen { margin-right:928px; } .Beryllium, .Magnesium { margin-
right:580px; }
This pushes those rows over correctly. This, and a couple other details, are why we pass
the element name as a class name.
The Tooltip

We use a Spry Tooltip widget to show additional information about the element. The
table has much more information in it than we can fit in the element div.
The Tooltip widget works by having a tooltip element, which contains the tooltip content,
and a trigger, which activates the tooltip. Since we want the data to update for each
element, we use a spry:detailregion for this. This is tied to the
onmouseover=”ds1.setCurrentRow(‘{ds_RowID}’);” attribute on the element divs.
This causes the detailregion to update on the onmouseover event.

Because the tooltip widget is a detailregion, we need to take steps to make sure it functions
properly. Generally, with widgets and Spry data, we have to reactivate widgets that get
wiped out when the data refreshes. In this case, we use observers to trigger the widget
constructor after the detail region updates.
<div spry:detailregion=”ds1" id=”tooltip” class=”SpryHiddenRegion”>
Name:<strong>{Name}</strong><br /> Type:<strong>{Element_Type}</
strong><br />
Group:<strong>{Group}</strong><br /> Symbol:<strong>{Symbol}</
strong><br />

Period:<strong>{Period}</strong><br />
Boiling Point:<strong>{BP}</strong><br />
Melting Point:<strong>{MP}</strong><br />
Density:<strong>{Density}</strong><br />
Atomic Weight:<strong>{Atomicweight}</strong><br />
Electron Config:<strong>{Electron_configuration}</strong><br />
Year Discovered:<strong>{DiscoveryYear}</strong> </div>
<script type=”text/javascript”>
Spry.Data.Region.addObserver(‘mainRegion’,{onPostUpdate:function(){var
tt1 = new Spry.Widget.Tooltip(‘tooltip’,’.elementBlock’,
Contd...

290 LOVELY PROFESSIONAL UNIVERSITY