最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Using the Jquery Position function - Stack Overflow

programmeradmin2浏览0评论

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

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 user88039user88039 311 gold badge1 silver badge4 bronze badges 1
  • 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

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.

发布评论

评论列表(0)

  1. 暂无评论