12.4. Size and ClippingAn element's size is controlled through a set of six CSS attributes. The first two, width and height, are the most common and are used to set the absolute width and height of the element. The other fourmin-height, min-width, max-height, max-widthare handy CSS attributes (particularly when working with images), but not commonly used in dynamic effects.
If the element's contents are too large for the element, the overflow is managed through the CSS overflow attribute, which can be set to visible (render all of the content and overflow the element boundaries); hidden (clip the content); scroll (clip the content, and scrollbars are provided); and auto (clip and provide scrollbars only if some of the content is hidden).
12.4.1. Overflow and Dynamic ContentWhen an element's contents are replaced dynamically, either through an Ajax call or some other event, the fit of the content within the element could change dramatically. One approach to ensure that the content is always accessible is to set the overflow to auto. If the content is too large, scrollbars are then provided. In Example 12-6, two blocks are given: one with a lot of text, one with little. The dimensions of both elements are set to safely hold their content when the page is loaded. However, there's a link that switches the content: small to large, large to small. In the CSS, the overflow for the second element is set to auto. Example 12-6. Changing content and the impact of the overflow setting
When the content is switched, the first block contains little text and a large whitespace around it. The only way to alter this is to change the dimensions of the box. Unfortunately, in a real-world example, you may not be able to easily determine the appropriate fit for the new content. The second box, though, suddenly has a scrollbar to the right, which allows you to scroll through the content. Rather than trying to resize the box by guesswork, setting the overflow to auto and triggering a scrollbar is a better approach. This way, the box is relatively stable in the page, other elements aren't continuously being pushed about, large blocks with whitespace don't result, and the content is still accessible. Another approach to dealing with changing content is to resize the block using the read-only properties offsetWidth and offsetHeight to determine the actual size of the content. There is a cross-browser difference, though, when using these properties. Internet Explorer includes any border and padding in the block size, while Mozilla/Firefox provides just the size necessary for the content.
Though width and height control the size of the element, they don't always control what's visible of the element. That can also be controlled by the clipping rectangle associated with the element. 12.4.2. The Clipping RectangleAccording to the W3C, a clipping region:
The CSS clip property specifies a shape and the dimensions of that shape. At this time, the only shape supported is a rectangle, designated with rect and defined by four dimensions: top, right, bottom, and left. clip: rect(topval, rightval, bottomval, leftval); The clipping region constrains how much of the actual element content is displayed. It also requires that the position attribute be set to absolute. If an element is 200 pixels wide and 300 pixels long, a clipping region of rect(0px,200px,300px,0px) doesn't clip any of the blockdepending, of course, on whether the element has a border or other setting that can alter the effective height and width. A clipping region of rect(10px,190px,290px,10px) clips 10 pixels off each side. Note that incrementing the value for the top and left sides, but decrementing the value for bottom and right, results in clipping. From a DHTML perspective, clipping can be used to create any form of scrolling effect, whether paired with element movement or not. It can also create the new "accordion effect" that's become so popular (demonstrated in Chapter 14). Example 12-7 demonstrates a simple use of clipping to create a drop-down animated item. Clicking on the header for the item either expands or collapses the item, depending on its current state. A timer is used to animate the effect; you can also set the full display or hide with each click, and skip the timer. Example 12-7. Drop-down animation created using a timer and clipping
Notice that rather than get the clipping value directly from the style property to test state, I use a global variable. You'll want to do this as much as possible with your animated DHTML effects; a variable get is cheaper than an object get, especially one that must work across browsers. |