Dynamically positioning elements using jQuery

Question

I am working om a menu bar, each menu bar item is an image, when user places mouse over menu item a div with submenu will appear.

I want to place div directly under the appropriate image item (no space, and div will hover above all elements), with right side alignment, meaning the right top corner of div should be under bottom right corner of image.

Because I can't and don't want to hard code position of divs, i want to do it dynamically.

For now I have this:

$('img').each(function(){                     
   jQuery(this).mouseenter(function(){
     var menuItem = $('#' + this.id + '_menu'); //get the needed div 
     var imgRight = this.offset() + this.width();


   });
 });

Answer 1

The offset() method has top and left properties, you need use them, example:

var imgRight = this.offset().left + this.width();
var imgTop = this.offset().top + this.height();

After that, you will have to give the absolute positioning to the DIVs to place them below the images:

menuItem.css({
  position:'absolute',
  top: imgTop,
  left: imgLeft,
  zIndex:5000
});

So your code becomes:

$('img').each(function(){                     
   jQuery(this).mouseenter(function(){

   var menuItem = $('#' + this.id + '_menu'); //get the needed div 
   var imgRight = this.offset().left + this.width();
   var imgTop = this.offset().top + this.height();

     menuItem.css({
       position:'absolute',
       top: imgTop,
       left: imgLeft,
       zIndex:5000
     });

     // now show the corresponding div
     menuItem.show('slow');

   });
});

More Info:

http://api.jquery.com/offset/

Answer 2

You shouldn't have to hard code or calculate the position of these items. Any of the following CSS rules should achieve your goal: position: relative; right: 0 or float: right:.

It'd be good to see some of your markup for additional testing. www.jsfiddle.net is a great resource for this.

Answer 3

there are 2 ways to do this: the correct-way or the cheat way... The correct way: you need to get the top and clientheight of the actuating object - clientheights no prob just call it - but the top means you must get the to of all the parent objects too - use this:

function J_pos(o)

{ var x,y; y=o.offsetTop; x=o.offsetLeft; o=o.offsetParent; while(o) { y+=o.offsetTop; x+=o.offsetLeft; o=o.offsetParent; } return [x,y]; };

Now w top and client height you do this: < div style=top:"+(p[0]+obj.clientHeight)+";left:"+p[1]

The cheat-way (not so dynamic - but quick): put a tag like a span around the actuating (mouseover) object - make it position relative - place a div inside it - make div id=ABC position:absolute;left:0;display:none now when mouseover make document.getElementById("ABC").style.display="" and bottom:0 - boom baby dusted. Downside to this is you have to manually do it for each instance - but if you only got 3 or so well bingo