Tip: Clip with divs
November 9th, 2007 | Published in Google Desktop API
By now, you should be familiar with the container div technique. A container div is useful for organizing and positioning related elements, but did you know it can act as clipping viewport? This is useful when you are implementing a scroll area from scratch. The outer div will act as a viewport and clip the scrollable content:
Note that the "content" div is bigger than the viewport. Your scrolling code should then set the y position of "content" based on the current scroll position.
height="500">
...
Also, if you are developing a resizable gadget, you may find yourself needing to clip certain images if they are interfering with other UI elements:
|
 |
| Image extends over and past the border. | A div (outlined in yellow) clips the image, ensuring it stays within bounds. The width of the div is updated in the onsize handler. |
Have a tip you'd like to share? Send it to gd-developer AT google DOT com.
...
width="128" height="55" x="15" y="15">
...
function onSize() {
//Set to current width of view minus widths of left and right border.
logoContainer.width = view.width - 15 - 15;
}
