Tip: Clip with divs

Friday, November 09, 2007 at 10:35 AM

Posted by James Yum, Developer Programs Engineer (Google Desktop Team)

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:

<div name="viewport" width="10" height="200">
 <div name="content" width="100" height="500">
 ...
 </div>
</div>

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.

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.

Here's the code you'd use to put an img element in a div:

<view width="160" height="120" on resizable="true">
 ...
 <div name="logoContainer" width="128" height="55" x="15" y="15">
   <img src="logo.gif" width="155" height="55" />
 </div>
</view>
...
function onSize() {
 //Set to current width of view minus widths of left and right border.
 logoContainer.width = view.width - 15 - 15;
}

Have a tip you'd like to share? Send it to gd-developer AT google DOT com.