Introduction
The -grow hint tells SiteGrinder Pro that a type layer or -xmedia layer might change in size after the page is built. SiteGrinder will build the page to allow for this to happen gracefully. Elements that are between the grow layer and the bottom edge of the page will shift down to make room.
NOTE: If you don't have any "footer" elements that will need to move down to accommodate changing the size of a layer you don't need the -grow hint - browsers will automatically increase the page height if the area that is expanding is at the bottom of your document.
Having an adjustable area of content solves a number of problems in web design:
- You can change the contents after the page is built
- You can build many pages from the same basic de-sign but with different amounts of content in the -grow layer on each page
- Visitors to your pages can force certain browsers to enlarge the font size without ruining the design
If any of these things happens on a page without a pre-configured growable area, the relationship between the content area and any "footer" layers positioned below the content area will change. When the content shrinks there will be an ugly gap, and when the content grows it will cover the footer.
Example
This is demonstrated in the three different pages shown below.
On the left is the original page SiteGrinder built without a specified -grow area. In the middle is the same page after deleting most of the main text using an HTML editor. Notice the large gap between the remaining text and the footer.
 |
On the right is the original page rebuilt with the -grow hint added to the type layer and the same quantity of text removed after the build. Notice the footer has moved up this time. |
When you use the -grow hint, you are specifying the vertical area of a document that can expand. Every layer with a top edge that is lower on the page that than the bottom edge of the -grow layer will automatically shift downward to make room for the expanding section on the final built page.
All that is required to accomplish this is to create a rectangular layer that indicates the vertical height and vertical position of this area, and to add the -grow hint to the end of the layer's name. All layers positioned between the bottom of the -grow layer and the bottom of the document will shift to accommodate whatever is put into this area.
The below image shows a grow layer with two other layers near the bottom of the grow layer.
Only the layer in green, whose top edge is below the bottom of the gorwing layer, will work as a shifting footer:
Applications and Restrictions
The -grow hint is particularly useful when you want to use a single page design to generate a number of pages differing only in their textual content. By adding the -grow hint to the -xmedia (eXternal Media) hint, for example, you can take a single page design along with a folder of HTML files and instantly generate a web page for every html file in the folder. Each page will have a different height to match the needs of each HTML file. Click here for more details on importing HTML.
The -grow hint is only used with -text layers, -xmedia layers, and -thumbsheet layers.
IMPORTANT: The -grow hint is an advanced feature and has a few restrictions. Layers that are beneath the -grow layer in the layers palette and may seem to provide a background color for the grow layer won't actually stretch with the -grow layer. Stretchable documents need to have an interior background color or an interiorgrow-tile to avoid visual gaps that would be created using a normal layer in the background of the -grow layer. In this case, the -grow layer must be the lowest layer in the layers palette except for the tile(s).
See the following for more information:
- Page Background Colors and Tiles
- interiorgrow-tile
- step-by-step tutorial about using -grow and two tiles
