### Hiding Data References During Page Load

This sample shows you a couple of ways to hide data references as the page loads.

Since the Spry dynamic region code automatically removed spry:region and spry:detailregion attributes off of elements after initially processing them, the original idea we had was that folks could use CSS to define a rule that hid any content that had a spry:region or spry:detail region attribute on it. Unfortunately most CSS implementations in browsers today don't support XML namespaces. If they did, the following CSS would work today:

    <style>
    @namespace spry url(http://ns.adobe.com/spry);

    *[spry|region], *[spry|detailregion]{
    	visibility: hidden;
    }
    </style>

So, on to "Plan B"!

The dynamic region processing code was modified so that it automatically removes the class name "SpryHiddenRegion" on any spry:region or spry:detailregion. So now all you have to do is provide a CSS rule for the SpryHiddenRegion class:

    <style>
    .SpryHiddenRegion {
    	visibility: hidden;
    }
    </style>

An alternate way to hide just the data references, is to leverage the spry:content attribute. You can actually use a spry:content attribute as a substitute for a data reference. Since the actual data reference is an attribute on the element that has the spry:content attribute, it is not visible when the page loads.

Here's an example of how to hide the data references using the SpryHiddenRegion CSS class name and spry:content attribute.

No Hiding | Using SpryHiddenRegion | Using spry:content
--- | --- | ---

- {name}

- {name}