Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
Effects
Color Animation
Toggle Class
Add Class
Remove Class
Switch Class
Effect
Toggle
Hide
Show
Utilities
Position
About jQuery UI
Getting Started
Upgrade Guide
Changelog
Roadmap
Subversion Access
UI Developer Guidelines
Theming
Theming jQuery UI
jQuery UI CSS Framework
ThemeRoller application
Theme Switcher Widget

Position

This is the position parent element.

to position

to position 2

position...
my:
at:
offset:
collision:

Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
Drag around the parent element to see collision detection in action.

Overview

Utility script for absolutely positioning any widget relative to the window, document, a particular element, or the cursor/mouse.

Do not need ui.core.js or effects.core.js.

Dependencies

  • none (only jQuery core)

Example

Clicking on the green element transfers to the other.

$("#position1").position({
  my: "center",
  at: "center",
  of: "#targetElement"
});
$("#position2").position({
  my: "left top",
  at: "left top",
  of: "#targetElement"
});
$("#position3").position({
  my: "right center",
  at: "right bottom",
  of: "#targetElement"
});
$(document).mousemove(function(ev){
  $("#position4").position({
    my: "left bottom",
    of: ev,
    offset: "3 -3",
    collision: "fit"
  });
});



<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
#targetElement { width:240px;height:200px;background-color:#999;margin:30px auto; }
.positionDiv { width:50px;height:50px;opacity:0.6; }
#position1 {background-color:#F00;}
#position2 {background-color:#0F0;}
#position3 {background-color:#00F;}
#position4 {background-color:#FF0;}
</style>

  <script>
  $(document).ready(function() {
    
$("#position1").position({
  my: "center",
  at: "center",
  of: "#targetElement"
});
$("#position2").position({
  my: "left top",
  at: "left top",
  of: "#targetElement"
});
$("#position3").position({
  my: "right center",
  at: "right bottom",
  of: "#targetElement"
});
$(document).mousemove(function(ev){
  $("#position4").position({
    my: "left bottom",
    of: ev,
    offset: "3 -3",
    collision: "fit"
  });
});

  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<div id="targetElement">
  <div class="positionDiv" id="position1"></div>
  <div class="positionDiv" id="position2"></div>
  <div class="positionDiv" id="position3"></div>
  <div class="positionDiv" id="position4"></div>
</div>

</body>
</html>

Arguments

  • my

    Type:
    String

    Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

  • at

    Type:
    String

    Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

  • of

    Type:
    Selector

    Element to position against. You can use a browser event object contains pageX and pageY values. Example: "#top-menu"

  • offset

    Type:
    String

    Add these left-top values to the calculated position, eg. "50 50" (left top) A single value such as "50" will apply to both.

  • collision

    Type:
    String

    When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, eg. "flip", "fit", "fit flip", "fit none".

    • flip: to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back.
    • fit: so the element keeps in the desired direction, but is re-positioned so it fits.
    • none: not do collision detection.

  • using

    Type:
    Function

    When specified the actual property setting is delegated to this callback. Receives a single parameter which is a hash of top and left values for the position that should be set.