Changing the position of div

Question

take a look at this Fiddle (Which tells everything). i just wanna position the .app accoring to the a position . I have defined the hyperlinks in fiddle as to where .app should appear and given id to each hyperlinks but as these id will not be there in my websites. Since i have to find the position of hyperlinks and accordingly position the .app so that it does not makes the body show a scrollbar as in this case .... can anyone position the .app accordingly ?

$('a').mouseover(function(){
    $('.app').css({
        top :  $(this).position().top + $(this).height() + 5,
        left : $(this).position().left + $(this).width()/2
    }).show();
}).mouseout(function(){
     $('.app').hide();
}); 

Answer 1

you can find solution for this. It's not perfect and it hasn't covered every cases, but just issue with "appear top", but it's easy fixed the rest ....

$('a').mouseover(function(){               

    $('.app').css({
        top : ((  $(this).position().top + $('.app').height() + 5)>$(window).height())?   
               $(this).position().top - $(this).height() -$('.app').height() - 5:
               $(this).position().top + $(this).height() + 5,
        left : $(this).position().left + $(this).width()/2
    }).show();
}).mouseout(function(){
    $('.app').hide();
});

Answer 2

$('a').mouseover(function () {

    $('.app').css({
        top: (($(this).position().top + $('.app').height() + 5) > $(window).height()) ? $(this).position().top - $(this).height() - $('.app').height() - 5 : $(this).position().top + $(this).height() + 5,
        left: (($(this).position().left + $(this).width() / 2 + $('.app').width()) > $(window).height()) ? $(this).position().left - $(this).width()/2 - $('.app').width()/2 : $(this).position().left + $(this).width()/2
    }).show();
}).mouseout(function () {
    $('.app').hide();
});

This code did the work !

http://jsfiddle.net/DT7Us/2/ -DEMO