Home/ Questions/Q 6678447
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T04:14:39+00:00

I’m working on some Google Web Toolkit Code that places an AbsolutePanel on top

  • 0

I’m working on some Google Web Toolkit Code that places an AbsolutePanel on top of an image. The way I’m doing this is to:

  1. wait until the image is loaded (i.e. width/height are >0)

  2. get the absolute coordinates of the image in the viewport using image.getAbsoluteLeft() and image.getAbsoluteTop

  3. Set the position of the AbsolutePanel (a direct child of the RootPanel) to the same coordinates using RootPanel.get().setWidgetPosition(myPanel, imageAbsLeft, imageAbsTop);

This works in Chrome and IE. Strangely, though, Firefox always positions the AbsolutePanel “a few” pixels (I’d say between 1 and approx 10? But it varies from page load to page load) above the image. I’m clueless as to what’s causing this. Any hints much appreciated!

A live example of this is here: http://yuma-js.github.com. If you click the “Add Annotation” there’s a draggable box, which movement is constrained by the AbsolutePanel. You’ll notice that the constraining works perfect for Chrome, but is off for FireFox.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Morning,

    well, I did some research how I could overlay an image with a another object too, and found this article: How to overlay one div over another div.

    Based on that I made a similar example using SVG and drawing example, where I draw a rectangle around a space station. What I can tell you is, that you don’t want to mix pixel and percentage positioning, and if you can, you should use percentage positioning!

    Hope this helps somehow.

    Here is my example:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>SVG Example</title>
  <style>
  html, body {
    margin: 0px;
    padding: 0px;
    }

    #container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #navi, 
    #infoi {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #infoi {
        z-index: 10;
    }

    #navi img {     

    }
  </style>
</head>
<body>
<div id="container">
    <div class="navi"><img src="http://www.bing.com/fd/hpk2/SpaceStation_ROW1605701719.jpg" width="100%" height="100%"/></div>
    <div id="infoi"><svg xmlns="http://www.w3.org/2000/svg" version="1.1">
       <rect x="65%" y="40%" width="20%" height="30%"
        fill="none" stroke="red" stroke-width="2"/>
        </svg> 
    </div>
</div>
<p>This example draws a fullscreen image and places a fullscreen svg element above it. The svg element then draws a rectangle based on percentage sizes, 

which is around the space Station. If the browser window resizes, the size of the drawn rectanlge changes as well, to always be on top of the space 

station.</p>
<p>Resources for this example where the following links:</p>
<ul>
    <li><a href="https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div" >How to overlay one div over another div</a>
    <li><a href="http://de.wikipedia.org/wiki/Svg" >Wikipedia: Scalable Vector Graphics</a>
    <li><a href="http://www.w3.org/TR/SVG/shapes.html" >W3C Recommendation: 9 Basic Shapes</a>
</ul> 
<p>Image from: <a href="http://www.bing.com/">Bing.com</a>, © StockTrek/White/Photolibrary</p> 
</html>
    • 0