Utility script for absolutely positioning any widget relative to the window, document, a particular element, or the cursor/mouse.
Do not need ui.core.js or effects.core.js.
$("#position1").position({ my: "center", at: "center", of: "#targetElement" }); $("#position2").position({ my: "left top", at: "left top", of: "#targetElement" }); $("#position3").position({ my: "right center", at: "right bottom", of: "#targetElement" }); $(document).mousemove(function(ev){ $("#position4").position({ my: "left bottom", of: ev, offset: "3 -3", collision: "fit" }); });
<!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/jquery-1.4.1.js"></script> <script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js"></script> <style type="text/css"> #targetElement { width:240px;height:200px;background-color:#999;margin:30px auto; } .positionDiv { width:50px;height:50px;opacity:0.6; } #position1 {background-color:#F00;} #position2 {background-color:#0F0;} #position3 {background-color:#00F;} #position4 {background-color:#FF0;} </style> <script type="text/javascript"> $(document).ready(function(){ $("#position1").position({ my: "center", at: "center", of: "#targetElement" }); $("#position2").position({ my: "left top", at: "left top", of: "#targetElement" }); $("#position3").position({ my: "right center", at: "right bottom", of: "#targetElement" }); $(document).mousemove(function(ev){ $("#position4").position({ my: "left bottom", of: ev, offset: "3 -3", collision: "fit" }); }); }); </script> </head> <body style="font-size:62.5%;"> <div id="targetElement"> <div class="positionDiv" id="position1"></div> <div class="positionDiv" id="position2"></div> <div class="positionDiv" id="position3"></div> <div class="positionDiv" id="position4"></div> </div> </body> </html>