Page 298 - DCAP109_GRAPHIC_TOOLS

Unit 12: Dreamweaver – Layers and Style Sheets

{showDelay:750, hideDelay:500});}}); Notes
Spry.Data.Region.addObserver(‘Lanthanide’,{onPostUpdate:function(){var
tt2 = new Spry.Widget.Tooltip(‘tooltip’,’.elementBlock’,
{showDelay:750, hideDelay:500});}}); </script> </div>
The div is a detailregion tied to ds1, the main data set.
The id=”tooltip” is used to identify the tooltip content for the widget.

The SpryHiddenRegion class is used to automatically hide the markup as the page loads.
It is removed when Spry is done loading the page.
The <script> tags are within the detailregion. Spry has code that finds script tags within
regions and executes them after the data is finished loading.
The highlighted regions are observers that recreate the tooltip every time the detail
region updates. We add an observer to elements by their ID. In this case, we attach observers
to the two spry:regions: mainRegion and Lanthanide. The onPostUpdate notification
runs the function() after the data is finished updating in the region.
The function is the actual Tooltip constructor. tooltip is the ID of the tooltip content: the
detailregion.

.elementBlock is the class name that defines the trigger. Every time someone mouses
over an element with a class of elementBlock, the tooltip appears. In this case, the
elementBlock class is attached to every element div. Recall that is the class that sets the
size and border? So now the tooltip will trigger every time you mouse over the element
div. The onmouseover attribute causes the data to update to the current element
information and the observer instantly creates the new tooltip.
Highlighting Functions

At the top of the page, we have the links that highlight the particular part of the table. We
can select element types, groups, or periods. They are highlighted by graying out the
elements that don’t belong to the selection.
We use Spry to output the text and simple custom functions to enable this inverse
highlighting. These two functions are in atom_functions.js. One function does the
highlighting. The other clears any current highlighting. The hasClassName is a utility
function that will be included in the next version of Spry.

function GrayOutTable(activeClass)
{
var rows = ds1.getData(true);
var numRows = rows.length;

for (var i = 1; i <= numRows; i++)
{
var ele = Spry.$(“div_” + i);

if (ele) {
if (!Spry.Utils.hasClassName(ele, activeClass))
Spry.Utils.addClassName(ele,”grayOut”);

Contd...

LOVELY PROFESSIONAL UNIVERSITY 291