Page 296 - DCAP109_GRAPHIC_TOOLS

Unit 12: Dreamweaver – Layers and Style Sheets

So we have to logically not display those in the main table, and ensure they only show up Notes
below. (This separation is the only reason we have to duplicate code in this demo!)

The spry:if says:
spry:if=”({No} < 58 || ({No} > 71 && {No} < 90) || {No} > 103)”
This is the logic that says: if the Number is less than 58 or greater than 71 and less than 90
but greater than 103, print it here. Note the ( ) that surround the highlighted code. This
separates the logic so everything works correctly. You will see in the other element DIV
block that an inverse condition displays the other two rows.

For the Lanthanide block, the two blue rows at the bottom, twe need to display the
elements that are not displayed above.
We simply repeat the markup from above, with a new spry:region and
spry:repeatchildren. The only difference in this block is that spry:if is the reverse
of the one above:

spry:if=”({No} >= 58 && {No} <= 71) || ({No} >= 90
&& {No} <= 103)”
Other than that, the two spry:regions that output the elements are the same. The
Lanthanide div has CSS that positions it left so it lines up vertically correctly. The <br
style=”clear:both;” /> between the two element blocks puts the Lanthanide block
on a new line.
The mainRegion
The mainRegion div wraps the entire periodic table. It is used as the main spry:region
and is used for CSS purposes. The <br> is a critical component of the layout.
<div spry:region=”ds1" spry:repeatchildren=”ds1"
class=”SpryHiddenRegion” id=”mainRegion”> <br spry:if=”({No} == 3)
|| ({No} == 11) || ({No} == 19) || ({No} == 37) || ({No} == 55) ||
({No} == 87)” style=”clear:both;” />
This DIV is the spry:region for ds1, the main data set. We also set a
spry:repeatchildren on the data set. This is the attribute that causes all the element
divs and the breaks (<br>) to repeat. The SpryHiddenRegion class is used to hide the
div while the page loads. The ID is needed because we use it on the observer described in
the Data sets section above.
So this code repeats the element div, which since it is float:left:, will line up all the
elements in a long horizontal line. In order to make the table look correct, we need to start
a new line at precise times, Helium, Neon, and so on. Every time we hit a green element,
we need to start a new line. We know the element Numbers where this needs to happen.
The <br> has a spry:if that has a “clear:both;”. This clears the float and causes the
remaining content to wrap to the next line.

We use the spry:if to determine when to add a <br> that will cause this break. So we
write a statement that says, “Break when the number {No} equals 3 or 19 or 37 or 55 or 87”.
Note that we actually use the number that is the first element of the new row.
This break, along with the float on the .elementBlock class, are the key components of
getting the layout correct. If we just had that, it would have the correct rows, but we still
need to create that gap in the first three rows (Periods, hence the name periodic table), so the
Contd...

LOVELY PROFESSIONAL UNIVERSITY 289