JqueryUI - Position

In this chapter we shall see one of the utility methods of jqueryUi, the position() method. The position() method allows you to position an element with respect to another element or mouse event.

jQuery UI extends the .position() method from jQuery core in a way that lets you describe how you want to position an element the same way you would naturally describe it to another person. Instead of working with numbers and math, you work with meaningful words (such as left and right) and relationships.

Syntax

The following is the syntax of the position() method −

.position( options )

Where options is of type Object and provides the information that specifies how the elements of the wrapped set are to be positioned. Following table lists the different options that can be used with this method −

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 is center.

Option - 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 is center.

Two of these values are used to specify location: top, left, bottom, right, and center, separated by a space character, where the first value is the horizontal value, and the second the vertical. Whether the specified single value is considered horizontal or vertical depends upon which value you use (for example, top is taken as vertical, while right is horizontal).

Example

top, or bottom right.
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 the my option. By default its value is center.

Option - 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 the my option. By default its value is center.

Example

"right", or "left center"
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 is null.

Option - 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 is null.

Example

#top-menu
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 is flip.

Option - 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 is flip.

Accepts two (horizontal followed by vertical) of the following −

  • flip − Flips the element to the opposing side and runs collision detection again for fit. If neither side fits, center is used as a fallback.

  • fit − Keeps the element in the desired direction, but adjusts the position such that it will fit.

  • flipfit − First applies the flip logic, placing the element on whichever side allows more of the element to be visible. Then the fit logic is applied to ensure as much of the element is visible as possible.

  • none − Disables collision detection.

If a single value is specified, it applies to both directions.

Example

"flip", "fit", "fit flip", "fit none"
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 the left and top properties set to the computed target position, and the element set as the function context. By default its value is null.

Option - 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 the left and top properties set to the computed target position, and the element set as the function context. By default its value is null.

Example

{horizontal: "center", vertical: "left", important: "horizontal" }
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 is window.

Option - 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 is window.

Example

The following example demontstrates the use of position method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI position method Example</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .positionDiv {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #b9cd6d;
         }
         #targetElement {
            width: 300px;
            height: 500px;
            padding-top:50px;
         }
      </style>
      
      <script>
         $(function() {
            // Position the dialog offscreen to the left, but centered vertically
            $( "#position1" ).position({
               my: "center",
               at: "center",
               of: "#targetElement"
            });
            $( "#position2" ).position({
               my: "left top",
               at: "left top",
               of: "#targetElement"
            });
            $( "#position3" ).position({
               my: "right-10 top+10",
               at: "right top",
               of: "#targetElement"
            });
            $( document ).mousemove(function( event ) {
               $( "#position4" ).position({
                  my: "left+3 bottom-3",
                  of: event,
                  collision: "fit"
               });
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "targetElement">
         <div class = "positionDiv" id = "position1">Box 1</div>
         <div class = "positionDiv" id = "position2">Box 2</div>
         <div class = "positionDiv" id = "position3">Box 3</div>
         <div class = "positionDiv" id = "position4">Box 4</div>
      </div>
   </body>
</html>

Let us save the above code in an HTML file positionmethodexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

In this example we see that −

  • 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 my or 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.

Advertisements