CODEWITHSUNDEEP
javascriptjquerycsshtml
Rose
Rose

Reputation: 2882

Div on top of Image moving out of it's right spot on the image

I've a div that I placed on top of a background image. The div is clickeable so it brings a popup dialog. The background image has got dots on which the div circles are to be placed.

The problem: It works fine when both the background image is left aligned and the div elements have "position:absolute; left:x; top:y" but my problem is when I try to center align the image the absolute-x and absolute-y of the div are not being in the spots they have to be in the image. Also when i change the size of the window the location of the div square shifts. I tried both absolute and relative positioning.

What I have:

<style>
    .containerdiv { position: relative; width:100%; } 
    .cornerimage { position: absolute; top: 100px; left: 130px; } 
    .circle {
        border-radius: 50%;
        display: inline-block;
        margin-right: 20px;
        background: none repeat scroll 0 0 #701470;
        height: 24px;
        width: 24px;
    }
</style>

And my div's here:

<div class="containerdiv" align="center">
    <!-- my background image -->
    <img border="0" src='http://www.infokerala.org/sites/default/files/images/barry_boehms_spiral_model.jpg' alt="">

    <!-- trying absolute positioning -->
    <div class="circle" id="bar" style="top: 142px; left:875px; position: absolute;"></div>

    <!-- trying relative positioning -->
    <div class="circle" id="foo" style="top: -68px; right: 332px; left:-332px; position: relative;"></div>
<div>

As you can see in the image, as I resize the window, the absolute positioned div starts moving off of the image. The "relative" positioned div disappears after some time. I'm not sure why? All I want is the div circles to be in fixed positions on top of the image regardless of the window size or where in the page I embed the image or any resizing activity.

What I wanted:

What I wanted:

How the div moves out of it's initial location: enter image description here

Finally even the "relative" positioned div also disappears, after I slowly shrink the window size :(

enter image description here

I understand that "absolute" positioning is absolute position with respect to the window, but why how can I make the div's stick to the original spots I wanted them to be?

Upvotes: 1

Views: 1000

Answers (4)

Justin
Justin

Reputation: 885

You will need to add an event that recalculates the absolute position of the div either on page resize and onload:

    <script>
    function recalc(){
        var width, height;
       width = $('.containerDiv').width();
       height = $('.containerDiv').height();
       width = width / 2;
       height = height / 2;
       $("#bar").css({"position":"absolute","top": width + "px","left": height + "px",});
       $("#foo").css({"position":"absolute","top": width + "px","left": height + "px",});

    }

    $(window).load(function(){ recalc();});

    $(window).resize(function () { recalc();});

    </script>

Upvotes: 1

SzabV
SzabV

Reputation: 244

Instead of using a div have you considered using an image map? You can make it look the way you want and it's positioning is based on the image so it will stay in the correct position. You can also attach the clicks as you would to a dive.

I know that image maps are considered a bit Web 1.0 but I have seen them used very effectively in exactly this sort of situation to produce very dynamic results with the addition of JavaScript and JQuery. This JQuery literary works greate: ImageMapster

Where as the floating div's solution has always seemed a bit like forcing a square peg in a round hole.

Upvotes: 2

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

Since you know the size of the background image, it's easy to calculate percentile offsets instead of absolute offsets.

Say you have an image of 500x500 pixels as background, and you want to position the circle at position 50x50. If you put it at left:50px;top:50px the image will remain at that position even if the parent container resizes. However if you put it at left:10%;top:10% its offsets will scale along with the positioning parent.

Upvotes: 2

Aram
Aram

Reputation: 5705

so when you position it absolute, it is going to stay there, and when your background image moves because of the window resize, it is going to go away from the top of it.(actualt the circle is staying in its x,y position, and it is the background that is moving) your solution is to go with relative. I put your code in jsfiddle and the relative works fine

works fine here, not sure why you said it disapears after sometime? maybe some JS removes it?

Upvotes: 1

Related Questions