library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Position: Extend feedback test page to include two mouse-positioned elements, highlights the 0px center/middle limitation

Browse Source 
Also rename the demo file to match the variables names, 'feedback', instead of 'notification'
This commit is contained in:
Jörn Zaefferer 2012-04-11 15:20:30 +02:00
parent 623e8e68b4
commit 260261255b
1 changed files with 30 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
tests/visual/position/position_notification.html → tests/visual/position/position_feedback.html
View File

@ -13,6 +13,15 @@
<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script> <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript"> <script type="text/javascript">
$(function() { $(function() {
function using( position, feedback ) {
$(this).offset( position );
$(this).text(feedback.horizontal + " " + feedback.vertical + " " + feedback.important)
$(this)
.removeClass("left right top bottom center middle vertical horizontal")
.addClass(feedback.horizontal)
.addClass(feedback.vertical)
.addClass(feedback.important);
}
var target = $("#target").position({ var target = $("#target").position({
my: "center", my: "center",
at: "center", at: "center",
@ -37,18 +46,29 @@
my: "center", my: "center",
at: direction, at: direction,
of: target, of: target,
using: function( position, feedback ) { using: using
$(this).offset( position );
$(this).text(feedback.horizontal + " " + feedback.vertical + " " + feedback.important)
$(this)
.removeClass("left right top bottom")
.addClass(feedback.horizontal)
.addClass(feedback.vertical)
.addClass(feedback.important);
}
}) })
}); });
element.remove();
var targetOffset = target.offset();
var oppositeElement = element.clone().width(50).appendTo('body');
element.width(150);
$(document).on( "mousemove", function(event) {
element.position({
my: "left top",
at: "left top",
of: target,
offset: (event.pageX - targetOffset.left) + " " + (event.pageY - targetOffset.top),
using: using
});
oppositeElement.position({
my: "left top",
at: "left top",
of: target,
offset: (-1 * (event.pageX - targetOffset.left)) + " " + (-1 * (event.pageY - targetOffset.top)),
using: using
});
} )
}); });
</script> </script>
<style> <style>