The jQuery UI framework provides many utility functions to the user, one of which is postion() method. The position() method helps in positioning any element relative to any target element in the page like window, any parent element, document or mouse. It describes the position of any element based on properties like “top”, “left”, “right” and “bottom”.
- It does not support hidden elements positioning features.
- Only child elements are positioned relative to any other element or target.
$(selector).position( options )
where options are of type objects which defines how the elements are to be positioned with respect to the target or parent element. We will explain only few of them that are commonly used:
- my: It is of string type. This option mentions the position of element which is required to align with the parent target element. Its default value is center.
- at: It is of string type. This option mentions the position or location of the parent target element against which the child element is positioned. Its default value is center.
- of: The type is selector or parent element. This option mentions the parent or target elements to position against it. Its default value is null.
- collision: It is of string type. This option mentions the rules applied when the positioned element goes beyond the document window. Default value is flip.
Links for jQuery UI:
href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css” rel=”stylesheet” type=”text/css” />
Example 1: In the following example, the basic default position() method is demonstrated. “divID1” and “divID2” are fixed with their “my” and “at” locations relative to parent element “mainDivID”. The mouse event is handled for “divID3” . The position is designed to move around the document keeping a gap of 10 at the left and top.
Example 2: In the following example code position method is demonstrated along with all the above mentioned options or parameters.