jQuery UI | position() Method

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”.

Note:

  • It does not support hidden elements positioning features.
  • Only child elements are positioned relative to any other element or target.

Syntax:

$(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:

Options:



  • 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:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js”></script>
<link
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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>jQuery UI position method</title>
    <link href=
          rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  
    <style>
        .class {
            .height: 10px;
        }
          
        .subDivClass {
            position: absolute;
            width: 80px;
            height: 80px;
            background: green;
            padding: 10px 10px;
        }
          
        #mainDivID {
            width: 300px;
            height: 300px;
            padding-top: 50px;
            background: #e9e9e9;
            border: 1px solid black
        }
    </style>
    <script>
        $(function() {
            // Position to the center with repect to the parent mainDivID
            $("#divID1").position({
                my: "center",
                at: "center",
                of: "#mainDivID"
            });
            // Position to the  top right keeping a gap of 10
            $("#divID2").position({
                my: "right-10 top+10",
                at: "right top",
                of: "#mainDivID"
            });
            /* Position to move around 
            keeping a gap of 10 at the left and top */
            $(document).mousemove(function(event) {
                $("#divID3").position({
                    my: "left+10 top+10",
                    of: event,
                    collision: "fit"
                });
            });
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQuery UI position utility </b>
    <div class="height"> </div>
    <div id="mainDivID">
        <div class="subDivClass" id="divID1">Position 1</div>
        <div class="subDivClass" id="divID2">Position 2</div>
        <div class="subDivClass" id="divID3">Position 3</div>
    </div>
</body>
  
</html>

chevron_right


Output:

Example 2: In the following example code position method is demonstrated along with all the above mentioned options or parameters.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>jQuery UI position method</title>
    <link href=
          rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  
    <style>
        .height {
            height: 10px;
        }
          
        #parentDivID {
            width: 500px;
            height: 120px;
            padding: 15px;
            border: 1px solid black;
            background-color: green;
            text-align: center;
        }
          
        .positionableClass {
            position: absolute;
            display: block;
            border-radius: 25%;
            background-color: #e9e9e9;
            text-align: center;
        }
          
        #positionableId {
            width: 80px;
            height: 80px;
        }
          
        #optionsDivID {
            padding: 10px;
            margin-top: 20px;
        }
          
        .selectDiv {
            padding-bottom: 20px;
        }
          
        select {
            margin-left: 15px;
        }
    </style>
    <script>
        $(function() {
            function position() {
                $(".positionableClass").position({
  
                    my: $("#myHorizontalID").val() +
                  " " + $("#myVerticalID").val(),
                    at: $("#atHorizontalID").val()
                  + " " + $("#atVerticalID").val(),
                    of: $("#parentDivID"),
                    collision: $("#collHorizontalID").val() +
                  " " + $("#collVerticalID").val()
  
                });
            }
  
            $("select").on("click keyup change", position);
  
            $("#parentDivID").draggable({
                drag: position
            });
  
            position();
        });
    </script>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <b>jQuery UI position method </b>
    <div class="height"> </div>
  
    <div id="parentDivID">
        <p>
            This is the parent target element.
        </p>
    </div>
  
    <div class="positionableClass" id="positionableId">
        <p>
            Change my position
        </p>
    </div>
  
    <div id="optionsDivID">
  
        <div class="selectDiv">
            <b>Select "my" positions :</b>
            <select id="myHorizontalID">
                <option value="left">left</option>
                <option value="center">center</option>
                <option value="right">right</option>
            </select>
            <select id="myVerticalID">
                <option value="top">top</option>
                <option value="center">center</option>
                <option value="bottom">bottom</option>
            </select>
        </div>
        <div class="selectDiv">
            <b>Select "at" positions :</b>
            <select id="atHorizontalID">
                <option value="left">left</option>
                <option value="center">center</option>
                <option value="right">right</option>
            </select>
            <select id="atVerticalID">
                <option value="top">top</option>
                <option value="center">center</option>
                <option value="bottom">bottom</option>
            </select>
        </div>
        <div class="selectDiv">
            <b>Select collision options:</b>
            <select id="collHorizontalID">
                <option value="flip">flip</option>
                <option value="fit">fit</option>
                <option value="flipfit">flipfit</option>
                <option value="none">fit none</option>
            </select>
            <select id="collVerticalID">
                <option value="flip">flip</option>
                <option value="fit">fit</option>
                <option value="flipfit">flipfit</option>
                <option value="none">none</option>
            </select>
        </div>
    </div>
  
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.