jQuery: How to position one element relative to another?

Question

I have a hidden DIV which contains a toolbar-like menu.

I have a number of DIVs which are enabled to show the menu DIV when the mouse hovers over them.

Is there a built-in function which will move the menu DIV to the top right of the active (mouse hover) DIV? I'm looking for something like $(menu).position("topright", targetEl);

Answer 1

If you have the following (X)HTML:

<div style="position: absolute; display: none;" id="menu">
   <!-- menu stuff in here -->
</div>
<div id="placeholder">Hover over me to show the menu here</div>

then you can use the following JavaScript code:

$("#placeholder").mouseover(showMenu);

var showMenu = function(ev) {
  //get the position of the placeholder element
  var pos = $("#placeholder").offset();  
  var width = $("#placeholder").width();
  //show the menu directly over the placeholder
  $("#menu").css( { "left": (pos.left + width) + "px", "top":pos.top + "px" } );
  $("#menu").show();
}

Answer 2

Something like this?

$(menu).css("top", targetE1.y + "px"); 
$(menu).css("left", targetE1.x - widthOfMenu + "px");

Answer 3

This is what worked for me in the end.

var showMenu = function(el, menu) {
 //get the position of the placeholder element  
 var pos = $(el).offset();    
 var eWidth = $(el).outerWidth();
 var mWidth = $(menu).outerWidth();
 var left = (pos.left + eWidth - mWidth) + "px";
 var top = 3+pos.top + "px";
 //show the menu directly over the placeholder  
 $(menu).css( { 
  position: 'absolute',
  zIndex: 5000,
  left: left, 
  top: top
 } );

 $(menu).hide().fadeIn();
};

Answer 4

This works for me:

var posPersonTooltip = function(event) {
var tPosX = event.pageX - 5;
var tPosY = event.pageY + 10;
$('#personTooltipContainer').css({top: tPosY, left: tPosX});

Answer 5

Here is a jQuery function I wrote that helps me position elements.

Here is an example usage:

$(document).ready(function() {
  $('#el1').position('#el2', {
    anchor: ['br', 'tr'],
    offset: [-5, 5]
  });
});

The code above aligns the bottom-right of #el1 with the top-right of #el2. ['cc', 'cc'] would center #el1 in #el2. Make sure that #el1 has the css of position: absolute and z-index: 10000 (or some really large number) to keep it on top.

The offset option allows you to nudge the coordinates by a specified number of pixels.

The source code is below:

jQuery.fn.getBox = function() {
  return {
    left: $(this).offset().left,
    top: $(this).offset().top,
    width: $(this).outerWidth(),
    height: $(this).outerHeight()
  };
}

jQuery.fn.position = function(target, options) {
  var anchorOffsets = {t: 0, l: 0, c: 0.5, b: 1, r: 1};
  var defaults = {
    anchor: ['tl', 'tl'],
    animate: false,
    offset: [0, 0]
  };
  options = $.extend(defaults, options);

  var targetBox = $(target).getBox();
  var sourceBox = $(this).getBox();

  //origin is at the top-left of the target element
  var left = targetBox.left;
  var top = targetBox.top;

  //alignment with respect to source
  top -= anchorOffsets[options.anchor[0].charAt(0)] * sourceBox.height;
  left -= anchorOffsets[options.anchor[0].charAt(1)] * sourceBox.width;

  //alignment with respect to target
  top += anchorOffsets[options.anchor[1].charAt(0)] * targetBox.height;
  left += anchorOffsets[options.anchor[1].charAt(1)] * targetBox.width;

  //add offset to final coordinates
  left += options.offset[0];
  top += options.offset[1];

  $(this).css({
    left: left + 'px',
    top: top + 'px'
  });

}

Answer 6

These are all pretty good ways of doing it, but they all seem to fall apart when resizing the browser window. I believe that one needs to add an event that re-positions items when the browser is resized.

Answer 7

You can now use :

$("#my_div").position({
 my: "left top",
 at: "left bottom",
 of: this, // or $("#otherdiv)
 collision: "fit"
})

for fast positionning (http://docs.jquery.com/UI/Position)