CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Andrija Novaković
Andrija Novaković

Reputation: 23

Dynamically position absolute element on game map

I found myself stuck with this problem: I have game map with following code

Code

.content-right {
  width: 50%;
  height: 100%;
  position: relative;
  align-self: auto;
  background-color: #44362D;
}
.content-inner-top {
  width: 100%;
  height: 70%;
  background-image: url("https://i.sstatic.net/9glDQ.jpg"); /* map.png */
  background-position: left center;
  background-size: 100% auto;
  -moz-user-select: none;
  background-repeat: no-repeat;
  box-sizing: border-box;
  position: relative;
  -webkit-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
     -moz-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
          box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
}
.content-inner-bottom {
  width: 100%;
  height: 30%;
  margin: 0 auto;
  z-index: 9;
  text-align: center;
  display: block;
  position: relative;
  top: 10%;
  transform: translateY(-10%);
}
#position {
  width: 4%;
  height: 6.11979%;
  background-color: #FF503C;
  border: 3px solid #90EE90;
  box-shadow: 0px 0px 35px #87CEEB;
  position: relative;
  border-radius: 50%;
  transform: scaleY(0.75);
  left: 85%;
  top: 200px;
}
<div class="content-right">
  <div class="content-inner-top">
    <div id="position"></div>
  </div>
  <div class="content-inner-bottom"></div>
</div>

I would like to absolute position #position element on game map, but, I find it impossible because every time I resize browser window height, element goes to another place. Images are shown below.

Images

1st image (normal window)

normal window

2nd image (resized window)

resized window

What should I do? I cannot find solution via javascript nor jQuery either...

Thanks for your help in advance

Upvotes: 2

Views: 317

Answers (3)

vkjgr
vkjgr

Reputation: 4448

I would use SVG instead, simple code and fully responsive:

svg {
  display: block;
  width: 100%;
}
circle {
  stroke: white;
  stroke-width: 3;
  fill: red;
}
<svg viewBox="0 0 604 568">
  <image x="0" y="0" width="586" height="604" xlink:href="http://i60.tinypic.com/2enrntu.jpg"/>
  <circle cx="400" cy="190" r="20"/>
</svg>

Upvotes: 1

Max Novich
Max Novich

Reputation: 1169

You will need to modify your layout in order to achieve this behavior First of all you need to add your map as an img and created a holder for it

<div class="content-right">
    <div class="content-inner-top">
        <div class="map-holder">
            <img src="http://i.imgur.com/wLJ1Pnt.jpg" class="content-inner-map" />
            <div id="position"></div>
        </div>
    </div>
    <div class="content-inner-bottom"></div>
</div>

After that it is a matter of css:

added

.content-inner-map {
    resize: both;
    width: 100%;
}
.map-holder {
    position: relative;
    top: 50%;
    display: block;
    transform: translateY(-50%);
}
.content-inner-top:after {
    position: absolute;
    -webkit-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px 0px 35px 11px rgba(0, 0, 0, 0.75);
    top:0;
    left:0;
    right:0;
    bottom:0;
    content:"";
}

Altered

.content-inner-top {
    width: 100%;
    height: 70%;
    -moz-user-select: none;
    box-sizing: border-box;
    position: relative;
}

#position {
    width: 4%;
    height: 6.11979%;
    background-color: #FF503C;
    border: 3px solid #90EE90;
    box-shadow: 0px 0px 35px #87CEEB;
    position: absolute;
    border-radius: 50%;
    transform: scaleY(0.75);
    left: 85%;
    top: 24%;
}

Here is a working Fiddle

Upvotes: 1

Jarom&#237;r Šetek
Jarom&#237;r Šetek

Reputation: 478

I see that there's a top in 'px' but when you decrease the size of window, the image is smaller not only in width but also height. That's why the pointer went down. The percentage 'left' property seems to work fine. If you want to use also percents for 'top' property (which could solve the problem), you have to explicitly define the height of the element (the image in your case). You can do that with jQuery for example most easily like this (given that you have an #image element):

$('#image').height($('#image').height());

Then you can add a resize handler and reassign new height. You may have to remove the previous height, so the whole would be something like this:

$(window).resize(function() {
    $("#image").css("height","");
    $('#image').height($('#image').height());
});

Then you should be able to use css top property in percents and it would be working after window resize.

Upvotes: 2

Related Questions