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/