Jquery position method

Question

As per Jquery API documentation:

.position()Returns: Object

Description: Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.

This method does not accept any arguments.Reference here

But somewhere i found using this:

$("#position1").position({
  my: "center",
  at: "center",
  of: "#targetElement"
});

An object has been passed to position method .Isn't this against API documentation?It seems that the properties passed to an object above has some special meaning.What are those properties stating .What they do?I m a complete beginner to jquery.So may be i m wrong .

Answer 1

As per the jQuery API for the Position

1. my: Defines which position on the element being positioned to align with the target element.
2. at: Defines which position on the target element to align the positioned element against,
3. of: Is for the element to position against. If you provide a selector, the first matching element will be used. Example: "#targetElement" in your case.

Answer 2

This variant of .position() is part of the jQuery UI position utility. It gives you an easy way to place an element relative to another one (or the mouse cursor) in a certain way.

You are totally right that the original position() method does not accept arguments... but:

This plugin extends jQuery's built-in .position() method. If jQuery UI is not loaded, calling the .position() method may not fail directly, as the method still exists. However, the expected behavior will not occur.

Answer 3

Check this out - http://docs.jquery.com/UI/API/1.8/Position

That feature is in jqueryUI position utility not in Core jQuery

Answer 4

Let's take it to the codez ! A quick glance into the jQuery 1.9.1 source reveals:

position: function() {
    if ( !this[ 0 ] ) {
        return;
    }

    var offsetParent, offset,
        parentOffset = { top: 0, left: 0 },
        elem = this[ 0 ];

    // fixed elements are offset from window (parentOffset = {top:0, left: 0}, because it is it's only offset parent
    if ( jQuery.css( elem, "position" ) === "fixed" ) {
        // we assume that getBoundingClientRect is available when computed position is fixed
        offset = elem.getBoundingClientRect();
    } else {
        // Get *real* offsetParent
        offsetParent = this.offsetParent();

        // Get correct offsets
        offset = this.offset();
        if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
            parentOffset = offsetParent.offset();
        }

        // Add offsetParent borders
        parentOffset.top  += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true );
        parentOffset.left += jQuery.css( offsetParent[ 0 ], "borderLeftWidth", true );
    }

    // Subtract parent offsets and element margins
    // note: when an element has margin: auto the offsetLeft and marginLeft
    // are the same in Safari causing offset.left to incorrectly be 0
    return {
        top:  offset.top  - parentOffset.top - jQuery.css( elem, "marginTop", true ),
        left: offset.left - parentOffset.left - jQuery.css( elem, "marginLeft", true)
    };
},

---

No arguments read, no arguments used. Wherever you saw that code, its not jQuery core. Most likely, its because the original author used the jQuery UI, which extends that method.