Section 12.4. Size and Clipping


12.4. Size and Clipping

An 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.

Actually, an element's width and height are factors of several attributes, including the element's border, margin, padding, and content. All combined, these provide a CSS "box model" associated with block elementselements that force a line break before and after. Read more on the box model at the W3C page, "Box model," at http://www.w3.org/TR/REC-CSS2/box.htm.


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).

Why even set the element's height? After all, if the height is not defined, and the overflow not set to clip, the element automatically resizes to fit the content.

If you have content in two columns, laid out side by side, you might want to set the heights of the columns so that one isn't excessively longer than the other.


12.4.1. Overflow and Dynamic Content

When 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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Overflow</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #div1 { width: 700px; height: 150px } #div2 { width: 600px; height: 100px; overflow: auto } </style> <script type="text/javascript"> //<![CDATA[ function switchContent(  ) {     var div1 = document.getElementById("div1").innerHTML;     var div2 = document.getElementById("div2").innerHTML;     document.getElementById("div1").innerHTML = div2;     document.getElementById("div2").innerHTML = div1; } //]]> </script> </head> <body> <p> <a href="javascript:switchContent(  );">Switch</a> </p> <div > <p> One of the first presentation-specific HTML elements was font, and it's also one of the older HTML elements you still find, all too frequently, in web pages. It's not surprising that font and text properties were of such interest in building web pages. Few changes you can make to an element's style attributes can have such an effect as changing the text or font properties. </p> <p> Notice I say text or font properties. The font has to do with the characters themselves: their family, size, type, and other elements of the characters'  appearance. The text attributes, though, have more to do with decoration attached to the text and include text decoration, alignment, and so on.</p> </div> <div > <p>Smaller item.</p> </div> </body> </html>

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.

You can also access the computed width and height of an element using the getStyle method defined earlier, using width and height instead of backgroundColor.


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 Rectangle

According to the W3C, a clipping region:

...defines what portion of an element's rendered content is visible. By default, the clipping region has the same size and shape as the element's box(es). However, the clipping region may be modified by the clip property. (From the W3C's "Visual Effects" at http://www.w3.org/TR/REC-CSS2/visufx.html.)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Simple Clip Scroll</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #data1     {            position: absolute;            top: 100px; left: 100px;            padding: 0;            width: 200px;            height: 200px;            background-color: #ff0;            clip: rect(0px,200px,200px,0px);            } #data1 h3 {           margin: 0; padding: 5px;           font-size: smaller;           background-color: #006;           color: #fff;           } #contained {            margin: 10px            } </style> <script type="text/javascript"> //<![CDATA[ var bottom = 200; var hidden = false; var obj = null; function clipItem(  ) {   obj = document.getElementById("data1");   if (hidden) {        showItem(  );    } else {        hideItem(  );    } } function hideItem(  ) {    bottom-=20;    var clip = "rect(0px,200px," + bottom + "px,0px)";    obj.style.clip = clip;    if (bottom == 20) {       hidden=true;    } else {       setTimeout("hideItem(  )",100);    } } function showItem(  ) {    bottom+=20;    var clip = "rect(0px,200px," + bottom + "px,0px)";    obj.style.clip=clip;    if (bottom == 200) {       hidden=false;    } else {       setTimeout("showItem(  )",100);    } } //]]> </script> </head> <body> <div > <h3 onclick="clipItem(  );">Click to expand or collapse</h3> <div > This is the text contained within the div block. </div> </div> </body> </html>

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.




Learning JavaScript
Learning JavaScript, 2nd Edition
ISBN: 0596521871
EAN: 2147483647
Year: 2006
Pages: 151

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net