CODEWITHSUNDEEP
javascripthtmlcsstooltip
Hulk
Hulk

Reputation: 34170

Positioning the div relative to mouse position

All,

How to Position the following div relative to mouse position so that the mouse and div are not out ofsync at theend of the page.May be just like a tooltip which always sjows the perfect position at the end of the page..

<style type="text/css">
#div1 { width: 200px; height: 30px; background-color: #a9a9a9; color: #fff; position: absolute; }
 </style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).mouseover(function(event){
$("#div1").css({'top': event.pageY, 'left': event.pageX});  
});
});
</script>
<div id="div1">mouseover me</div>

Thanks........

Upvotes: 7

Views: 6098

Answers (1)

jumperchen
jumperchen

Reputation: 1473

You can try with this example,

$(window).mouseover(function(event){
    var x = event.pageX,
        y = event.pageY,
        scX = $(window).scrollLeft(),
        scY = $(window).scrollTop(),
        scMaxX = scX + $(window).width(),
        scMaxY = scY + $(window).height(),
        wd = $("#div1").width(),
        hgh = $("#div1").height();

    if (x + wd > scMaxX) x = scMaxX - wd;
    if (x < scX) x = scX;
    if (y + hgh > scMaxY) y = scMaxY - hgh;
    if (y < scY) y = scY;
    $("#div1").css({'top': y, 'left': x});  
});

Upvotes: 6

Related Questions