Positioning the div relative to mouse position

Question

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........

jumperchen · Accepted Answer · 2010-12-10 14:12:55Z

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}); });

Collectives™ on Stack Overflow

Positioning the div relative to mouse position

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related