CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-plugins
user88039
user88039

Reputation: 31

Using the Jquery Position function

I am working on something which will basically create a business card online.

I'm trying to lay out the div tags with CSS. Then I want to grab the x and y co-ordinates of the div tags relative to their container so that it can be passed on to PHP GD library so that the image can be made.

I tried using the .position() function in jquery but its giving the relative position.

Does anyone have any pointers that may help?

Upvotes: 1

Views: 12570

Answers (2)

Harsh Chunara
Harsh Chunara

Reputation: 585

For Perfect Position of the element with Absolute 

var position = window.jQuery(this).position();

var parent_pos = window.jQuery(this).parent().position();

var xpos = position.top - parent_pos.top;
var ypos = position.left - parent_pos.left;

if you whole the parent div name or id then you can write as follow

var parent_pos = window.jQuery(this).parent('#cardcreate').position();

this works perfectly for it.

Upvotes: 0

Tim Büthe
Tim Büthe

Reputation: 63794

Check out the jQuery dimensions plugin to find the correct position of an element.

EDIT: As mentioned in the comments, the dimensions plugin was merged into the core. Documentation can be found here: offset and here position.

The linked example could be extended like this: Replace the following code

var x = $("#Company_Name").position().left;
var y = $("#Company_Name").position().top;

$("p:last").text( "Full Name: left: " + x + ", top: " + y );

with this:

var $companyname = $("#Company_Name");
var x = $companyname.position().left;
var y = $companyname.position().top;
var ax = $companyname.offset().left;
var ay = $companyname.offset().top;

$("p:last").text( "Full Name: left: " + x + "/" + ax + ", top: " + y + "/" + ay);

notice, I searched the element only once and stuffed it into a variable. That's a good idea if the search can take some time.

EDIT2: I just realized, that this does not work as I expected it. I wrote some function to calculate the relative position:

function toString(obj){
        return "{top: " + obj.top + " left: " + obj.left + "}";
    }

    function getRelativePosition(selector){

        var $parentElem = $("#parentElem");
        var $element = $(selector);

        var elementPosition = $element.position();
        var parentPosition = $parentElem.position();

        return {top: elementPosition.top - parentPosition.top, 
            left: elementPosition.left - parentPosition.left};
    }

  $(document).ready(function(){

        var position = $("#Company_Name").position();
        var relativePosition = getRelativePosition("#Company_Name");

        $("p:last").text("position: " + toString(position) + " relativePosition: " + toString(relativePosition));
    });

Let me know if this works for you. And someone may tell me what the difference between position and offset in jQuery :-\

EDIT3: To get the position of more then one element, you could call the functions with different ids or give them all the same name or the same class to have something to select them all. Here is a working example:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

function toString(obj){
    return "{top: " + obj.top + " left: " + obj.left + "}";
}

function getRelativePosition(selector){

    var $parentElem = $("#parentElem");
    var $element = $(selector);

    var elementPosition = $element.position();
    var parentPosition = $parentElem.position();

    return {top: elementPosition.top - parentPosition.top, 
        left: elementPosition.left - parentPosition.left};
}

$(document).ready(function(){

$(".cardfield").each(function(i){

    var position = $(this).position();
    var relativePosition = getRelativePosition(this);

    $("p:last").append("element: " + this.id + " position: " + toString(position) + " relativePosition: " + toString(relativePosition) + "<br>");

});
});

</script>
</head>
<body>

<br><br><br><br><br>

<div id="parentElem" style="margin: 0px; top:10px; background-color: #ddd;">
<br><br>
<div class="cardfield" id="Company_Name1">Foo Bar</div>
<br>
<div class="cardfield" id="Company_Name2">Company Name</div>
<div class="cardfield" id="firstname" style="float: right;">Tim</div><br/>
<div class="cardfield" id="lastname" style="float: right;">B&uuml;the</div>
<br><br>
</div>

</p></p>
</body>
</html>

Note: I gave all fields the class "cardfield" and used the jQuery to select them. Then I used the each function to work with the elements. Inside the function I gave to each, "this" refers to the current object.

Upvotes: 4

Related Questions