www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problem with div and z-index

  1. #1
    Join Date
    Apr 2009
    Posts
    12

    Problem with div and z-index

    Hello,

    i am having a problem and cannot find a solution myself. On my page i'm using a google earth box. Since the original info-balloon's layout is unsatisfying i wanna use an own element. My current solution is to create an element being defaultly hidden. On click on a marker the element is set to be visible and moved to the clicked target. This basically works, but not yet properly as the z-index seems to be not taken into account. Please check the screenshots.

    initial css for balloon
    Code:
    div#myballoon {
      position: absolute;
      width: 0;
      height: 0;
      margin-top: -3000;
      margin-left: -3000;
      padding: 0;
      background: url('/path/to/image.png') no-repeat;
      z-index: -30000;
    }
    HTML Code:
    <div id="google-earth-wrapper">
      <div id="map3d">
        <div id="myballoon"><!-- custom balloon with html inside shown/hidden via js --></div>
      </div>
    </div>
    Code:
    function moveBalloon(event){	
      ...
      // change css onclick
      $('#myballoon').css("width", 210);
      $('#myballoon').css("height", 122);
      $('#myballoon').css("margin-top", mouseY - 122);
      $('#myballoon').css("margin-left", mouseX - 105);
      $('#myballoon').css("z-index", 30000);
      
      // auto-hide after specified timeout
      setTimeout(function(){
        $('#myballoon').css("width", 0);
        $('#myballoon').css("height", 0);
        $('#myballoon').css("margin-top", -3000);
        $('#myballoon').css("margin-left", -3000);
        $('#myballoon').css("z-index", -30000);
      },4000);
    }
    Even with a z-index of 30000 the background image resides under the map. But if i give it a background color too then all works as it should.
    Code:
    div#myballoon {
      ...
      background: red url('/path/to/image.png') no-repeat;
      ...
    }
    Where is my mistake?
    Attached Images Attached Images

  2. #2
    Join Date
    Sep 2009
    Posts
    146
    hummm... sounds like your having more than one thing go wrong @ a time

    1. i am assuming you are using IE 8 or less, because the BG color fix is a sign of a has-layout problem (google it if you want a headache). how is it in other browsers? FF, Chrome?

    2. if im right then there are a couple solution to the has-layout problem, one being applying background color, but i dont think red is what you were going for lol instead try:
    Code:
    background: transparent url('/path/to/image.png') no-repeat;
    its hackish but that IE :-)

    if im wrong and you're having this problem with normal browsers, than idk... canvas z-indexing problem?

    -aPeg

  3. #3
    Join Date
    Apr 2009
    Posts
    12
    hello apeg,

    thanks for your reply.

    1. i am assuming you are using IE 8 or less, because the BG color fix is a sign of a has-layout problem (google it if you want a headache). how is it in other browsers? FF, Chrome?
    The problem appears with any browser. And no, i am using firefox for webdev.

    2. if im right then there are a couple solution to the has-layout problem, one being applying background color, but i dont think red is what you were going for.

    code removed

    if im wrong and you're having this problem with normal browsers, than idk... canvas z-indexing problem?
    Meanwhile i figured out that the problem has nothing to do with the has-layout-topic. It is a limitation from google who allow the use of iframes only for showing external content laying over a google earth window (not google map). They use this technique themselves as one can see with the usage conditions box bottom right on a google earth window. Every box that is not a rectangle and does not have a background-color will never show up over a map. This problem appears with fancybox plugin too. When i open something in fancybox (lightbox) then the box itself will be fully visible cuz its a rectangle with no transparency, but the closebutton, which is positioned top right bit outside the box behaves the same as the balloons from my starting post. Every part of this button that is outside the fancybox disappears. The rest (the quarter bottom left) persists.

    Thanks Google!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles