Geek Answers Handbook

JQuery Position Method

According to the 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 takes no arguments. Link here

But somewhere I found this:

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

The object is passed to the position method. Isn't this against the API documentation? It seems that the properties passed to the object above have some special meaning. What are these indicative properties. What are they doing? jquery.So may be wrong.

+4
source share
4 answers

This .position() option is part of the jQuery utility's user interface position . This gives you an easy way to position an element relative to another (or mouse cursor) in a specific way.

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

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

+3
source

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

This function is in jqueryUI utility not in Core jQuery

+2
source

Let's take it to the codec! A quick look at the jQuery 1.9.1 source shows:

 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 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, no arguments. Wherever you see this code, this is not the core of jQuery. Most likely, this is because the original author used the jQuery user interface, which extends this method.

+1
source

According to jQuery API for Position

  • my : determines which position is on the element that is positioned to align with the target element.
  • c . Determines which position on the target element should align the positioned element,
  • of : Whether the item is for a position against. If you provide a selector, the first matching element will be used. Example: "#targetElement" in your case.
+1
source

More articles:


All Articles