jquery-ui-position – Position an element relative to another

Show information among another field and keep it visible within the browser. Other solutions lack in visibility as menus open outside of the browser view or somewhere on the page when you go responsive. This is what jQuery Position can do for you:

  • Position elements relative to the window, another element or the cursor.
  • Open error messages in forms among the input field.
  • Open menus so that they are always visible in the browser.

Give it a try

One below the other

I like math but let jQuery do it easily.

$( ".something" ).position({
	of: '#parent',
	my: "left top",
	at: "left bottom", // that means right below the other ;)
	collision: "flip flip"
});

Source code

The parent. Move us to the edges of your browser πŸ˜‰

You can run but you can not hide.

position...
my:
at:
collision:
<script>
  jQuery(
    function () {
      function position() {
        jQuery( ".positionable" ).position(
          {
            of       : jQuery( "#ex1-parent" ),
            my       : jQuery( "#my_horizontal" ).val() + " " + jQuery( "#my_vertical" ).val(),
            at       : jQuery( "#at_horizontal" ).val() + " " + jQuery( "#at_vertical" ).val(),
            collision: jQuery( "#collision_horizontal" ).val() + " " + jQuery( "#collision_vertical" ).val()
          }
        );
      }

      jQuery( ".positionable" ).css( "opacity", 0.5 );

      jQuery( "select, input" ).on( "click keyup change", position );

      jQuery( "#ex1-parent" ).draggable( { drag: position } );

      position();
    }
  );
</script>

<div id="ex1-parent">
  <p>
    The parent.
    Move us to the edges of your browser ;)
  </p>
</div>

<div class="positionable" id="positionable1">
  <p>
    You can run but you can not hide.
  </p>
</div>

<div style="padding: 20px; margin-top: 75px;">
  position...
  <div style="padding-bottom: 20px;">
    <b>my:</b>
    <select id="my_horizontal">
      <option value="left">left</option>
      <option value="center">center</option>
      <option value="right">right</option>
    </select>
    <select id="my_vertical">
      <option value="top">top</option>
      <option value="center">center</option>
      <option value="bottom">bottom</option>
    </select>
  </div>
  <div style="padding-bottom: 20px;">
    <b>at:</b>
    <select id="at_horizontal">
      <option value="left">left</option>
      <option value="center">center</option>
      <option value="right">right</option>
    </select>
    <select id="at_vertical">
      <option value="top">top</option>
      <option value="center">center</option>
      <option value="bottom">bottom</option>
    </select>
  </div>
  <div style="padding-bottom: 20px;">
    <b>collision:</b>
    <select id="collision_horizontal">
      <option value="flip">flip</option>
      <option value="fit">fit</option>
      <option value="flipfit">flipfit</option>
      <option value="none">none</option>
    </select>
    <select id="collision_vertical">
      <option value="flip">flip</option>
      <option value="fit">fit</option>
      <option value="flipfit">flipfit</option>
      <option value="none">none</option>
    </select>
  </div>
</div>