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.