JqueryUI Position - JqueryUI

What is the Position in JqueryUI?

The utility methods of jqueryUi, the position() method are discussed in his chapter.The position() method allows to position an element with respect to another element or mouse event.

jQuery UI extends the .position() method from jQuery core to describe the position an element . Instead of working with numbers and math, you work with meaningful words (such as left and right) and relationships.

Syntax

The syntax of the position() method is as follows:

Here, options is of type Object and provides the information that specifies how the elements of the wrapped set are to be positioned.
The different options that can be used with this method are listed in the below table:

Sr.No. Option & Description
1 my
This option specifies the location of the wrapped elements (the ones being re-positioned) to align with the target element or location. By default its value iscenter.
Syntax:
2 at
This option is of type String and specifies the location of the target element against which to align the re-positioned elements. Takes the same values as themyoption. By default its value iscenter.
Syntax:
3 of
This is of type Selector or Element or jQuery or Event. It identifies the target element against which the wrapped elements are to be re-positioned, or an Event instance containing mouse coordinates to use as the target location. By default its value isnull.
Syntax:
4 collision
This option is of type String and specifies the rules to be applied when the positioned element extends beyond the window in any direction. By default its value isflip.
Syntax:
5 using
This option is a function that replaces the internal function that changes the element position. Called for each wrapped element with a single argument that consists of an object hash with theleftandtopproperties set to the computed target position, and the element set as the function context. By default its value isnull.
Syntax:
6 within
This option is a Selector or Element or jQuery element, and allows you to specify which element to use as the bounding box for collision detection. This can come in handy if you need to contain the positioned element within a specific section of your page. By default its value iswindow.

Example

The use of position method is demonstrated in the following example:

The above code is saved in an HTML file positionmethodexample.htm and open it in a standard browser which supports javascript, the following output is seen:

The aboce example is illustrated as follows:

  • Box 1 is aligned to center (horizontally and vertically) of the div element.
  • Box 2is aligned to left top (horizontally and vertically) of the div element.
  • Box 3is displayed in the top right corner of the window, but leave some padding so that the message stands out more. This is done using the horizontal and vertical values of myor at.
  • For Box 4, the of value is set as an event object. This is an event associated with a pointer and moves with the mouse event.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

JqueryUI Topics