CODEWITHSUNDEEP
javascriptjquery
user967451
user967451

Reputation:

How to get the position of an element relative to another using jQuery?

Please have a look at this:

http://liveweave.com/5bhHAi

If you click the "Get Pos" link you will see the red div's position relative to the image.

Now say this image's size has changed at some point down the line. How can I get the new position for the red div based on the initial data?

HTML:

  <div id="watermark"></div>

  <img src="http://placekitten.com/g/320/270" class="small-img">
  <div><br><br><a href="#" class="get-pos">Get Pos</a></div>

jQuery:

$(document).ready(function() {
    var $watermark = $('#watermark');

    $('.get-pos').on('click', function(e) {
      e.preventDefault();

      var watermark_position = {
        top: $watermark.position().top - $('.small-img').position().top,
        left: $watermark.position().left - $('.small-img').position().left
      };
      alert(watermark_position.top + 'px from the top');
      alert(watermark_position.left + 'px from the left');
    });

});

CSS:

#watermark { background: red; position: absolute; top: 215px; left: 265px; width:  50px; height: 50px; }

Upvotes: 2

Views: 766

Answers (2)

Steve
Steve

Reputation: 789

You can accomplish your intended goal (placing the watermark at the right place even after size changes) without using javascript at all if you do just a little reworking. A working example of the following solution is here (just change the width of the .img-container to see it function).:

.watermark {
  background: red;
  width: 50px;
  height: 50px;
}

.img-container {
  width: 295px;
  height: auto;
  position: relative;
}

.img-container img {
  width: 100%;
}

.img-container .watermark {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
<div class="img-container">
  <div class="watermark"></div>
  <img src="http://placekitten.com/g/320/270" class="small-img">
</div>

Your html containing the image will look basically like this:

<div class="img-container">
  <div class="watermark"></div>
  <img src="http://placekitten.com/g/320/270" class="small-img">
</div>

And the css to get the placement to happen looks like this:

.watermark { background: red; width: 50px; height: 50px; }

.img-container {
  width:  275px;
  height:  auto;
  position: relative;
}

.img-container img {
  width: 100%;
}

.img-container .watermark {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

Here, the image will always match the width of its container, and the watermark will always place itself ten pixels from the right and ten pixels from the bottom of the container.

Upvotes: 0

Sam Battat
Sam Battat

Reputation: 5745

Here is a solution to what I understand you want from question/comments:

http://jsfiddle.net/tXT2d/

        var imgPos = $(".image img").offset();
        var wmPos_tmp = $(".watermark").offset();

        var watermarkPosition = {
            top: wmPos_tmp.top - imgPos.top,
            left: wmPos_tmp.left - imgPos.left
        }

Upvotes: 1

Related Questions