Page 294 - DCAP109_GRAPHIC_TOOLS

Unit 12: Dreamweaver – Layers and Style Sheets

This is only used for the Element Types filter at the top of the page. Notes
distinctOnLoad allows us to only get an Element type once.
distinctFieldsOnLoad tells Spry to get every distinct value in the Element_Type
column.
z var periods = new Spry.Data.HTMLDataSet(null,”atoms”,
{distinctOnLoad:true, distinctFieldsOnLoad:[‘Period’]});
Same as above, this is only used to give us the distinct values for the Period filter at
the top of the page.
z var groups = new
Spry.Data.HTMLDataSet(null,”atoms”,{distinctOnLoad:true,
distinctFieldsOnLoad:[‘Group’],sortOnLoad:”Group”,
sortOrderOnLoad:”ascending”});
Again, this is only used for getting the values for the Group filters at the top. Because
these are numbers, we have another line

groups.setColumnType(“Group”,”number”);, which tells Spry that these are
numbers. Without this line of code, Spry would treat them as text and may not order
them correctly. The sortOnLoad and sortOrderOnLoad ensures that they display
in the numeric order. If we didn’t set the sort, they would display in the order they
appear in the document.
There is one more function in the <script>:
ds1.addObserver({onPostLoad: function(ds, data) {
Spry.Utils.removeClassName(“mainRegion”, “SpryHiddenClass”); }});
The CSS class SpryHiddenClass only sets display:none; This hides and removes the
element from the flow of the page.

The mainRegion div wraps the entire periodic table (but not the data table) within it. It
has the SpryHiddenClass class applied to it. This is used for two reasons:·
z When the page is loading, the periodic table will not be visible. This hides the Spry
code before it is ready to go. When the data is loaded and ready to go, the observer
gets the onPostLoad notification and then runs the Spry.Utils.removeClassName.
This removes SpryHiddenClass from mainRegion. This will cause the periodic
table to show, all ready to go.

z When JavaScript is turned off, the Spry code will not display. This is because it has
the SpryHiddenClass applied to it and Spry will not remove it, since JavaScript is
turned off. This allows the data table to be displayed instead. Because the HTML data
set is using a table on the same page, Spry will hide the data table automatically.
The HTML Markup

The HTML markup for the table is short, but contains a lot of logic for both layout and
filtering. I will start with the main block of the periodic table and then explain the filters.
The Element DIV

The bulk of the periodic table is a single div, which I refer to as the element div since it
contains the actual chemical information.
Using Spry, this one DIV is repeated for every element in the data table. The rest of the
work is simply positioning those element divs correctly, so it looks like a real periodic table.
Contd...

LOVELY PROFESSIONAL UNIVERSITY 287