javascript - 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?

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

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

Does anyone have any pointers that may help?

Share Improve this question edited May 9, 2013 at 17:54 Hanna 10.8k11 gold badges60 silver badges91 bronze badges asked Apr 7, 2009 at 10:39 user88039 311 gold badge1 silver badge4 bronze badges

I think you're thinking you're going to be able to take a screenshot of the image using the PHP GD library? Is this the case? I don't think this is going to do what you want. – cgp Commented Apr 7, 2009 at 10:44

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

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

EDIT: As mentioned in the ments, 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 $panyname = $("#Company_Name");
var x = $panyname.position().left;
var y = $panyname.position().top;
var ax = $panyname.offset().left;
var ay = $panyname.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./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.

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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Using the Jquery Position function - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)