jquery ui position – How to position an element using jQuery UI .position method?

jquery ui position. very Useful positioning algorithm from the jquery ui Example with demo. Tips and tricks for dealing with widget instances. The default position is under the element.

jquery ui position

jQuery UI Position. by jQuery Foundation and other contributors. Relative window, documents, anchors, cursor / mouse and other elements of a positioning element.

syntax

.position( options )

Download jquery.ui.position.min.js or get a CDN url for 16 versions of jqueryui.

JqueryUI – Position Example

index.html

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI position method Example - www.pakainfo.com</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>
         .newspacelogDiv {
            position: absolute;
            width: 75px;
            height: 75px;
            background: #b9cd6d;
         }
         #welcomedisp {
            width: 300px;
            height: 500px;
            padding-top:50px;
         }
      </style>
      
      <script>
         $(function() {
            // Position the dialog offscreen to the left, but centered vertically
            $( "#newspacelog1" ).position({
               my: "center",
               at: "center",
               of: "#welcomedisp"
            });
            $( "#newspacelog2" ).position({
               my: "left top",
               at: "left top",
               of: "#welcomedisp"
            });
            $( "#newspacelog3" ).position({
               my: "right-10 top+10",
               at: "right top",
               of: "#welcomedisp"
            });
            $( document ).mousemove(function( event ) {
               $( "#newspacelog4" ).position({
                  my: "left+3 bottom-3",
                  of: event,
                  collision: "fit"
               });
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "welcomedisp">
         <div class = "newspacelogDiv" id = "newspacelog1">Box 1</div>
         <div class = "newspacelogDiv" id = "newspacelog2">Box 2</div>
         <div class = "newspacelogDiv" id = "newspacelog3">Box 3</div>
         <div class = "newspacelogDiv" id = "newspacelog4">Box 4</div>
      </div>
   </body>
</html>

jQuery UI Draggable Event : Getting Current Position

index.html

<!DOCTYPE html> 
<html> 
	<head>
    <title>jQuery UI Draggable  :  Getting Current Position using Events - www.pakainfo.com</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
	<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <style>
      #newspacelog { width: 140px; height: 140px; background: url(truck.png) no-repeat; }
      #active{font-family:Verdana; padding:5px; color:#fff; background:#44c756;
        box-shadow:4px 4px 4px #444;border-radius:10px;}
     </style>
    <script>
         $(document).ready(function() {
         $("#newspacelog").draggable({
          stop: function(e, ui) {
            var rel = $("<p />", {
         text: "The Draggable was moved " + ui.position.top + "px down, and " + ui.position.left + "px left of its initial position."
            }),
            offset = $("<p />", {
         text: "The Draggable was moved " + ui.offset.top + "px down , and " + ui.offset.left + "px left relative to the displayport."
            });
            $("#active").empty().append(rel).append(offset);
          }
        });
        });
    </script>
</head> 
<body>
   <div id="container">
      <div id="newspacelog"></div>
    </div>
    <div id="active"></div>

</body>
</html>

On scroll div fixed bottom

Also Read This πŸ‘‰   how to calculate age from date of birth in javascript?

I hope you get an idea about jquery ui position.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.