1

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.

aboutgeo
  • 137
  • 3
  • 9

1 Answers1

0

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>
Community
  • 1
  • 1
Stefan
  • 14,826
  • 17
  • 80
  • 143
  • Hm. It does indeed seem to solve the issue (or at least make it happen less often). The problem, though, is that my code is part of a JavaScript library. I.e. other people will include this in pages not under my control. Still good to know & I can add this to the documentation of my lib. Thx! – aboutgeo Oct 06 '11 at 10:05
  • I don't know your code but I think its the "cleanest" way to solve it. If you like you can you pls accept it as answer :) – Stefan Oct 06 '11 at 12:09