Java Code Examples for com.google.gwt.dom.client.DivElement#getOffsetWidth()

The following examples show how to use com.google.gwt.dom.client.DivElement#getOffsetWidth() . You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example 1
Source File: MockForm.java    From appinventor-extensions with Apache License 2.0 5 votes vote down vote up 
private static int getVerticalScrollbarWidth() {
  // We only calculate the vertical scroll bar width once, then we store it in the static field
  // verticalScrollbarWidth. If the field is non-zero, we don't need to calculate it again.
  if (verticalScrollbarWidth == 0) {
    // The following code will calculate (on the fly) the width of a vertical scroll bar.
    // We'll create two divs, one inside the other and add the outer div to the document body,
    // but off-screen where the user won't see it.
    // We'll measure the width of the inner div twice: (first) when the outer div's vertical
    // scrollbar is hidden and (second) when the outer div's vertical scrollbar is visible.
    // The width of inner div will be smaller when outer div's vertical scrollbar is visible.
    // By subtracting the two measurements, we can calculate the width of the vertical scrollbar.

    // I used code from the following websites as reference material:
    // http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
    // http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels

    Document document = Document.get();

    // Create an outer div.
    DivElement outerDiv = document.createDivElement();
    Style outerDivStyle = outerDiv.getStyle();
    // Use absolute positioning and set the top/left so that it is off-screen.
    // We don't want the user to see anything while we do this calculation.
    outerDivStyle.setProperty("position", "absolute");
    outerDivStyle.setProperty("top", "-1000px");
    outerDivStyle.setProperty("left", "-1000px");
    // Set the width and height of the outer div to a fixed size in pixels.
    outerDivStyle.setProperty("width", "100px");
    outerDivStyle.setProperty("height", "50px");
    // Hide the outer div's scrollbar by setting the "overflow" property to "hidden".
    outerDivStyle.setProperty("overflow", "hidden");

    // Create an inner div and put it inside the outer div.
    DivElement innerDiv = document.createDivElement();
    Style innerDivStyle = innerDiv.getStyle();
    // Set the height of the inner div to be 4 times the height of the outer div so that a
    // vertical scrollbar will be necessary (but hidden for now) on the outer div.
    innerDivStyle.setProperty("height", "200px");
    outerDiv.appendChild(innerDiv);

    // Temporarily add the outer div to the document body. It's off-screen so the user won't
    // actually see anything.
    Element bodyElement = document.getElementsByTagName("body").getItem(0);
    bodyElement.appendChild(outerDiv);

    // Get the width of the inner div while the outer div's vertical scrollbar is hidden.
    int widthWithoutScrollbar = innerDiv.getOffsetWidth();
    // Show the outer div's vertical scrollbar by setting the "overflow" property to "auto".
    outerDivStyle.setProperty("overflow", "auto");
    // Now, get the width of the inner div while the vertical scrollbar is visible.
    int widthWithScrollbar = innerDiv.getOffsetWidth();

    // Remove the outer div from the document body.
    bodyElement.removeChild(outerDiv);

    // Calculate the width of the vertical scrollbar by subtracting the two widths.
    verticalScrollbarWidth = widthWithoutScrollbar - widthWithScrollbar;
  }

  return verticalScrollbarWidth;
}